...

View Full Version : footer repeats 1 time up & down



joep109
05-18-2012, 07:50 PM
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:


<!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:

@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;
}

Excavator
05-19-2012, 03:50 PM
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 (http://nopeople.com/CSS%20tips/CSS_rollover/index.html).

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


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


.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum