Jump to content

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


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 post
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 post
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 post
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...