psionicsin Posted December 4, 2010 Share Posted December 4, 2010 I have a large graphic as the header of my site, and was wondering how to make it so that the a horizontal navigation menu sits right underneath an element in the graphic, and not at the tail end of the div the graphic is in?Here's the body of what I have. I wanted to place the navigation div between the header and footer div: <body> <div id="header-container"> <header> </header> </div> <div id="nav-container"> <ul id="navMenu> <li></li> </ul> </div> <div id="main-container"> </div> <div id="footer-container"> <footer> <p>© 2003 - <?php echo date('Y');?> ROP</p> </footer> </div></body> Is this the correct way to do this, or should I nest the header and navigation elements together? Link to comment Share on other sites More sharing options...
gar onn Posted December 4, 2010 Share Posted December 4, 2010 you can use relative and absolute positioning in css to put an DIV under a specific element,or you can nest the DIV and add a z-index (I think this is more a CSS problem) Link to comment Share on other sites More sharing options...
psionicsin Posted December 4, 2010 Author Share Posted December 4, 2010 you can use relative and absolute positioning in css to put an DIV under a specific element,or you can nest the DIV and add a z-index (I think this is more a CSS problem)Ahh ok thank you. Link to comment Share on other sites More sharing options...
dsonesuk Posted December 4, 2010 Share Posted December 4, 2010 you should never ever use positioning, unless it is really, I MEAN really necessary.You should try separating your layout into different sections as in header, navigation, left-right side panels, content, footer, usually these are within a outer container called a wrapper, which is used to set the position left, centre right and width of the layout area of the your page.you can then set the areas width, height and add the coding which relate to that section, you then have more control of how your layout should look.<div id="wrapper><div id="header"></div><div id="nav"></div><div id="left"></div><div id="right"></div><div id="content"></div><div id="footer"></div></div> Link to comment Share on other sites More sharing options...
thescientist Posted December 4, 2010 Share Posted December 4, 2010 you can use relative and absolute positioning in css to put an DIV under a specific element,or you can nest the DIV and add a z-index (I think this is more a CSS problem)that's not necessary for almost all situations. In the case when you are just trying to stack layout elements like this:<header><nav><content><footer>just using div's alone will stack in this top-bottom order since that's the default behavior of block level elements. Just make the header div as tall as you need it (i.e. height) and then just have the nav be the next container after that.edit: and as dsonesuk points out, it's also very common to have everything wrapped in a container div. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.