mboehler3 Posted August 25, 2009 Share Posted August 25, 2009 I'm using the 960 Grid System to create my website, but I want to extend the header and footer 100% wide, outside of the 960 system. I'm able to do so with the footer, but the header (which contains a nav menu, using JS) is creating a problem. The problem is that the content in the header must stay within the 960 Grid. So all I need is to create a background that is about 30 pixels tall and 100% wide, and then have my header/navigation menu fall on top of it.After playing around with my code, here is the result I see:So as you can see, the background color is there, but the navmenu breaks beneath it, not on top as I would like.Here is my XHTML: <div class="topnav_bckground"> </div><div id="content-outer"><div class="container_12"> <div class="grid_12"><!-- #include virtual = "/surechoice/new_960_header.asp" --> The navmenu is included in the new_960_header.asp file.And the CSS: .topnav_bckground{background-color:#88ac2e; width:100%; height:40px;}.container_12 .grid_12,.container_16 .grid_16{width:940px} Thank you for your help, Link to comment Share on other sites More sharing options...
Ingolme Posted August 25, 2009 Share Posted August 25, 2009 It looks like if the HTML for the navigation menu was not inside the header. Link to comment Share on other sites More sharing options...
mboehler3 Posted August 25, 2009 Author Share Posted August 25, 2009 It looks like if the HTML for the navigation menu was not inside the header.I made the topnav_bckground a span instead of a div, like so:<span class="topnav_bckground"> <div id="content-outer"><div class="container_12"> <div class="grid_12"><!-- #include virtual = "/surechoice/new_960_header.asp" --></span> And this is what I see: Link to comment Share on other sites More sharing options...
Ingolme Posted August 25, 2009 Share Posted August 25, 2009 A <span> is pointless, because it's not a block, so it won't accept width and height properties.You appear to be missing closing </div> tags for some of your elements.What you have to do is put the content inside the <div> that has the background color.Also, there is never a need for width: 100% because a <div> takes all the horizontal space by default. <div class="topnav_bckground"> <div id="content-outer"> <div class="container_12"> <div class="grid_12"><!-- #include virtual = "/surechoice/new_960_header.asp" --> </div> </div> </div></div> .topnav_bckground { background-color: #88ac2e; height:40px;} Link to comment Share on other sites More sharing options...
mboehler3 Posted August 28, 2009 Author Share Posted August 28, 2009 A <span> is pointless, because it's not a block, so it won't accept width and height properties.You appear to be missing closing </div> tags for some of your elements.What you have to do is put the content inside the <div> that has the background color.Also, there is never a need for width: 100% because a <div> takes all the horizontal space by default.<div class="topnav_bckground"> <div id="content-outer"> <div class="container_12"> <div class="grid_12"><!-- #include virtual = "/surechoice/new_960_header.asp" --> </div> </div> </div></div> .topnav_bckground { background-color: #88ac2e; height:40px;} Thank you for the advice, it led me to a solution! However I now have a new question... Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.