Background color in header and footer - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Footer Color

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Footer Color

Description

Background color in header and footer

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <title>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcor</title> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
img#large {<!--   w ww .j  av  a 2s .  c  o m-->
   width:100%;
}

div#header {
   width:100%;
   margin-left:auto;
   margin-right:auto;
   padding-top:11px;
   padding-bottom:11px;
   background-color:Chartreuse;
}

div#logodiv {
   max-width:729px;
   margin-left:auto;
   margin-right:auto;
}

img#logo {
   max-width:100%;
   height:auto;
   float:left;
}

div#description {
   max-width:729px;
   margin-left:auto;
   margin-right:auto;
}

div#footer {
   width:100%;
   margin-left:auto;
   margin-right:auto;
   padding-top:5px;
   padding-bottom:5px;
   background-color:yellow;
}

div#footertext {
   max-width:729px;
   margin-left:auto;
   margin-right:auto;
}

p#details {
   max-width:729px;
   margin-left:auto;
   margin-right:auto;
   text-align:center;
}

@media screen and (max-width:744px) and (min-width:345px)  {
   div#logodiv {
      max-width:94%;
      margin-left:auto;
      margin-right:auto;
   }

}

@media screen and (max-width:744px) and (min-width:345px)  {
   div#description {
      max-width:94%;
      margin-left:auto;
      margin-right:auto;
   }

}

@media screen and (max-width:744px) and (min-width:345px)  {
   div#footertext {
      max-width:94%;
      margin-left:auto;
      margin-right:auto;
   }

}
</style> 
 </head> 
 <body> 
  <div id="header"> 
   <div id="logodiv"> 
    <img id="logo" border="0" src="https://www.java2s.com/style/demo/Safari.png"> 
    <br style="clear:both"> 
   </div> 
  </div> 
  <div id="description"> 
   <h1 id="subject">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcorper mo</h1> 
   <p id="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcorper molestie lacus sed fermentum. Aliquam erat volutpat. Vestibulum tortor neque, ornare vit</p> 
  </div> 
  <div id="photo"> 
   <img id="large" border="0" src="https://www.java2s.com/style/demo/InternetExplorer.png"> 
  </div> 
  <div id="description"> 
   <p id="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcorper molestie lacus sed fermentum. Aliquam erat volutpat. Vestibulum tortor neque, ornare vitae tempor hendrerit, luctus at neque. P</p> 
  </div> 
  <div id="footer"> 
   <div id="footertext"> 
    <p id="details">Lorem ipsum dolor sit amet, c</p> 
    <p> </p> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials