Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4

Thread: CSS Positioning

  1. #1
    New Coder
    Join Date
    May 2004
    Posts
    36
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS Positioning

    I have been reading about CSS positioning and such so I though it I would give it a try. And I was doing fine, until this came up. I have no idea why the navigation bar is above when I think I coded it to be below.

    HTML Code
    Code:
    <html>
    <head>
    <title>Subliminal Prophet</title>
    <link href="style.css" rel="stylesheet" type="text/css">
    </head>
    
    <body>
    
    <div id="header"><img src="images/test.gif" height="100" width="500"></div>
    <div id="nav">Hello</div>
    
    
    </body>
    </html>
    CSS Code
    Code:
    html, body { background-color: #FFFFFF; color: #000000; margin-left: 0; margin-top: 0; }
    
    #header{ position: absolute; top: 0px left: 0px; background-color: #CCCCCC; color: #000000; text-align: left; width: 100% }
    #nav { position: absolute; top: 100px left: 0px; background-color: #336699; color: #FFFFFF; text-align: center; width: 100% }

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    well its doing what its supposed to, once u use absolute positioning, it takes things out of "flow" so they ignore each other, if you just put the nav div above the header div without using css positioning then the nav would appear above the header without any overlapping

  • #3
    Senior Coder JamieR's Avatar
    Join Date
    Oct 2004
    Location
    United Kingdom
    Posts
    3,161
    Thanks
    0
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by _Aerospace_Eng_
    well its doing what its supposed to, once u use absolute positioning, it takes things out of "flow" so they ignore each other, if you just put the nav div above the header div without using css positioning then the nav would appear above the header without any overlapping
    I made the same mistake recently. I had to bomb all the css and totally re design the site

  • #4
    New Coder
    Join Date
    May 2004
    Posts
    36
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ahh, thank you. I took the "absolute" out of both of them and now it works like a charm.


  •  

    Posting Permissions

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