By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,723 Members | 1,665 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,723 IT Pros & Developers. It's quick & easy.

100% header and 100%footer image

P: 8
Looked almost ok in my editor but not so good in fire fox. I was going for a layout that was elastic some what. A header with one image repeating 100%, an there image slightly to the left also in the header, a container a 20% wide box for a list, two 80% wide boxes for content, a footer with the same image set up to end it. It was looking almost there for white but the footer image could now
be viewed.
?=

Expand|Select|Wrap|Line Numbers
  1.  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2.  
  3. <html>
  4. <head><title>?????</title>
  5. <style type="text/css">
  6.  
  7.  
  8.  
  9. /*------------------pic------width:11px height:257px-------*/
  10.  
  11. body { 
  12.     font: Tahoma;
  13.     color: #999999;
  14.     background-color: #626262; 
  15.     margin: 0px; 
  16.     padding: 0px;
  17.     background-image: url(ffbgtoprepeat.png);
  18.   background-repeat: repeat-x;
  19.     }
  20.  
  21.  
  22.  
  23.  
  24. /* ----- LAYOUT ------------------------------------------------------------------------------------------------------ */
  25. #Container { 
  26.     background: url(bg_main.gif) repeat-y; 
  27.     width: 100%;
  28.     margin-top: 0px;
  29.     padding-top: 0px;
  30.     }    
  31.      /*------------------pic------width:660px height:257px the pic is 1px higher than the repeated image-------*/
  32. #header 
  33.      {padding: 0px;
  34.       margin: 0px; 
  35.             background: url(ffbgtopmain.png) no-repeat right top;
  36.             clear:both;width:660px%;height:258px;
  37.  
  38.  
  39.             }
  40.  
  41.  
  42. #Welcome        
  43.             {margin-left:17.%;
  44.             background: url(date2.png) no-repeat left top; 
  45.             width:80%;
  46.             height:200px;
  47.             border:1px solid #000000;position: justify;
  48.  
  49.             }
  50.  
  51. #News      
  52.      {margin-left:17.%;
  53.             background: url(date2.png) no-repeat left top; 
  54.             width:80%;
  55.             height:200px;
  56.             border:1px solid #000000;position: justify;
  57.             }
  58.  
  59.  
  60. #Linklist    
  61.      {
  62.     marging-left:18%
  63.     width: 200px;height: 400px;
  64.     font: 10px Tahoma; 
  65.     position: absolute;
  66.     top: 258px;
  67.     right: 819px;
  68.   border:1px solid #000000;}
  69.  
  70.     }
  71.     /*------------------pic------width:18px height:110px-------*/
  72. #Footer                     
  73.   {
  74.   background-image: url(ffbgtoprepeat.png);
  75.   background-repeat: repeat-x;
  76.     border:1px solid #000000;position:relative;}
  77.         /*------------------pic------width:660px height:110px-------*/
  78.  
  79. /*---not used---*/#Footerimage
  80.                         {
  81.             background: url(ffbottomrepeat.png) no-repeat right bottom;
  82.             width:100%;
  83.             height: 110px;}                                                                  
  84. </style>
  85.  
  86. </head>
  87. <body>
  88.  
  89. <div id="Container">
  90. <div id="header">
  91. <div id="Breadcrumbs"></div></div>
  92.  
  93.  
  94.  
  95. <div id="Welcome">Welcome</div>
  96.  
  97. <div id="News">News</div>
  98.  
  99. <div id="Linklist"> Linklist</div>
  100. <div id="Footer">Footer</div>
  101.  
  102.  
  103. </div>
  104.  
  105.  
  106. </body>
  107. </html>
  108.  
Feb 8 '08 #1
Share this Question
Share on Google+
2 Replies


P: 8
Never mind can the 1st mode delete this.(=
Feb 8 '08 #2

drhowarddrfine
Expert 5K+
P: 7,435
Your doctype is incomplete and IE is in quirks mode.
Feb 8 '08 #3

Post your reply

Sign in to post your reply or Sign up for a free account.