Click to See Complete Forum and Search --> : Background not showin up


Noodle7
11-14-2006, 08:33 AM
html, body {
height: 100%;
}

html>body #pageholder{
height:auto;
}

body {
padding:0px;
margin:0px;
width:100%;
height:100%;
text-align:center;

}

#pageholder {
width:100%;
text-align:center;
margin: 0px auto 0px auto;
font:11px Arial, Helvetica, sans-serif;
font-weight:bold;
border:4px solid purple;
background-color:#FFFFFF;
height:100%;

}
#headerholder{
width:100%;
text-align:center;
margin: 0px auto 0px auto;
border:1px solid cyan;
font-size:0;
line-height:0;

}
.header_left{
text-align:right;
background:url(images/topgradient.jpg) repeat-x;
height:131px;

}


.header_right{
text-align:left;
background:url(images/topgradient.jpg) repeat-x;
height:131px;

}
.header {
height:131px;
vertical-align:top;
background:url(images/mainheaderbackground.jpg) repeat-x;



}



#logo{
text-align:left;
padding-left:15px;
padding-bottom:12px;
padding-top:16px;
}
#form{
position:absolute;

}
#navbarholder{

background:url(images/images/backgroundnav.jpg) no-repeat;

}
#navbar{
background:url(images/navbar.gif) no-repeat;
height:35px;
text-align:center;
margin: 0px auto 0px auto;
width:760px;




}
a {
text-decoration:underline thick #FFAD3F;
padding-right:30px;


}

#maincontent{
height:440px;
border:1px solid red;
width:760px;
text-align:center;
margin: 0px auto 0px auto;
width:760px;


}

#leftcontent{
width:527px;
float:left;
border:3px solid blue;
text-align:left;




}
.greyfont{
font:11px Arial, Helvetica, sans-serif ;
color: #878787;
}
.dots{
background:url(images/dots.gif);
width:514px;
height:3px;
}
.dotsleft{
background:url(images/dots.gif);
width:193px;
height:3px;
}
.brownfont{
font:11px Arial, Helvetica, sans-serif ;
color:#C77B30;


}

ul{
list-style-type: none;
padding-left:0;
margin-left:0;
}

li{
background:url(images/arrow.gif) no-repeat;
padding-left:10px;




}

#companyleft{
float:left;
width:355px;


}


#companyright{
float:right;
width:172px;

}


#rightcontent{
width:221px;
float:right;
text-align:justify;
border:3px solid pink;

}






#footer{
background:#464440;
text-align:center;
height:100%;
text-align:center;
margin: 0px auto 0px auto;
width:760px;


}
#lefttop{
background:url(images/topleft.jpg) no-repeat;
float:left;
background-color:#FEFEFE;

}

#righttop{
width:132px;



}
#righttop{
background:url(images/righttop.jpg) no-repeat;
float:right;
}


HTML




<div id="pageholder">
<div id="headerholder">
<table align="center">
<tr>
<td class="header_left"><img src="images/leftbackground.jpg"/></td>
<td class="header">
<div style="position:relative" style="height:131px;"><img src="images/logo.jpg" />
<div id="form">

</div>
</div>

</td>
<td class="header_right"><img src="images/rightbackground.jpg"></td>
</tr>
</table>
</div>








<div id="navbarholder">

<div id="navbar"><a href="Home.htm">HOME</a><a href="company">COMPANY PROFILE</a><a href="products">OUR PRODUCTS</a></div>
</div>
<div id="maincontent">
<div id="leftcontent" class="greyfont"><img src="images/Welcome.gif"><br />

<div class="dots"></div>
<div id="companyleft"><img src="images/company profile.gif" /><br />

</div>
<div id="companyright">
<div align="right"> <img src="images/maledr.jpg" /></div>
<div align="right"> <img src="images/femaledr.gif" /></div>
</div>


</div>
<div id="rightcontent">
<img src="images/ourproducts.gif" /><br />
<div class="greyfont">Our products With the development of its product
and service offerings in the healthcare
environment, Nikela’s current products
include:<br /></div>
<div class="brownfont">
<ul>
<li>Interactive Web Application</li>
<div class="dotsleft"></div>
<li>Scheme Reporting</li>
<li>Provider Profiling and Alternative
Reimbursement Models</li>
<li>Data Processing, Compilation
and Warehousing </li>
<li>Network Development and Management </li>
<li>Model Design</li>
</ul>

</div>

</div>
</div>



<div id="footer">&nbsp;</div>
</div>
</div>
</body>
</html>



My background in my header is not working its not stretching across can you help?

Also the pageholder only goes down a half way down the page and I need to to righ tdown to the bottom with no scroll bar ...

Hope I am explaing myself

Can some one help?

Kravvitz
11-14-2006, 03:25 PM
Three things I notice immediately.
1) An element can't have an attribute defined more than once.
<div style="position:relative" style="height:131px;">should be<div style="position:relative;height:131px;">though it's best not to use inline styles.

2) You need to give #pageHolder min-height:100%; instead of height:100%; for browsers other than IE5-6.

3) Why should you avoid using tables for layout? (http://www.dynamicsitesolutions.com/html/tables-for-tabular-data-only/)