Jump to content

Creating A 100% Wide Bar Within 960 Grid System...


mboehler3
 Share

Recommended Posts

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:headtop.gifSo 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

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:headtop2.gif

Link to comment
Share on other sites

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

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...