put an image between two UL with absolute positioning - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Image

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

Description

put an image between two UL with absolute positioning

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 {<!--   www.  j  av a 2 s  .co m-->
   background:Chartreuse;
}

#headerbg
 {
   background-color:yellow;
   width:100%;
   height:51px;
   z-index:1001;
   position:fixed;
   top:0;
   left:0;
}

.inner {
   position:relative;
   top:0;
   left:0;
   width:100%;
   height:100%;
}

#header
 {
   width:801px;
   height:100px;
   background:blue;
   position:absolute;
   top:0;
   left:51%;
   margin-left:-401px;
}

#logo
 {
   width:201px;
   height:100px;
   background:url('https://www.java2s.com/style/demo/Google-Chrome.png');
   z-index:2001;
   left:301px;
   top:0;
   position:absolute;
}

#navleft
 {
   position:absolute;
   background:pink;
   width:301px;
   height:100px;
   top:0;
   left:0;
   margin:0;
}

#navleft li
 {
   margin:0;
   padding:0;
   list-style:none;
   position:absolute;
   top:0;
   z-index:2001;
}

#navleft li, #navleft a
 {
   height:51px;
   display:block;
}

#navright
 {
   position:absolute;
   background:OrangeRed;
   width:301px;
   height:100px;
   top:0;
   right:0;
   margin:0;
}

#navright li
 {
   margin:0;
   padding:0;
   list-style:none;
   position:absolute;
   top:0;
   z-index:2001;
}

#navright li, #navright a
 {
   height:51px;
   display:block;
}
</style> 
 </head> 
 <body> 
  <div id="headerbg"> 
   <div class="inner"> 
    <div id="header"> 
     <div class="inner"> 
      <ul id="navleft"> 
       <li id="navhome"> <a href="#top"></a> </li> 
       <li id="navnew"> <a href="#new"></a> </li> 
       <li id="navbrands"> <a href="#brands"></a> </li> 
      </ul> 
      <div id="logo"></div> 
      <ul id="navright"> 
       <li id="navsales"> <a href="#sales"></a> </li> 
       <li id="navlocation"> <a href="#location"></a> </li> 
       <li id="navcontact"> <a href="#contact"></a> </li> 
      </ul> 
     </div> 
    </div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials