Your Ad Here

advanced code snippet search

Posted By

indianocean on 06/04/07


Tagged

textmate template background footer


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

basicmagic
awolffing


Template with footer and fixed-position text on footer

 / Published in: HTML
 

Footer contains background image. Text is placed on the footer which will be static in position to the footer when changing browser window size.

The footer itself is static in position, doesn't move when resized. For moving footer use this: http://snipplr.com/view/3073/template-with-footer-fixed-to-viewport-working-in-safari-too/

Expand | Embed | Plain Text 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2.   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3.  
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  5. <head>
  6.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  7.   <title>Lorem ipsum dolor sit amet</title>
  8.  
  9.   <style type="text/css" media="screen">
  10.   * { 
  11.     margin: 0; 
  12.     padding: 0;
  13.   }
  14.   body{
  15.   }
  16.   #container{
  17.     margin-left: auto; 
  18.     margin-right: auto; 
  19.     width: 400px;
  20.   }
  21.   #footer{
  22.     margin-top: 350px;
  23.     background: #F7941D url(background2.jpg) repeat-x scroll center top;
  24.     height: 198px;
  25.   }
  26.   #infooter{
  27.     width: 600px;
  28.     color: green;
  29.     margin:0pt auto;
  30.   }
  31.   </style>
  32.  
  33. </head>
  34. <body>
  35.   <div id="container">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
  36. <div id="footer">
  37.   <div id="infooter">I do not move on the background pic when scrolling</div>
  38. </div>
  39. </body>
  40. </html>

Report this snippet  

You need to login to post a comment.