Ok ik heb nu iets maar zit nog altijd met een vraagje.
het ziet eruit zoals het moet. maar in het middne lukt het enkel als'k genoeg tekst in het vakje zet.
Als de tekst nie kleiner is dan de Fc dan krijg'k de volledige afbeelding nog niet te zien
hoe los ik dit op?
Ook iet er iets mis met die header. daar wordt de div breder naarmate ik padding toevoeg, dit kan toch ook niet de bedoeling zijn?
wat als ik nu rond dat geheel een border wil zetten?
http://users.telenet.be/DeTrekBeiren.../untitled.html
de 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=iso-8859-1" />
<title>Untitled Document</title>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="center">
<div id="header"><h1>[slogan]</h1></div>
<div id="middle">
<h1>[Titel]</h1>
<p>"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce vel leo sit amet dui nonummy malesuada. Pellentesque eros. Proin ac dui a sapien tincidunt fermentum. Maecenas porttitor velit eu mauris. Cras urna nisi, vulputate in, porta id, porttitor ac, dolor. Duis venenatis diam congue tortor tempor iaculis. Nam vehicula tincidunt pede. Phasellus commodo, ante sed bibendum hendrerit, ante diam venenatis turpis, ut auctor nunc urna eu ipsum. Nam massa nunc, pellentesque ut, rutrum sed, vulputate et, metus. Vivamus eget arcu ut libero sodales fringilla. Vestibulum nonummy. Suspendisse pulvinar quam sit amet justo."</p>
<p>"Mauris elementum. Nulla non mi quis arcu laoreet vulputate. Nulla porta consectetuer magna. Sed pulvinar faucibus libero. Sed risus nisi, posuere ut, feugiat non, mattis id, orci. Donec porttitor, diam id vulputate lobortis, est mauris faucibus justo, non lacinia odio metus id ipsum. Donec viverra suscipit justo. Mauris tortor odio, placerat vel, tempor in, molestie non, velit. Nullam vitae felis quis enim semper aliquam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam mollis quam non lectus. Vivamus imperdiet, justo et ultricies porttitor, tortor nisl viverra velit, aliquam cursus eros eros eu enim."</p>
<p>"Aenean pede nibh, tincidunt nec, tristique vel, molestie ac, sapien. Donec pretium, erat in imperdiet lobortis, pede sapien sollicitudin elit, id rutrum elit enim a nulla. Praesent ornare, tortor quis mollis blandit, purus metus aliquam erat, dignissim dapibus mauris lectus ut lectus. Donec purus. Quisque adipiscing metus sit amet arcu. Donec ante. Duis vulputate mi a diam scelerisque auctor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras id magna quis lorem scelerisque egestas. Praesent eget risus. In hac habitasse platea dictumst. Nam non ipsum euismod velit sagittis mollis. Mauris eu odio."</p>
</div>
<div id="footer"><img src="images/footer.gif" alt="footer" border="0" usemap="#Map" />
<map name="Map" id="Map"><area shape="rect" coords="309,66,577,88" href="mailto:patrick.temmerman@famca.be" />
<area shape="rect" coords="621,129,757,158" href="http://www.famca.be" />
<area shape="rect" coords="10,8,150,156" href="http://www.famca.be" />
</map></div>
</div>
</body>
</html>
De CSS
Code:
body {
text-align:center;
}
#center{
width:760px;
margin-left:auto;
margin-right:auto;
}
#header {
float:left;
background-image:url(images/header.gif);
background-repeat:no-repeat;
width:760px;
height:148px;
text-align:justify;
padding-left:175px;
padding-right:-175px;
}
#header h1 {
font-family:"Courier New", Courier, monospace;
font-size:36px;
font-weight:bold;
color:#006633;
padding-top:45px;
}
#middle {
background-image:url(images/center.jpg);
background-position:bottom;
background-repeat:no-repeat;
text-align:justify;
padding-left:25px;
padding-right:25px;
}
#middle h1 {
font-family:"Courier New", Courier, monospace;
font-size:18px;
font-weight:bold;
color:#006633;
}
#middle p {
font-family:"Courier New", Courier, monospace;
font-size:12px;
font-weight:bold;
color:#006633;
}
#footer {
margin:0px;
padding:0px;
}