div loopt over plaatje heen

Status
Niet open voor verdere reacties.

mvdleeuw

Gebruiker
Lid geworden
13 sep 2007
Berichten
58
Ik ben een pagina aan het maken waarop een gedeelte van de tekst in een div staat met de volgende eigenschappen:
position: relative;
top: -20px;
margin-top: 0px;
margin-bottom: 0px;
padding-left: 1.5em;
float: left;
clear: none;

Nu heb ik op dezelfde plek een plaatje ingevoegd met de volgende eigenschappen:
float: right;
margin-bottom: 6px;
margin-left: 6px;
clear: both;

Dit werkt allemaal prima, tenminste...zoland de tekst niet te lang is. Langere teksten lopen dwars over het plaatje heen. Bovendien wordt de div met de tekst door het plaatje naar beneden gedrukt.

Wat moet ik doen om de div op het juiste moment om te laten lopen en om hem zijn plaats te laten houden? Het plaatje is ingevoegd voor gewone tekst met de eigenschap clear: left;

Michiel
 
Hoi Michiel,
Wat moet ik doen
Dat valt niet zomaar te zeggen, want het hangt af van o.a. de volgorde van de <div>'s in de html; ook de rest van de css kan een rol spelen.
Het makkelijkst om er iets over te kunnen zeggen is: een link naar een testpagina waarop het zo gaat als je beschrijft. Heb je die?

Met vriendelijke groet,
CSShunter
 
Ik had hem tot nu toe alleen lokaal, maar hij is nu te vinden op http://www.nderleeuw.nl/testcss/2.html

Overigens heb ik het niet helemaal correct gezegd: de tekst waar het om gaat staat in een <p>-tag met class "toelichting", niet in een div.

Als je het browserwindow versmalt zie je wat er gebeurt. De tekst "Lid van de magistraat 1530-1565" verspringt.

Als ik hier een standaard <p>-tag gebruik blijft de tekst netjes links naast het plaatje staan.
 
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
 
Kijk, zo ziet het er meteen fantastisch uit! Overigens was hiskad.css niet nodig; ik had de inhoud daarvan gemakshalve verplaatst naar de pagina zelf.

Heel erg bedankt, niet alleen voor de oplossingen, maar ook voor het inzicht in float en clear. Het was me allemaal wat gaan duizelen.

Michiel
 
Hoi Michiel,
Mooi, dat het is opgelost. Ik vermoedde al dat de hiskad.css dezelfde inhoud had als wat in de <head> stond.
Voor als je nog wat aanschouwelijke voorbeelden van float en clear wilt zien:
Deze Handleiding HTML is niet helemaal up-to-date, maar de meeste dingen zijn nog steeds geldig en je kunt er een aardige eerste indruk mee krijgen.
Wil je echt weten hoe het precies zit, dan moet je in de CSS2.1 specificatie kijken, maar hun taalgebruik moet je heel erg aan wennen: bijna elk woord heeft een speciale betekenis, en die moet je maar weten.
En uit de inhoudsopgave alleen al blijkt dat je hier wel een poosje zoet mee kunt zijn... ;)

Tip
Voor als je eens doelbewust twee floats naast elkaar wilt zetten, nog een suggestie.
  • Als je twee {float:left;}'s hebt moet je niet de tweede float een {margin-left: ..px;} geven om een afstandje tot de eerste float te krijgen, maar de eerste float een {margin-right: ..px;} geven.
  • Bij twee {float:right;}'s het omgekeerde: geen {margin-right: ..px;} voor de tweede, maar {margin-left: ..px;} voor de eerste.
Het zou geen enkel verschil mogen uitmaken, maar Internet Explorer 6 (en eerder) doet hele rare dingen met floats, en je kan je er wezenloos naar zoeken wat daar nu de oorzaak van is. IE7 en IE8 hebben er geen last van.
Het is domweg een bug in IE6! :d
Zie voor tintelende voorbeelden:
En je wilt niet weten wat voor gereedschapskist aan truc's nodig was voor het in het gareel krijgen van IE5 en IE5.5! ;)
Gelukkig zijn we daar nu van af.

Met vriendelijke groet,
CSShunter
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan