100% header and 100%footer image

darkzone

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

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 
<html>

<head><title>?????</title>

<style type="text/css">
 
/*------------------pic------width:11px height:257px-------*/
 
body { 

    font: Tahoma;

    color: #999999;

    background-color: #626262; 

    margin: 0px; 

    padding: 0px;

    background-image: url(ffbgtoprepeat.png);

  background-repeat: repeat-x;

    }
 
/* ----- LAYOUT ------------------------------------------------------------------------------------------------------ */

#Container { 

    background: url(bg_main.gif) repeat-y; 

    width: 100%;

    margin-top: 0px;

    padding-top: 0px;

    }    

     /*------------------pic------width:660px height:257px the pic is 1px higher than the repeated image-------*/

#header 

     {padding: 0px;

      margin: 0px; 

            background: url(ffbgtopmain.png) no-repeat right top;

            clear:both;width:660px%;height:258px;
 
            }
 
#Welcome        

            {margin-left:17.%;

            background: url(date2.png) no-repeat left top; 

            width:80%;

            height:200px;

            border:1px solid #000000;position: justify;
 
            }
 
#News      

     {margin-left:17.%;

            background: url(date2.png) no-repeat left top; 

            width:80%;

            height:200px;

            border:1px solid #000000;position: justify;

            }
 
#Linklist    

     {

    marging-left:18%

    width: 200px;height: 400px;

    font: 10px Tahoma; 

    position: absolute;

    top: 258px;

    right: 819px;

  border:1px solid #000000;}
 
    }

    /*------------------pic------width:18px height:110px-------*/

#Footer                     

  {

  background-image: url(ffbgtoprepeat.png);

  background-repeat: repeat-x;

    border:1px solid #000000;position:relative;}

        /*------------------pic------width:660px height:110px-------*/
 
/*---not used---*/#Footerimage

                        {

            background: url(ffbottomrepeat.png) no-repeat right bottom;

            width:100%;

            height: 110px;}                                                                  

</style>
 
</head>

<body>
 
<div id="Container">

<div id="header">

<div id="Breadcrumbs"></div></div>
 
<div id="Welcome">Welcome</div>
 
<div id="News">News</div>
 
<div id="Linklist"> Linklist</div>

<div id="Footer">Footer</div>
 
</div>
 
</body>

</html>

darkzone

Never mind can the 1st mode delete this.(=

drhowarddrfine

Your doctype is incomplete and IE is in quirks mode.

100% header and 100%footer image

Post your reply

Similar topics

Question stats

	Ask Question
Home Questions Articles Browse Topics Latest Top Members FAQ