Background-repeat problem...

**bobicool** · 06-24-2009, 08:49 AM

I have littles problems with my background...

Image of the disaster!

Ok, here is the html code:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Teen Tech Podcast, everything tech related</title>
		<link rel=stylesheet href="style.css" type="text/css" media="all">
	</head>
	<body>
		<div>
		    <div id="header">
		</div>
		    <div id="menulinks">
	    </div>
		    <div id="page_top">
		</div>
		    <div id="page_container">
		    	<div id="mainarea">
		</div>
		        <div id="contentarea">
		        	<p> hello  hello  hello  hello  hello  hello  hello  hello  hello hello hello hello hello hello hello hello hello hello hello hello  hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello  hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello</p>
		</div>
		</div>  	
		     <div id="sidebar">
		     	</div>
		     	
		    <div id="footer">
		    	<p>Créer et coder par: Raphaël Doré, tout droits réservé</p>
		</div>
		</div>
	</body>
</html>

and here is the css:

Code:

body
{
	background-color: #3386b6;
	margin:0px;
	padding:0px;
	text-align:center;
	font-family: Arial, sans-serif, "times new roman";
	font-size: 12px;
	color:ffffff;
}
#page_top
{
	width:960px;
	height:87px;
	margin:auto;
	margin-top:20px;
	padding:0px;
	background-image: url(images/page_top.png);
}
#page_container
{
	width:960px;
	height:69px;
	margin:auto;
	background-image: url(images/page_container.png);
	background-repeat: repeat-y;
}
#header
{
	width: 960px;
	height: 104px;
	background-image: url(images/header.png);
	margin:auto;
	padding:auto;
	clear:both;
}
#menulinks
{
	width:960px;
	height:72px;
	background-image: url(images/menulinks.png);
	clear:both;
	margin:auto;
}
#mainarea
{
    width:960px;
    clear:both;
    padding-top:0px;
}
#contentarea
{
    float:left;
    width:570px;
    padding-left:45px;
    margin-bottom:10px;
	padding-top: 5px;
}
#sidebar 
{
    float:right;
    width:250px;
    padding-right:175px;
}
#footer
{
	width:960px;
	height:111px;
	background-image: url(images/footer.png);
	clear:both;
	margin:auto;
	padding:0px;
}
#footer p 
{
    padding-top:30px;
    color:#FFFFFF;
    padding-left:50px;
    line-height:20px;
}

and for additional use... I have my complete folder available to download...

If someone needs it (cause my website isn't online yet...)
Zip file

Thanks for the help!

**bobicool** · 06-25-2009, 03:37 PM

Someone???

**WebWarrior** · 06-25-2009, 07:24 PM

This is as close to the .PSD file that you provided as possible. I had to change some CSS (remove unnecessary stuff, etc...). Now your page is wrapped inside <div id="wrapper"></div> whose width is set to 960px; I suggest taking this approach in order to avoid giving width to all the other page elements (unless you don't want them to occupy the whole page). The width for header and most other elements is set to auto and you don't need height for header if you have a block level element of considerable size inside it (your logo image). Also, clear: both; property is way overused in your CSS file.
Anyway, the modified files are attached.
Note: Remove .txt extension from both files in order for them to be useful. Naturally you will need to insert them inside you root directory so they can reference images folder.

Hope this helps