Member Avatar for davecoventry

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
  • 395 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by davecoventry
Member Avatar for mattskills

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;
}
Member Avatar for davecoventry

Great.

That works.

Thanks.

Member Avatar for davecoventry

A problem remains, though.

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

Member Avatar for davecoventry

92c10cccb37dcf196d1c9d5847434c5e

This post has no text-based content.
Member Avatar for mattskills

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.