www.webdeveloper.com
Results 1 to 7 of 7

Thread: Background-repeat problem...

  1. #1
    Join Date
    Jun 2009
    Posts
    9

    Exclamation Background-repeat problem...

    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!

  2. #2
    Join Date
    Jun 2009
    Posts
    9
    Someone???

  3. #3
    Join Date
    Jun 2009
    Location
    NY
    Posts
    96
    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
    Attached Files Attached Files
    Last edited by WebWarrior; 06-25-2009 at 07:29 PM.

  4. #4
    Join Date
    Jun 2009
    Location
    NY
    Posts
    96
    One more thing...
    Remove the <br style="clear: both;"> before the footer div you don't need it.

  5. #5
    Join Date
    Jun 2009
    Posts
    9

    Thumbs up

    Thanks man! I'm starting in this domaine so, I appreciate your help

  6. #6
    Join Date
    Jun 2009
    Location
    NY
    Posts
    96
    You are welcome.
    And good luck with your new Website!

  7. #7
    Join Date
    Jun 2009
    Posts
    9
    Thanks!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles