Beste,
Ik heb een design aangepast naar dit ( de donkere knoppen zijn de hovers)
http://droogkuis-castermans.be/nieuw/nieuw.jpg
Hoe moet ik dit nu maken adhv DIVS & css code ?
Dit was het vorige design : http://droogkuis-castermans.be/nieuw
en hier de code erbij
Ik heb een design aangepast naar dit ( de donkere knoppen zijn de hovers)
http://droogkuis-castermans.be/nieuw/nieuw.jpg
Hoe moet ik dit nu maken adhv DIVS & css code ?
Dit was het vorige design : http://droogkuis-castermans.be/nieuw
en hier de code erbij
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Droogkuis Castermans - Home</title>
<style type="text/css">
#envelop {
width: 1000px;
margin: 0 auto;
}
#kop img {
border: none;
}
#kop {
line-height: 12px;
}
#inhoud {
background-color: #E1E1E1;
font-family: Verdana, Geneva, sans-serif;
background-image: url(inhoud-index.gif);
padding: 45px;
margin-top:
5px;
}
#voet {
text-align: center;
margin:
2em;
}
.voet-tekst {
background-color: #F4F4F4;
padding: 1em;
border: 1px solid #d3d3d3;
font-family: Arial, Helvetica, sans-serif;
}
ul#menu {
margin: 0;
padding: 0;
list-style-type: none;
background: #e9e9e9;
height: 70px;
}
ul#menu li {
float: left;
width: 160px;
text-align: center;
}
ul#menu li#een {
width: 180px;
}
a#info {
display: inline-block;
width: 93px;
height: 64px;
}
a#diensten {
display: inline-block;
width: 166px;
height: 64px;
}
a#prijslijst {
display: inline-block;
width: 135px;
height: 64px;
}
a#contact {
display: inline-block;
width: 168px;
height: 64px;
}
a#route {
display: inline-block;
width: 132px;
height: 64px;
}
a#promoties {
display: inline-block;
width: 186px;
height: 63px;
}
ul#menu img {
border: 0;
}
#menu a:hover img {
display: none;
}
#menu a#info:hover {
background: url(info-hover.jpg);
}
#menu a#diensten:hover {
background: url(diensten-hover.jpg);
}
#menu a#prijslijst:hover {
background: url(prijslijst-hover.jpg);
}
#menu a#contact:hover {
background: url(contact-hover.jpg);
}
#menu a#route:hover {
background: url(route-hover.jpg);
}
#menu a#promoties:hover {
background: url(promoties-hover.jpg);
}
</style>
</head>
<body>
<div id="envelop">
<div id="kop"><img src="header.gif" width="1001" height="150" alt=""></div>
<ul id="menu">
<li><a href="info.html" title="Meer info" id="info"><img src="info.jpg" alt="Meer info" width="93" height="64"></a></li>
<li><a href="diensten.html" title="Diensten" id="diensten"><img src="diensten.jpg" alt="Diensten" width="166" height="64"></a></li>
<li><a href="prijslijst.html" title="Prijslijst" id="prijslijst"><img src="prijslijst.jpg" alt="Prijslijst" width="135" height="64"></a></li>
<li><a href="contact.html" title="Contact" id="contact"><img src="contact.jpg" alt="Contact" width="168" height="64"></a></li>
<li><a href="route.html" title="Route" id="route"><img src="route.jpg" alt="Route" width="132" height="64"></a></li>
<li><a href="promoties.html" title="Promoties" id="promoties"><img height="63" width="186" src="promoties.jpg"></a></li>
</ul>
<div id="inhoud">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum odio eros, molestie vitae mollis sed, adipiscing et dolor. Nunc eleifend cursus gravida. Nulla facilisi. Nulla vel convallis turpis. Fusce id mi ut leo molestie tincidunt. Aenean vitae feugiat dolor. Nam luctus, libero a consequat scelerisque, urna justo pellentesque nibh, et consectetur tortor nunc malesuada magna. Curabitur laoreet fermentum bibendum. Fusce interdum aliquet odio, facilisis tincidunt quam pretium eu. Nam pretium nunc ut est pharetra a laoreet ipsum varius.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum odio eros, molestie vitae mollis sed, adipiscing et dolor. Nunc eleifend cursus gravida. Nulla facilisi. Nulla vel convallis turpis. Fusce id mi ut leo molestie tincidunt. Aenean vitae feugiat dolor. Nam luctus, libero a consequat scelerisque, urna justo pellentesque nibh, et consectetur tortor nunc malesuada magna. Curabitur laoreet fermentum bibendum. Fusce interdum aliquet odio, facilisis tincidunt quam pretium eu. Nam pretium nunc ut est pharetra a laoreet ipsum varius.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum odio eros, molestie vitae mollis sed, adipiscing et dolor. Nunc eleifend cursus gravida. Nulla facilisi. Nulla vel convallis turpis. Fusce id mi ut leo molestie tincidunt. Aenean vitae feugiat dolor. Nam luctus, libero a consequat scelerisque, urna justo pellentesque nibh, et consectetur tortor nunc malesuada magna. Curabitur laoreet fermentum bibendum. Fusce interdum aliquet odio, facilisis tincidunt quam pretium eu. Nam pretium nunc ut est pharetra a laoreet ipsum varius.</p>
</div>
<div id="voet">
<p><span class='voet-tekst'>Droogkuis Castermans & Jasper Vlayen © 2010</span></p>
</div>
</div>
</body>
</html>
Laatst bewerkt:
