garry Posted July 24, 2008 Share Posted July 24, 2008 The picture attached shows the problem I've got. Basically, I want the menu to be at the bottom of the header div but for some reason, it thinks that the top is the bottom. I've specified a height for the header div and can't work out why this is happening. Here's the code: <html> <!-- the css --> <style type="text/css"> body { background-color: #4d9bd5; font-family:'lucida grande',verdana,helvetica,arial,sans-serif; font-size: 90%; } #container { width: 820px; margin: 0 auto; height: auto; background-color: #FFFFFF; } #header { height: 200px; position: relative; background-color: #CCCCCC; } #menu { position: relative; height: 26px; bottom: 0px; } #menu ul {margin:0 auto; padding:0; list-style:none; display:table; white-space:nowrap; list-style:none; height:2em; position:relative; font-size:0.9em;} #menu li {display:table-cell; margin:0; padding:0;} #menu li a {display:block; float:left; height:2em; line-height:2em; color:#333; text-decoration:none; font-family:arial, verdana, sans-serif; font-weight:bold; text-align:center; padding:0 0 0 12px; cursor:pointer; background:url('menu/0a.gif') no-repeat;} #menu li a b {float:left; display:block; padding:0 12px 0 0; background:url(menu/0b.gif) no-repeat right top;} #menu li.current a {color:#000; background:url(menu/2a.gif) no-repeat;} #menu li.current a b {background:url(menu/2b.gif) no-repeat right top;} #menu li a:hover {color:#000; background: url(menu/1a.gif) no-repeat;} #menu li a:hover b {background:url(menu/1b.gif) no-repeat right top;} #menu li.current a:hover {color:#000; background: url(menu/2a.gif) no-repeat; cursor:default;} #menu li.current a:hover b {background:url(menu/2b.gif) no-repeat right top;} </style> <!-- The HTML --> <div id="container"> <div id="header"> <div id="menu"> <ul> <li class="current"><a href="#nogo"><b>Home</b></a></li> <li><a href="#nogo"><b>About</b></a></li> <li><a href="#nogo"><b>Page 1</b></a></li> <li><a href="#nogo"><b>Page 2</b></a></li> <li><a href="#nogo"><b>Contact</b></a></li> </ul> </div> </div> </div> </html> If anyone could help i'd greatly appreciate it. [attachment deleted by admin] Quote Link to comment Share on other sites More sharing options...
haku Posted July 24, 2008 Share Posted July 24, 2008 You haven't got a head or a body in your document, just html tags. That's basic HTML 101, first day first lesson. Quote Link to comment Share on other sites More sharing options...
garry Posted July 24, 2008 Author Share Posted July 24, 2008 Ah, i've just given you snippets, the other stuff is far too long and not relevant to my problem. Of course i know how to do basic html Quote Link to comment Share on other sites More sharing options...
haku Posted July 24, 2008 Share Posted July 24, 2008 Change the position on the menu from relative to absolute. Quote Link to comment Share on other sites More sharing options...
garry Posted July 25, 2008 Author Share Posted July 25, 2008 Ah that works, thank you! I was wondering if you could explain why it worked. I was under the impression that position absolute always worked out the positioning from the very top left hand corner of the page and was to be avoided where possible as bad coding practice. Quote Link to comment Share on other sites More sharing options...
haku Posted July 25, 2008 Share Posted July 25, 2008 You are almost right. That is how absolute positioning works usually. But if you set position:relative on an element, and set absolute positioning on a child of that element, then the child will be positioned absolutely relative to the parent element. You had the header position set to relative, so when you set position: absolute and bottom: 0 to the menu, it was put at the bottom of the header div. Absolute positioning often isn't a great method honestly, though it does have it's time and place. I don't know if this is that time and place - I haven't seen your whole page/code. But it solves the problem you were having right now. Quote Link to comment Share on other sites More sharing options...
garry Posted July 25, 2008 Author Share Posted July 25, 2008 no worries, thanks a lot for your help Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.