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] Link to comment https://forums.phpfreaks.com/topic/116364-menu-wont-align-properly/ 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. Link to comment https://forums.phpfreaks.com/topic/116364-menu-wont-align-properly/#findComment-598589 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 Link to comment https://forums.phpfreaks.com/topic/116364-menu-wont-align-properly/#findComment-598985 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. Link to comment https://forums.phpfreaks.com/topic/116364-menu-wont-align-properly/#findComment-599052 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. Link to comment https://forums.phpfreaks.com/topic/116364-menu-wont-align-properly/#findComment-599235 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. Link to comment https://forums.phpfreaks.com/topic/116364-menu-wont-align-properly/#findComment-599241 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 Link to comment https://forums.phpfreaks.com/topic/116364-menu-wont-align-properly/#findComment-599250 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.