Als je niets invult dan krijgt de pagina, mits die correct is, automatisch de hoogte van de tekst (eigenlijk hetzelfde als auto bedenk ik me net...). Werkt dit niet, dan is de eerstvolgende stap om de pagina door een validator (http://validator.w3.org/) te halen, en indien aanwezig alle fouten eruit halen (fouten in hyperlinks zou je eventueel kunnen negeren, die geven over het algemeen geen renderfouten).
Mocht dit niet helpen, dan neig ik al snel naar een JavaScript oplossing. Maar voordat je daarmee begint, kan het handig zijn om je code (of een link naar de pagina) hier te plaatsen. Soms zijn oplossingen zo simpel dat je er zelf overheen kijkt ;) (en dat is eigen ervaring)
Ik zal mijn HTML & CSS even hierin plaatsen, hoop dat je er iets mee kunt!
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>Brijder-stichting</title>
<link href="opmaak.css" type="text/css" rel="stylesheet" />
</head>
<body id="body">
<div id="omlijning">
<div id="bovenkant"></div>
<div id="omlijning2">
<div id="menu">
<ul id="navigatie">
<li><a href="index.html">Homepage</a></li>
<li><a href="gevaren.html">Gevaren</a></li>
<li><a href="aanpak.html">Aanpak</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<div id="inhoud">
<div id="tekst">
<img id="brijderlogo" src="brijder_logo.jpg" alt="Brijderlogo" align="left"/>
<h1 class="big">Homepage</h1>
<p><b>Te veel drank? Brijder helpt!</b><br />
Welkom op de Website van de Brijderstichting!<br /><br />
Op deze site vindt u informatie over:</p>
<div id="opsomming">
<ul>
<li>De werking van Alcohol</li>
<li>De gevaren van Alcohol in het verkeer</li>
<li>Over Alcohol en opvoeding</li>
<li>Over omgaan met de drinker</li>
</ul>
</div>
<p>Deze website is gemaakt om jongeren en hun ouders te helpen met hun alcoholproblemen.<br />
Hoe we dit zullen doen kun u op de volgende pagina's lezen.</p>
<img class="plaatje" src="Alcohol.jpg" alt="Mooi!" align="right" vspace="5px"/>
</div>
</div>
<div id="zijkant"/>
</div>
<div id="copyright">
Gemaakt door: Stephan Visser en Ruben Appelman V4B
</div>
</div>
</body>
</html>
CSS:
@charset "utf-8";
/* CSS Document */
#body{
padding-bottom: 52px;
background-color:#D4D4D4;
font-family:Tahoma, Arial, Helvetica, sans-serif;
}
#omlijning{
border: 1px solid #000000;
background-color:rgb(79, 149, 219);
width: 800px;
margin-left:auto;
margin-right:auto;
margin-top: 12px;
}
#omlijning2{
background-color:rgb(79, 149, 219);
width:800px;
}
#bovenkant{
background-image: url(Naamloos.bmp);
height:100px;
width: 800px;
background-color:#676767;
}
#menu{
margin-left: -1px;
border-left: 1px solid #000000;
width: 150px;
background-color:rgb(79, 149, 219);
float:left;
}
#zijkant{
border-right: 1px solid #000000;
width: 21px;
background-color:rgb(79, 149, 219);
float: left;
}
#inhoud{
margin-right: -1px;
width: 630px;
background-color:#FFFFFF;
float:left
}
.big{
font-size:36px;
text-align:left;
}
.small{
text-align:right;
font-size:12px;
}
#tekst{
color:#000000;
padding: 10px 10px 10px 10px;
text-align:center;
}
#tekstgevaren{
color:#000000;
padding: 10px 10px 10px 10px;
text-align:left;
}
#tekstverkeer{
color:#000000;
padding: 10px 10px 10px 10px;
text-align:left;
}
#tekstopvoeding{
color:#000000;
padding: 10px 10px 10px 10px;
text-align:left;
}
#tekstaanpak{
color:#000000;
padding: 10px 10px 10px 10px;
text-align:left;
}
#tekstcontact{
color:#000000;
padding: 10px 10px 10px 10px;
text-align:left;
}
#tekstwerking{
color:#000000;
padding: 10px 10px 10px 10px;
text-align:left;
}
#tekstverslaving{
color:#000000;
padding: 10px 10px 10px 10px;
text-align:left;
}
.plaatje{
height: 270px;
width: 240px;
}
.plaatjecontact{
height: 232px;
width: 348px;
}
.plaatjegevaren{
height: 86px;
width: 330px;
}
.plaatjeverkeer{
height: 187px;
width: 405px;
}
.plaatjeaanpak{
height: 268px;
width: 297px;
}
.plaatjewerking{
height: 265px;
width: 470px;
}
#brijderlogo{
padding: 20px 95px 0px 0px;
}
#copyright{
border-left: 1px solid #000000;
border-right: 1px solid #000000;
margin-top:-1px;
text-align:right;
font-size:12px;
height: 22px;
width: 795px;
margin-left: -1px;
float:left;
padding-right: 5px;
background-color:rgb(79, 149, 219);
}
#navigatie li{
margin-left: -27px;
margin-top: 5px;
list-style-type: none;
width: 120px;
text-align:center;
text-decoration:none;
color:#FFFFFF;
}
#navigatie li a{
display: block;
background-color:rgb(79, 149, 219);
border-bottom: 1px solid #131313;
text-decoration: none;
color: #FFFFFF;
}
#navigatie li a:hover{
background-color: #FFFFFF;
color: black;
text-decoration: none;
}
#opsomming{
color:#000000;
padding: 0px 10px 10px 130px;
text-align:left;
}
alvast bedankt! |)