Header text/icons positioning and keeping text/icons inside header - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Header

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

Description

Header text/icons positioning and keeping text/icons inside header

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <style>

.main{<!--   w  w w. j a  v a 2s.c o  m-->
   height:60px;
   background-color:#eee;
}
a{
   font-size:20px;
   line-height:1em;
   padding:20px 40px;
   display:inline-block;
   text-decoration:none;
   color:#666;
}
a:hover{
   background-color:#06f;
   color:white;
}
.left{
   float:left;
}
.right{
   float:right
}


      </style> 
 </head> 
 <body translate="no"> 
  <div class="main"> 
   <div class="left"> 
    <a href="#">my</a> 
    <a href="#">my</a> 
    <a href="#">my</a> 
    <a href="#">my</a> 
   </div> 
   <div class="right"> 
    <a href="#">my</a> 
    <a href="#">my</a> 
    <a href="#">my</a> 
    <a href="#">Teste</a> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials