Ask a Question related to Macromedia Dynamic HTML, Design and Development.
-
Polly Anna 22 #1
CSS - Margins and absolute positioning don't worktogether
Hi,
I am creating a simple form with input boxes and controlling the input text
boxes through the class .CInput.
I have set a margin between the input boxes which works fine until I set the
positioning of the boxes using 'absolute' and then it just jams all the input
text boxes together (at the correct position) but the margin settings are
totally ignored.
I would appreciate any advice as to why these two rules conflict with each
other.
Many thanks in advance,
Polly Anna
' the CSS rule
.CInput {
background-color: #339966;
margin-top: 0.5em;
margin-bottom: 0.5em;
width: 300px;
left: 50%;
position: absolute;
}
' the html page
<body>
<label >Title
<input name="textfield" type="text" class="CInput" /></label>
<br />
<label >First Name
<input name="textfield2" type="text" class="CInput" />
</label>
<br />
<label>Surname
<input name="textfield3" type="text" class="CInput" />
</label>
<br />
<label>
Position and/or organisation
<input name="textfield4" type="text" class="CInput" />
</label>
<br />
<label>Address
<input name="textfield5" type="text" class="CInput" />
</label>
</body>
Polly Anna 22 Guest
-
Custom Controls and Absolute Positioning
Hi all, I have a couple of custom controls that several users of an application are using and got a request from one of the guys that they're... -
Prob. with Absolute/Relative Positioning of Layers
I'm using the List-u-Like generator to create a menu (http://www.listulike.com/generator/) for this page that I created in Dreamweaver:... -
ASP.NET Custom WebControl Absolute Positioning
Hi, I'm currently in the process of building a custom webcontrol. I nearly finished it, however one thing is a mystery to me: how do i enable the... -
Absolute positioning resizes incorrectly
I have an ASPX page that contains an HTML table. Inside one table cell I have either a panel containing 20 placeholders or simply 20 placeholders... -
I guess my questions is about absolute positioning......
Here is my issue. We have created a PDF with form fields. The PDF was a Word document converted to PDF. We have placed a form field at the very... -
Murray *TMM* #2 Re: CSS - Margins and absolute positioning don't work together
> but the margin settings are
This is how it should be. Margins make little sense on absolutely> totally ignored.
positioned elements since such elements are removed from the normal flow,
thus they cannot push away any other elements on the page. Using margins
like this can only affect the placement of the element to which the margin
is applied, not any other element. For example, this div -
<div style="margin-lett:100px;left:100px;">
will actually be placed 200px from the left margin of its container, but
that margin cannot affect the placement of any other element.
Does that make sense?
--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver
(If you *MUST* email me, don't LAUGH when you do so!)
==================
[url]http://www.dreamweavermx-templates.com[/url] - Template Triage!
[url]http://www.projectseven.com/go[/url] - DW FAQs, Tutorials & Resources
[url]http://www.dwfaq.com[/url] - DW FAQs, Tutorials & Resources
[url]http://www.macromedia.com/support/search/[/url] - Macromedia (MM) Technotes
==================
"Polly Anna 22" <webforumsuser@macromedia.com> wrote in message
news:drnbd4$85i$1@forums.macromedia.com...> Hi,
>
> I am creating a simple form with input boxes and controlling the input
> text
> boxes through the class .CInput.
>
> I have set a margin between the input boxes which works fine until I set
> the
> positioning of the boxes using 'absolute' and then it just jams all the
> input
> text boxes together (at the correct position) but the margin settings are
> totally ignored.
>
> I would appreciate any advice as to why these two rules conflict with each
> other.
>
> Many thanks in advance,
>
> Polly Anna
>
> ' the CSS rule
> .CInput {
> background-color: #339966;
> margin-top: 0.5em;
> margin-bottom: 0.5em;
> width: 300px;
> left: 50%;
> position: absolute;
> }
>
> ' the html page
>
> <body>
> <label >Title
> <input name="textfield" type="text" class="CInput" /></label>
> <br />
> <label >First Name
> <input name="textfield2" type="text" class="CInput" />
> </label>
> <br />
> <label>Surname
> <input name="textfield3" type="text" class="CInput" />
> </label>
> <br />
> <label>
> Position and/or organisation
> <input name="textfield4" type="text" class="CInput" />
> </label>
> <br />
> <label>Address
> <input name="textfield5" type="text" class="CInput" />
> </label>
>
> </body>
>
>
Murray *TMM* Guest
-
Polly Anna 22 #3 Re: CSS - Margins and absolute positioning don't worktogether
Hi Murray,
> <div style="margin-lett:100px;left:100px;">>will actually be placed 200px from the left margin of its container, but
>that margin cannot affect the placement of any other element.thank you for your explanations. I think I am beginning to understand ->Does that make sense?
slowly. So, if I had specified a top position for each element, then the
margin would be added to it, but seeing as I have not, then each element just
ignores the other one's margin setting - I think that is what you are saying.
Okay, so If I set my input fields to always be 50% from their container
element - ( I have created two container divs that basically divide the form
into 2) how can I make them so that they are not jammed up together. What
principles do you think that I should use. I'd be grateful if you could point
me in the right direction once again.
Many thanks,
Polly Anna
Polly Anna 22 Guest
-
Murray *TMM* #4 Re: CSS - Margins and absolute positioning don't work together
An element that is removed from the normal flow will not be affected by
margins on any other element. That's why you can have a page with left
margin of 100px, and still place a layer at left:20px.
With form elements, I always do something like this -
<style type="text/css">
<!--
label { float:left; clear:left;text-align:right; width:150px;
margin-right:20px; }
input { display:block; margin-bottom:20px;}
-->
</style></head>
<body>
<form name="form1" method="post" action="">
<label for="textfield">testing</label>
<input type="text" name="textfield" id="textfield">
<label for="label">testing2</label>
<input type="text" name="textfield2" id="label">
</form>
--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver
(If you *MUST* email me, don't LAUGH when you do so!)
==================
[url]http://www.dreamweavermx-templates.com[/url] - Template Triage!
[url]http://www.projectseven.com/go[/url] - DW FAQs, Tutorials & Resources
[url]http://www.dwfaq.com[/url] - DW FAQs, Tutorials & Resources
[url]http://www.macromedia.com/support/search/[/url] - Macromedia (MM) Technotes
==================
"Polly Anna 22" <webforumsuser@macromedia.com> wrote in message
news:drpvk2$s4r$1@forums.macromedia.com...> Hi Murray,
>
>>> > <div style="margin-lett:100px;left:100px;">>> >will actually be placed 200px from the left margin of its container, but
> >that margin cannot affect the placement of any other element.>> >Does that make sense?
> thank you for your explanations. I think I am beginning to understand -
> slowly. So, if I had specified a top position for each element, then the
> margin would be added to it, but seeing as I have not, then each element
> just
> ignores the other one's margin setting - I think that is what you are
> saying.
>
> Okay, so If I set my input fields to always be 50% from their container
> element - ( I have created two container divs that basically divide the
> form
> into 2) how can I make them so that they are not jammed up together.
> What
> principles do you think that I should use. I'd be grateful if you could
> point
> me in the right direction once again.
>
> Many thanks,
>
> Polly Anna
>
>
Murray *TMM* Guest
-
Polly Anna 22 #5 Re: CSS - Margins and absolute positioning don't worktogether
Hi Murray,
I just can't tell you how grateful I am for your help and also for the CSS
code you gave me. I have never used the statement
clear:left
and I will definitely have to have a play to find out why all these statements
work together, using your explanations.
So thank you very very much.
Kind regards,
Polly Anna
Polly Anna 22 Guest
-
Murray *TMM* #6 Re: CSS - Margins and absolute positioning don't work together
You're welcome, and good luck! 8)
--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver
(If you *MUST* email me, don't LAUGH when you do so!)
==================
[url]http://www.dreamweavermx-templates.com[/url] - Template Triage!
[url]http://www.projectseven.com/go[/url] - DW FAQs, Tutorials & Resources
[url]http://www.dwfaq.com[/url] - DW FAQs, Tutorials & Resources
[url]http://www.macromedia.com/support/search/[/url] - Macromedia (MM) Technotes
==================
"Polly Anna 22" <webforumsuser@macromedia.com> wrote in message
news:ds37pu$bpr$1@forums.macromedia.com...> Hi Murray,
>
> I just can't tell you how grateful I am for your help and also for the CSS
> code you gave me. I have never used the statement
>
> clear:left
>
> and I will definitely have to have a play to find out why all these
> statements
> work together, using your explanations.
>
> So thank you very very much.
>
> Kind regards,
>
> Polly Anna
>
>
>
Murray *TMM* Guest
Reply With QuoteSimilar Questions and Discussions
Posting Permissions
- You may not post new threads
- You may post replies
- You may not post attachments
- You may not edit your posts
