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;
}
Before you post, read our: 
