Pushing body div behind header and navigation - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Header

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Header

Description

Pushing body div behind header and navigation

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
body {<!-- w w  w. j av a2 s. c o m-->
   background-color: #999;
   margin: 0;
   padding: 0;
}
#wrapper {
   margin: 0;
   padding: 0;
}
#header-wrapper {
   margin: 0 auto;
   background-color: rgba(255, 0, 255, 0.30);
   height: 100px;
   background-image: url(https://www.java2s.com/style/demo/Opera.png);
   background-repeat: repeat-x;
   box-shadow: 0 1px 3px #000;
   position: fixed;
   width: 100%;
   top: 0;
   z-index: 10;
}
#header-main {
   text-align: center;
   width: 50%;
   margin: 0 auto;
   height: 100%;
   background-image: url(https://www.java2s.com/style/demo/Opera.png);
   background-size: 100% 100%;
}
#header-main h1 {
   position: relative;
   top: 15%;
   margin: 0;
}
#navigation-wrapper {
   width: 100%;
   position: fixed;
   top: 100px;
   z-index: 10;
}
#body-wrapper {
   margin: 0 auto;
   min-height: 500px;
   width: 75%;
   box-shadow: 0 0 15px 2px #000;
   border-radius: 20px;
   margin-top: 25px;
}
#navigation-main {
   width: 100%;
   margin: 0 auto;
   text-align: center;
   position: absolute;
   background-color: rgba(255, 0, 255, 0.30);
   box-shadow: 0 1px 3px #000;
   z-index: 1000;
}
.nagivation-ul {
   position: relative;
}
ul {
   list-style: none;
   padding: 0;
   margin: 0;
   left: 50%;
   position: relative;
   float: left;
}
ul li {
   display: block;
   position: relative;
   float: left;
   right: 50%;
}
li ul {
   display: none;
}
ul li a {
   box-shadow: 0 0px 3px #000 inset;
   display: block;
   padding: 1em;
   text-decoration: none;
   white-space: nowrap;
   color: #000;
}
ul li a:hover {
   background-color: #999;
}
li:hover > ul {
   display: block;
   position: absolute;
   z-index: 10;
}
li:hover li {
   float: none;
}
li:hover a {
   background-color: #B86CB8;
}
li:hover li a:hover {
   background-color: #666;
}
li ul li {
   border-top: 0;
}
ul ul ul {
   left: 100%;
   top: 0;
}
ul:before,
ul:after {
   content: " ";
   display: table;
   clear: both;
}


      </style> 
 </head> 
 <body> 
  <div id="wrapper"> 
   <div id="header-wrapper"> 
    <div id="header-main"> 
     <!--<h1>Welcome,<br/>This is for you, &hearts;</h1>--> 
     <h1> Hello, <br> Banner here </h1> 
    </div> 
   </div> 
   <div id="navigation-wrapper"> 
    <div id="navigation-main"> 
     <ul class="nagivation-ul"> 
      <li> <a href="#">Home</a> </li> 
      <li> <a href="#">Link 1</a> 
       <ul> 
        <li> <a href="#">Sub 1</a> </li> 
        <li> <a href="#">Sub 2</a> </li> 
       </ul> </li> 
      <li> <a href="#">Link 2</a> </li> 
      <li> <a href="#">Lnk 3</a> </li> 
      <li> <a href="#">Link 4</a> </li> 
      <li> <a href="#">Link 5</a> </li> 
     </ul> 
    </div> 
    <div style="clear:both;"></div> 
   </div> 
   <div id="body-wrapper"> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials