Ul and li div alignment - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:UL Alignment

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. UL Alignment

Description

Ul and li div alignment

Demo Code

ResultView the demo in separate window 


<html>
 <head> 
  <style>
@charset "utf-8";

body {<!--from w  w w.j a va2  s. c  om-->
   margin:0;
   padding:0;
   background-color:Chartreuse;
}

.container {
   width:901px;
   margin:0 auto;
}

.header {
   position:relative;
   height:121px;
   background-color:yellow;
}

.navContainer {
   position:relative;
   height:81px;
   margin:0;
}

.miniNav {
   height:100%;
   position:absolute;
   right:0px;
}

.nav {
   height:100%;
   background-color:blue;
   overfow:hidden;
}

ul.nav {
   list-style:none;
   padding:0px;
   margin:0
}

ul.nav li {
   display:inline;
   padding:0;
   float:left;
}

.content {
   min-height:401px;
   background-color:pink;
}

.footer {
   height:81px;
   background-color:OrangeRed;
}
</style> 
 </head> 
 <body> 
  <div class="container"> 
   <div class="header"> 
    <img src="https://www.java2s.com/style/demo/InternetExplorer.png" width="155" height="110" alt="Big Box Property Preservation"> 
   </div> 
   <div class="navContainer"> 
    <div class="miniNav"> 
     <img src="https://www.java2s.com/style/demo/Firefox.png" width="189" height="44"> 
    </div> 
    <div class="nav"> 
     <ul class="nav"> 
      <li> <a href="URL" alt="HOME">Lore</a> </li> 
      <li> <a href="URL" alt="ABOUT US">Lorem ip</a> </li> 
      <li> <a href="URL" alt="OUR SERVICES">Lorem ipsum </a> </li> 
      <li> <a href="URL" alt="CONTACT US">Lorem ipsu</a> </li> 
     </ul> 
    </div> 
   </div> 
   <div class="content"> 
    <div class="contentBody"> 
    </div> 
    <div class="sidebar1"> 
    </div> 
   </div> 
   <div class="footer"> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials