Logo on left or right inside header tag - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Header

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

Description

Logo on left or right inside header tag

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 {<!--from  ww  w .j a v  a 2  s. co  m-->
   margin: 0 ;
   background: darkgrey;
   font-family: arial;
}
header {
   width: 100%;
   height: 50px;
   background: transparent;
}
h1.logo {
   text-align:center;
}
.img-responsive{
   display:block;
   margin:0 auto;
   width:100%;
   height:auto;
}
#tabs {
   overflow: hidden;
   width: 100%;
   margin: 0;
   padding: 0;
   list-style: none;
}
#content {
   background: #fff;
   padding: 2em;
   height: 520px;
   position: relative;
   z-index: 2;
   border-radius: 0 5px 5px 5px;
   box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5);
}
#tab2 {
   position: relative;
}
footer {
   display: inline-block;
   text-align: left;
}
footer ul {
   list-style-type: none;
   text-align: center;
   float: left;
}
footer li {
   display: inline;
}
footer a:link {
   text-decoration: none;
}
footer p {
   float: right;
}
table {
   border: solid darkgrey thin;
   position: relative;
   z-index: 2;
}


      </style> 
 </head> 
 <body> 
  <header> 
   <h1 class="logo"> <img class="img-responsive" src="https://www.java2s.com/style/demo/Firefox.png" alt="Kieron's Logo" title="Logo"> </h1> 
  </header> 
  <ul id="tabs"> 
   <li> <a href="index.html" title="tab1">Home</a> </li> 
   <li> <a href="about.html" title="tab2">About</a> </li> 
   <li> <a href="portfolio.html" title="tab3">Portfolio</a> </li> 
   <li> <a href="blog.html" title="tab4">Blog</a> </li> 
  </ul> 
  <div id="content"> 
  </div> 
  <footer> 
   <div id="tab3"> 
    <table border="0" width:100height="0px"> 
     <tbody> 
      <tr> 
       <td> <a href="index.html"> <img src="https://www.java2s.com/style/demo/Safari.png"> </a> </td> 
       <td> <a href="index.html">Home | </a> <a href="about.html">About | </a> <a href="portfolio.html">Portfolio | </a> <a href="blog.html">Blog</a> </td> 
       <td align="right"> <small>Copyright 2016 test ttest test</small> </td> 
      </tr> 
     </tbody> 
    </table> 
   </div> 
  </footer> 
 </body>
</html>

Related Tutorials