Oeps, nu ontbreekt nog het stylesheet
www.nderleeuw.nl/testcss/hiskad.css op de server: de pagina kan deze niet vinden (en ik ook niet).
Staat dit bestandje er wel op (in de goede map, met de goede hoofd- en kleine letters)?
Maar in de pagina zoals deze nu is, zit de knoop in het floaten en clearen. Alleen de images hoeven maar gefloat te worden, dan past de tekst zich wel aan.
Het clearen van de images is nodig voor als er twee afbeeldingen rechts (of 2 afbeeldingen aan de linkerkant) vlak onder elkaar moeten komen te staan. Dan is er het risico (afhankelijk van het punt van neerzetten in de html) dat een img naast de vorige komt (al of niet een stukje lager).
Zonder
clear:right (= vrijmaken rechts) komt het tweede rechterplaatje dus links naast het eerste te staan (zo lang de schermbreedte dat toelaat). Dat is voor de float de eerste beschikbare ruimte, en daar drijft de float dan meteen naar toe. Dus rechterplaatjes moeten in hun css de
clear:right meekrijgen als je die allemaal tegen de kantlijn aan wilt hebben.
Voor een afbeelding aan de linkerkant geldt hetzelfde/omgekeerde: dan zou het tweede plaatje er rechts naast komen (op dezelfde of lagere hoogte), als je geen
clear:left aan de linker-images meegeeft.
Met
clear:both duikt een linker plaatje zo nodig zowel onder het linker plaatje erboven als onder het rechter plaatje erboven. Dat kan je doen als je niet wilt dat de teksten tussen de plaatjes in trappetjesvorm gaan verschijnen.
De clears gelden dus alléén voor de plaatjes zelf!
Geef je een <p> (of een ander "block" element dat normaal gesproken de volledige breedte in beslag neemt; een <h2> bijvoorbeeld) een clear mee, dan duikt deze óók onder het gefloate plaatje dat erboven staat. En dat was hier het geval.
Dat de tekst ook nog over het plaatje heen loopt, komt omdat de
.toelichting een
top: -20px; heeft: deze wordt dus omhoog getrokken en gaat over het vorige element heen lopen.
Nu heb je dat optrekken van de toelichtingen gedaan, omdat deze anders te ver onder de bijbehorende <p> zouden komen. Maar dat kan ook anders opgelost worden: geef alle <p>'s geen marge en padding aan de onderkant. En geef de gewone <p>'s een margin aan de bovenkant, maar de toelichtingen géén bovenmarge.
Ook zou ik de voetnoot-cijfertjes in de regels wat padding (opvulling) in plaats van margin (afstand) geven: het optisch effect is hetzelfde, maar de padding hoort bij het element zelf. Daarmee wordt het oppervlak van de link dus groter, en valt deze makkelijker aan te klikken.
- Het effect hiervan kan je zien door even een background:yellow aan de .voetnoot te geven.
Al met al denk ik dat je voor deze pagina genoeg hebt aan de volgende css:
Code:
#tekst {
font-family: "Times New Roman", Times, serif;
}
.img_rechts {
clear: both;
float: right;
margin-bottom: 6px;
margin-left: 6px;
}
.img_links {
clear: both;
float: left;
margin-right: 6px;
margin-bottom: 6px;
}
p {
margin: 1em 0 0 0;
padding: 0;
}
.toelichting {
font-style: italic;
margin: 0 0 0 1.5em;
}
.voetnoot {
vertical-align: baseline;
font-size: 0.8em;
position: relative;
top: -0.4em;
margin: 0 0 0 .3em;
padding: 0 0.3em 0.5em 0.3em;
font-style: normal;
}
#noten {
clear: both;
border-top: 2px solid #666666;
font-family: "Times New Roman", Times, serif;
}
Helpt dat?
Met vriendelijke groet,
CSShunter
