-- 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" wrote in message news:drpvk2$s4r$1@forums.macromedia.com...[quote] > Hi Murray, > >[quote] > >
[/quote] >[quote] > >will actually be placed 200px from the left margin of its container, but > >that margin cannot affect the placement of any other element.[/quote] >[quote] > >Does that make sense?[/quote] > > 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 > >[/quote] [allowsmilie] => 1 [showsignature] => 0 [ipaddress] => [iconid] => 0 [visible] => 1 [attach] => 0 [infraction] => 0 [reportthreadid] => 0 [isusenetpost] => 1 [msgid] => [ref] => [htmlstate] => on_nl2br [postusername] => Murray *TMM* [ip] => forums@HAHAgrea [isdeleted] => 0 [usergroupid] => [membergroupids] => [displaygroupid] => [password] => [passworddate] => [email] => [styleid] => [parentemail] => [homepage] => [icq] => [aim] => [yahoo] => [msn] => [skype] => [showvbcode] => [showbirthday] => [usertitle] => [customtitle] => [joindate] => [daysprune] => [lastvisit] => [lastactivity] => [lastpost] => [lastpostid] => [posts] => [reputation] => [reputationlevelid] => [timezoneoffset] => [pmpopup] => [avatarid] => [avatarrevision] => [profilepicrevision] => [sigpicrevision] => [options] => [akvbghsfs_optionsfield] => [birthday] => [birthday_search] => [maxposts] => [startofweek] => [referrerid] => [languageid] => [emailstamp] => [threadedmode] => [autosubscribe] => [pmtotal] => [pmunread] => [salt] => [ipoints] => [infractions] => [warnings] => [infractiongroupids] => [infractiongroupid] => [adminoptions] => [profilevisits] => [friendcount] => [friendreqcount] => [vmunreadcount] => [vmmoderatedcount] => [socgroupinvitecount] => [socgroupreqcount] => [pcunreadcount] => [pcmoderatedcount] => [gmmoderatedcount] => [assetposthash] => [fbuserid] => [fbjoindate] => [fbname] => [logintype] => [fbaccesstoken] => [newrepcount] => [vbseo_likes_in] => [vbseo_likes_out] => [vbseo_likes_unread] => [temp] => [field1] => [field2] => [field3] => [field4] => [field5] => [subfolders] => [pmfolders] => [buddylist] => [ignorelist] => [signature] => [searchprefs] => [rank] => [icontitle] => [iconpath] => [avatarpath] => [hascustomavatar] => 0 [avatardateline] => [avwidth] => [avheight] => [edit_userid] => [edit_username] => [edit_dateline] => [edit_reason] => [hashistory] => [pagetext_html] => [hasimages] => [signatureparsed] => [sighasimages] => [sigpic] => [sigpicdateline] => [sigpicwidth] => [sigpicheight] => [postcount] => 4 [islastshown] => [isfirstshown] => [attachments] => [allattachments] => ) --> CSS - Margins and absolute positioning don't worktogether - Macromedia Dynamic HTML

CSS - Margins and absolute positioning don't worktogether - Macromedia Dynamic HTML

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: ...

  1. #1

    Default 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

  2. #2

    Default Re: CSS - Margins and absolute positioning don't work together

    > but the margin settings are
    > totally ignored.
    This is how it should be. Margins make little sense on absolutely
    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" <webforumsusermacromedia.com> wrote in message
    news:drnbd4$85i$1forums.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

  3. #3

    Default 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.
    >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


    Polly Anna 22 Guest

  4. #4

    Default 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" <webforumsusermacromedia.com> wrote in message
    news:drpvk2$s4r$1forums.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

  5. #5

    Default 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

  6. #6

    Default 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" <webforumsusermacromedia.com> wrote in message
    news:ds37pu$bpr$1forums.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

Similar Threads

  1. Custom Controls and Absolute Positioning
    By Rick Strahl [MVP] in forum ASP.NET Building Controls
    Replies: 1
    Last Post: December 11th, 09:22 AM
  2. Prob. with Absolute/Relative Positioning of Layers
    By yensid4Him in forum Macromedia Dynamic HTML
    Replies: 0
    Last Post: May 3rd, 06:25 PM
  3. ASP.NET Custom WebControl Absolute Positioning
    By Nick Goloborodko in forum ASP.NET Building Controls
    Replies: 3
    Last Post: February 22nd, 07:21 AM
  4. Absolute positioning resizes incorrectly
    By Mangia in forum ASP.NET Building Controls
    Replies: 0
    Last Post: May 11th, 04:01 AM
  5. I guess my questions is about absolute positioning......
    By chrisdanvers@adobeforums.com in forum Adobe Acrobat Windows
    Replies: 3
    Last Post: April 8th, 08:39 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •