0

Hi,

I have a #header class and a #menu class.

<body> 
<div id="page">
     <header id="masthead">
         <hgroup>
           <h1 class="site-title">
             <a href="#" >Demo</a>
           </h1>
         </hgroup>
         <nav class="site-navigation">
           <h1 class="menu-text">
           </h1>
           <div class="menu-text skip-link">
             <a href="#content">Home</a>
           </div>
         </nav><!-- .site-navigation .main-navigation -->
     </header><!-- #masthead .site-header -->
     <div id="primary" class="content-area">
       &lt;div id="primary" class="content-area"&gt;
       <div id="content" class="site-content" role="main">
         &lt;div id="content" class="site-content" role="main" &gt;
       </div><!-- #content .site-content -->
     </div><!-- #primary .content-area -->
</div>
</body>

CSS here:

#page {
  width: 800px;
  margin: auto;
  overflow: hidden;
  background: #8FCFFF;
}
#masthead{
  margin: auto;
  padding: 5px;
  background-color: #57A8EB;
  border-radius: 8px;
  overflow: auto;
}
.site-navigation {
  padding: 5px;
  background-color: #000;
  width: 100%;
  left: 0px;
  float: left;
}
#primary {
  float:left;
  margin: 1%;
  padding: 5px 1%;
  width:60%;
  min-width:300px;
  background-color: #05609e;
  border-radius: 8px;
  overflow: auto;
}
#content {
  margin: 1% 0;
  padding: 1%;
  background-color: #000099 ;
  border-radius: 8px;
  color: #fff;
}
a{
    color: #fff;
}

This produces the screenshot below: 613f5dc94f64450c42afe87b3c566a57

What I want is for the black menu area (with the 'Home' menu item in it) to extend outside of it's containing div (id "masthead").

eb847bbf2770a423de14cdaeae0b38f2

Can anyone help? I'm having great difficulty.

Cheers,

Dave

2
Contributors
6
Replies
22
Views
3 Years
Discussion Span
Last Post by davecoventry
0

i did this by removing the #masthead attribute from <header> and placing it in a <div> instead , and wraping <div id="masthead"> with <div id="page"> , that way your nav is still wrapped in <head> but isn't contained in #masthead or #page.

HTML

<body>

     <header>
     <div id="page">
     <div id="masthead">
         <hgroup>
           <h1 class="site-title">
             <a href="#" >Demo</a>
           </h1>
         </hgroup>
         </div>
         </div>
         <nav class="site-navigation">
           <h1 class="menu-text">
           </h1>
           <div class="menu-text skip-link">
             <a href="#content">Home</a>
           </div>
         </nav><!-- .site-navigation .main-navigation -->
     </header><!-- #masthead .site-header -->
     <div id="page">
     <div id="primary" class="content-area">
       &lt;div id="primary" class="content-area"&gt;
       <div id="content" class="site-content" role="main">
         &lt;div id="content" class="site-content" role="main" &gt;
       </div><!-- #content .site-content -->
     </div><!-- #primary .content-area -->
</div>
</body>

CSS

#page {
  width: 800px;
  margin: auto;
  overflow: hidden;
  background: #8FCFFF;
}
#masthead{
  margin: auto;
  padding: 5px;
  background-color: #57A8EB;
  border-radius: 8px;

}
.site-navigation {

  background-color: #000;
  width: 100%;
  left: 0px;
  float: left;
}
#primary {
  float:left;
  margin: 1%;
  padding: 5px 1%;
  width:60%;
  min-width:300px;
  background-color: #05609e;
  border-radius: 8px;
  overflow: auto;
}
#content {
  margin: 1% 0;
  padding: 1%;
  background-color: #000099 ;
  border-radius: 8px;
  color: #fff;
}
a{
    color: #fff;
}
0

A problem remains, though.

My Nav bar is rendered with a margin of around 8px on the left and right.

1

html pages have a margin by default , simply add body {margin:0px;} to the top of your css

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.