Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    May 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    footer repeats 1 time up & down

    Hello guys,

    I have not much experience with html and css, but i tried to code my PSD template into an HTML.

    mrniles.perdes.nl

    Now as you can see I have a small header on the top with a height of 29 px.

    It repeats 1 time in the top (you can see it because it duplicates), and also 1 time in the bottom. (because the shadow stops)

    Also, when i hover over the menu buttons, you'll see it flashing. Do i need to preload the images or something?

    I'd really hope you guys could help me out!

    Thanks

    HTML:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <link rel="stylesheet" type="text/css" href="style.css"/>
    </head>
    <body>
    
    <div id="page-container">
    
      <div id="right"></div>
    
        <div id="left"></div>
        
    	<div id="header">
        <div id="leftheader"></div>
        <div id="rightheader"></div>
        <div id="topheader"></div>
        <div id="topheader"></div>
        <div id="socialleft"></div>
        <div id="youtube"></div>
        <div id="twitter"></div>
        <div id="facebook"></div>
        <div id="socialright"></div>
        <div id="logo"></div>
        <div id="picture"></div>
        <div id="home"></div>
        <div id="news"></div>
        <div id="media"></div>
        <div id="calender"></div>
        <div id="contact"></div>
        <div id="downheader"></div>
        
        
    
        
        </div>
        
    	
    	<div id="leftcontent">
       
        <div id="latestnews"></div> 
        <div id="latestnewscontent"></div>
    
    	
        </div>
        
        
    	
    	<div id="rightcontent">
        
        <div id="lijn"></div>
        <div id="events"></div>
        <div id="eventscontent"></div> 
        <div id="twitterf"></div>
        <div id="twitterfcontent"></div>
          
        </div>
     
    	
    	<div id="footer"></div>
        
      
    
    </div>
    
    
    </body>
    </html>
    CSS:
    Code:
    @charset "utf-8";
    /* CSS Document */
    html, body {
    	background:url(images/GrungeTexture-2.jpg);
    	margin: 0;
    	padding: 0;
    }
    
    #page-container {
    	margin:auto;
    	width:1200px;
    	height:auto;
    	
    }
    
    
    #left{
    	
    	background: url(images/website6goedD_01.png);
    	width:178px;
    	height:1370px;
    	float:left;
    }
    
    
    
    #header{
    	
    	
    	width:844px;
    	height:568px;
    	margin:auto;
    }
    
    #right{
    	background: url(images/website6goedD_05.png);
    	width: 178px;
    	height: 1370px;
    	float: right;
    	
    }
    
    
    
    #leftcontent{
    	
    
    	width:517px;
    	height:691px;
    	float:left;
    	
    }
    
    #rightcontent{
    	
    
    	width:327px;
    	height:691px;
    	float:left;
    	
    }
    
    #footer{
    	
    	
    	background:url(images/website6goedD_27.jpg);
    	width:844px;
    	height:111px;
    	float:left
    }
    
    #latestnews{
    	background: url(images/website6goedD_20.jpg);
    	width: 517px;
    	height: 86px;
    	
    }
    
    #latestnewscontent{
    	
    	background:url(images/website6goedD_23.jpg);
    	width: 517px;
    	height:605px;
    	float:right;
    	
    
    	
    }
    
    #events{
    	background: url(images/website6goedD_22.jpg);
    	width: 295px;
    	height: 86px;
    	float:right;
    	
    }
    
    #eventscontent{
    	
    	background:url(images/website6goedD_24.jpg);
    	width: 295px;
    	height:203px;
    	float:right;	
    }
    
    #lijn{
    	
    	background:url(images/website6goedD_21.jpg);
    	width: 32px;
    	height:691px;
    	float:left;	
    }
    
    #twitterf{
    	background: url(images/website6goedD_25.jpg);
    	width: 295px;
    	height: 59px;
    	float:right;
    	
    }
    
    #twitterfcontent{
    	
    	background: url(images/website6goedD_26.jpg);
    	width: 295px;
    	height:343px;
    	float:right;	
    }
    
    #topheader{
    	
    	background:url(images/website6goedD_03.jpg);
    	background-repeat:none;
    	width: 715px;
    	height:29px;
    	float:left;	
    }
    
    #leftheader{
    	
    	background:url(images/website6goedD_02.jpg);
    	width: 59px;
    	height:527px;
    	float:left;	
    }
    #rightheader{
    	
    	background:url(images/website6goedD_04.jpg);
    	width: 70px;
    	height:527px;
    	float:right;	
    }
    #socialleft{
    	
    	background:url(images/website6goedD_06.jpg);
    	width: 214px;
    	height:28px;
    	float:left;	
    }
    #youtube{
    	
    	background:url(images/website6goedD_07.jpg);
    	width: 93px;
    	height:28px;
    	float:left;	
    }
    #youtube:hover {
      background-image:url(images/website6goedD_33.jpg);
    }
    #twitter{
    	
    	background:url(images/website6goedD_08.jpg);
    	width: 114px;
    	height:28px;
    	float:left;	
    }
    #twitter:hover {
      background-image:url(images/website6goedD_34.jpg);
    }
    
    #facebook{
    	
    	background:url(images/website6goedD_09.jpg);
    	width: 118px;
    	height:28px;
    	float:left;	
    }
    #facebook:hover {
      background-image:url(images/website6goedD_35.jpg);
    }
    #socialright{
    	
    	background:url(images/website6goedD_10.jpg);
    	width: 176px;
    	height:28px;
    	float:left;	
    }
    #logo{
    	
    	background:url(images/website6goedD_11.jpg);
    	width: 715px;
    	height:175px;
    	float:left;	
    }
    
    #picture{
    	
    	background:url(images/website6goedD_12.jpg);
    	width: 715px;
    	height:252px;
    	float:left;	
    }
    #home{
    	
    	
    	background:url(images/website6goedD_13.jpg);
    	width: 136px;
    	height:43px;
    	float:left;	
    	
    	
    }
    
    
    
    #news{
    	
    	background:url(images/website6goedD_14.jpg);
    	width: 122px;
    	height:43px;
    	float:left;	
    }
    #news:hover {
      background-image:url(images/website6goedD_29.jpg);
    }
    
    #media{
    	
    	background:url(images/website6goedD_15.jpg);
    	width: 137px;
    	height:43px;
    	float:left;	
    }
    #media:hover {
      background-image:url(images/website6goedD_30.jpg);
    }
    #calender{
    	
    	background:url(images/website6goedD_16.jpg);
    	width: 161px;
    	height:43px;
    	float:left;	
    }
    #calender:hover {
      background-image:url(images/website6goedD_31.jpg);
    }
    #contact{
    	
    	background:url(images/website6goedD_17.jpg);
    	width: 159px;
    	height:43px;
    	float:left;	
    }
    #contact:hover {
      background-image:url(images/website6goedD_32.jpg);
    }
    #downheader{
    	
    	background:url(images/website6goedD_19.jpg);
    	width: 844px;
    	height:41px;
    	float:left;	
    }

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,826 Times in 1,810 Posts
    Hello joep109,
    In the case of #topheader, you cannot re-use an id like that. ID's get used once only - http://www.tizag.com/cssT/cssid.php

    There is also no such thing as a half a pixel so your 14.5px measurement doesn't work.

    ------------------

    Your menu buttons don't flash for me, they just don't load the hovered image at all. For example, the news buttons' hover image is http://mrniles.perdes.nl/images/website6goedD_29.jpg which is just a 404

    Have a look at how to do those buttons using CSS sprites.

    ------------------


    Have a look at the links about validation in my signature line. They can help to catch errors like your id being re-used.


    .
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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