Vertical align with logo img inside navigation unordered list - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Nav bar image

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Nav bar image

Description

Vertical align with logo img inside navigation unordered list

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>* {
   color:Chartreuse;
   font:13px "Lucida Sans Unicode","Bitstream Vera Sans","Trebuchet Unicode MS","Lucida Grande",Verdana,Helvetica,sans-serif;
   margin-left:auto;
   margin-right:auto;
   width:1001px;
}

.subnav {<!--from  w  ww .j a  v a 2 s.com-->
   background:url('https://www.java2s.com/style/demo/Google-Chrome.png') no-repeat scroll right top transparent;
   float:left;
   height:91px;
   list-style-type:none;
   margin:0;
   padding:0;
   vertical-align:bottom;
}

.subnav a {
   color:yellow;
   display:block;
   margin-left:11px;
   margin-right:11px;
   padding:4px 6px;
   text-decoration:none;
}

.subnav li a:hover {
   background:none repeat scroll 0 0 orange;
   color:blue;
}

nav {
   border-bottom:4px solid pink;
   border-top:4px solid OrangeRed;
   height:91px;
   margin-bottom:21px;
   margin-top:26px;
   padding:6px 0 0;
   width:100%;
}

.navigation {
   margin:0;
   padding:0;
   width:1251px;
}

.subnav li {
   text-align:right;
   width:134px;
}

header {
   margin-top:11px;
   position:relative;
   width:100%;
}

header img {
   display:block;
}

.subnav li {
   display:block;
   margin-left:0;
   padding-left:0;
}

#logo {
   background:url('https://www.java2s.com/style/demo/Google-Chrome.png') no-repeat scroll right top transparent;
   float:left;
   height:91px;
   list-style:none outside none;
   margin:0;
   width:301px;
}

#logo img {
   width:301px;
}
</style> 
 </head> 
 <body> 
  <header> 
   <nav> 
    <ul class="navigation"> 
     <ul id="logo"> 
      <li> <a href="index.htm"> <img src="https://www.java2s.com/style/demo/Firefox.png" alt="roundhaus logo"> </a> </li> 
     </ul> 
     <ul class="subnav"> 
      <li> <a href="index.htm">Lore</a> </li> 
     </ul> 
     <ul class="subnav"> 
      <li> <a href="reclaimedwood.htm">Lorem ipsum do</a> </li> 
      <li> <a href="design.htm">Lorem </a> </li> 
     </ul> 
     <ul class="subnav"> 
      <li> <a href="flooring.htm">Lorem ip</a> </li> 
      <li> <a href="paneling.htm">Lorem ip</a> </li> 
      <li> <a href="beams.htm">Lorem</a> </li> 
     </ul> 
     <ul class="subnav"> 
      <li> <a href="shelving.htm">Lorem ip</a> </li> 
      <li> <a href="mantels.htm">Lorem i</a> </li> 
     </ul> 
     <ul class="subnav"> 
      <li> <a href="news.htm">Lore</a> </li> 
      <li> <a href="how_to.htm">Lorem </a> </li> 
     </ul> 
     <ul class="subnav"> 
      <li> <a href="woodtypes.htm">Lorem ipsu</a> </li> 
      <li> <a href="phrases.htm">Lorem i</a> </li> 
     </ul> 
    </ul> 
   </nav> 
  </header>  
 </body>
</html>

Related Tutorials