Hoi wimmos,
Gelukkig is het geen model met een frameset: het zijn allemaal echte pagina's waar het <iframe> in zit.
De pagina's zijn verder helemaal hetzelfde.
Maar dan ... is het helemaal niet nodig om een los <iframe> met de inhoud op elke pagina te zetten.
Dan kan die inhoud er ook rechtstreeks in!
Als je dat doet, ben je (a) van het hoogteprobleem af, en (b) krijg je snellere pagina's (want er hoeft geen afzonderlijke iframe-pagina meer gedownload te worden; waar ook nog overbodige ballast aan <head> en andere dingen in zit).
Om de opmaak van de inhoud in orde te krijgen, hoef je alleen maar die cel met de inhoud een
id="content" te geven:
HTML:
<td id="content" height="345" colspan="8" align="center" valign="top" bgcolor="#85AEAE">
<!-- voorheen het iframe -->
... de inhoud van de pagina
Dan kan de rest makkelijk met wat css geregeld worden:
Code:
#content {
padding: 20px 70px;
}
#content h1 {
text-align: left;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 1em;
}
#content p {
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: .8em;
}
.textAlignLeft {
text-align: left;
}
Overige puntjes
- De pagina's horen te beginnen met een Doctype, dan kan met name Internet Explorer zich niet verslikken.
- Als je ook de cel met het linkermenu even een ID meegeeft, kan dat op elke pagina mooi op dezelfde plaats bovenaan komen te staan.
- Verder zou ik adviseren om veel meer met css te gaan doen.
Nu staan er bv. hele rijen met identieke stijl-regels binnen de html:
HTML:
<tr align="center" valign="middle" bgcolor="#336666">
<td width="85" height="15" bgcolor="#275050"><span class="style48"><a href="index.html">
Home</a></span></td>
<td width="85" height="15" bgcolor="#275050"><span class="style48"><a href="historiek.html">
Historiek</a></span></td>
<td width="85" height="15" bgcolor="#275050"><span class="style48"><a href="praktische info.html">
Praktische info</a> </span></td>
<td width="85" height="15" bgcolor="#275050"><span class="style48"><a href="geneesheren.html">
Geneesheren</a></span></td>
<td width="85" height="15" bgcolor="#275050"><span class="style48"><a href="raadpleging.html">
Raadpleging</a></span></td>
<td width="85" height="15" bgcolor="#275050"><span class="style48"><a href="onderzoek.html">
Onderzoek</a></span></td>
<td width="85" height="15" bgcolor="#275050"><span class="style48"><a href="behandeling.html">
Behandeling</a></span></td>
<td width="85" height="15" bgcolor="#275050"><span class="style48"><a href="patiënten.html">
Patiënten</a></span></td>
<td width="85" height="15" bgcolor="#275050"><span class="style48"><a href="bezoekers.html">
Bezoekers</a></span></td>
<td width="85" height="15" bgcolor="#275050"><span class="style48"><a href="vorming.html">
Vorming</a></span></td>
</tr>
Doe je het zo:
HTML:
<tr id="topmenu">
<td><a href="index.html">Home</a></td>
<td><a href="historiek.html">Historiek</a></td>
<td><a href="praktische info.html">Praktische info</a></td>
<td><a href="geneesheren.html">Geneesheren</a></td>
<td><a href="raadpleging.html">Raadpleging</a></td>
<td><a href="onderzoek.html">Onderzoek</a></td>
<td><a href="behandeling.html">Behandeling</a></td>
<td><a href="patiënten.html">Patiënten</a></td>
<td><a href="bezoekers.html">Bezoekers</a></td>
<td><a href="vorming.html">Vorming</a></td>
</tr>
... dan kan je met aan paar regels css volstaan om alles mooi te krijgen:
Code:
#topmenu { text-align:center; vertical-align: middle; background: #336666; }
#topmenu td { width: 85px; height:15px; background: #275050; }
#topmenu a { color: #FFFFFF; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 9px; }
Het grote voordeel hiervan is niet alleen een prettige opruiming in de html-code, maar ook (als je alle css in een extern stylesheet zet) dat alle pagina's er exact hetzelfde uit komen te zien zonder dat je je daar zorgen over hoeft te maken. En het scheelt ook weer downloadtijd.
Tenslotte zou ik zeker het letterformaat een paar tikken groter zetten, dan zijn de pagina's voor een breed publiek (ouderen!) toegankelijk. En niet in de vaste
px-eenheid, maar in
em's, dan kan de bezoeker ook in Internet Explorer het formaat naar behoefte aanpassen.
... en het allermooiste zou zijn, als ook de tabellen voor de opmaak omgezet worden in een volledige css-opmaak! (
zie bv. hier)
Met vriendelijke groet,
CSShunter
