clear:both?

[jeel2008]

hallo, ik ben bezig met een site in joomla en heb als banner vier fotos naast elkaar.
daaronder komt tekst (in een ander module uiteraard).
die tekst moet niet rechts van de plaatjes verschijnen, maar doet dat wel.

ik heb alles al zo'n beetje geprobeerd, incl zelfs de div de breedte van mn body gegeven! maar niets hielp, die tekst blijft maar rechts opduiken, zie image.

mn css ziet er zo uit:

<div style="text-align: center; clear: both; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto;"><img style="margin: 5px; border: 2px solid #3399cc; float: left;" src="images/stories/rosalie/nijmegen3.jpg" alt="nijmegen3" width="150" height="150" /><img style="margin: 5px; border: 2px solid #33cccc; float: left;" src="images/stories/rosalie/nijmegen4.jpg" alt="nijmegen4" width="150" height="150" /><img style="margin: 5px; border: 2px solid #33cccc; float: left;" src="images/stories/rosalie/nijmegencontact.jpg" alt="nijmegencontact" width="150" height="150" /><img style="margin: 5px; border: 2px solid #33cccc; float: left;" src="images/stories/rosalie/nijmegenhome.jpg" alt="nijmegenhome" width="150" height="150" /></div>

wat gaat hier fout?

 

[tecsman]

1. De code die je meegeeft is geen css maar html met stijl-attributen
2. De code die je meegeeft komt niet overeen met het plaatje, want
   
   - de kleine icoontjes in het plaatje staan niet in je code
   - de tekst "deze tekst wil ik hier niet" staat niet in je code
   - de copyright-tekst staat ook niet in je code​
3. Waar is de rest van je code

In welk deel van je html-code staan die kleine icoontjes (PDF, printen, mail)
en waarom heb je die niet megeleverd?

De kans is groot dat je behalve deze div ook nog meer code hebt,
bijvoorbeeeld voor de footer-tekst.
Waarom staat die footer tekst op het plaatje wel onder de images?

Voor jou en voor toekomstige lezers:
dit is nou typisch een voorbeeld waarom het aanleveren van kleine stukjes html-code niet echt zinvol is.
Liever een link naar een live-website.
Als je nog aan het experimenteren bent,
gebruik dan webruimte van een gratis host en zet daar een voorbeeld van je site-in-aanbouw.
Dan mag dan wel zoveel mogelijk uitgekleed, zonder ' echte' images en inhoudelijke tekst. (desnoods met Lorem Ipsum)

 

[jeel2008]

ik weet niet waarom je je publiek aanspreekt met 'lezertjes' maar het komt op mij nogal denigrerend over.

maar goed, als je dat wil moet je dat maar doen.

dan je reactie
- De code die je meegeeft is geen css maar html met stijl-attributen
nee, dat is bij de images. in de div staan css stijlen. de images heb ik in deze div gelegd.
- de kleine icoontjes in het plaatje staan niet in je code
nee, deze staan in een of ander joomladiv, artpost nog wat, en verschijnen op commando.
ze doen voor de vraag niet ter zake lijkt me.
- de tekst "deze tekst wil ik hier niet" staat niet in je code
nee, want de code staat in een zelfgemaakt module die verschijnt in een banner (positie).
- de copyright-tekst staat ook niet in je code
dit is ook een module in een positie en heeft met de vraag niets van doen.

de vraag was waarom de clear:both niet werkt. alles links en rechts van dat blok zou toch moeten worden schoongeveegd, lijkt me.


http://www.durf-coaching.nl/

 

[Haaren101]

Mee eens, onnodig toontje van Tecsman.

Maar als ik je site open dan zie ik niets meer naast de plaatjes staan. Is het probleem hiermee opgelost?

Ron

 

[jeel2008]

eh, nee eigenlijk niet. als je hier kijkt

http://www.durf-coaching.nl/contact

zie je rechts nog wat tekst staan.

die moet eronder komen. ik heb al geprobeerd, van dik hout zaagt men planken, gewoon die module (want dat is het waar de images inliggen) een breedte te geven van 898 px, (de body is 900) zodat alles wel weggedrukt zou moeten worden daar, maar dat had op een of andere manier ook niet het gewenst effect.
maar ik blijf rommelen, op een gegeven moment zal het wel lukken.

 

[Haaren101]

Als ik in IE7 dan zie ik de tekst er onder staan, in Firefox staat het ernaast. Helaas zie ik het probleem niet; wellicht een echte kenner?!?!?

 

[jeel2008]

ie7

hee, dat is voor het eerst dat IE eens iets gladjes laat verlopen en een andere browser niet.

bij IE9 staat de tekst er echter weer gewoon naast.

ook zonder icoontjes naast de plaatjes verschuiven ze niet naar het midden, heb ik ondervonden (wat uiteindelijk de bedoeling is): http://www.durf-coaching.nl/
heb de icoontje nu weer teruggezet.


even later: ok, het is me gelukt met de botte bijl:
ik heb nu gewoon één plaatje in photoshop gemaakt en dat plaatje gecentreerd met de editor, zodat je dit krijgt in de code:

<p><img style="display: block; margin-left: auto; margin-right: auto;" src="images/stories/rosalie/vieropeenrij2.png" alt="" /></p>

zo kan het dus, zoals je ziet. (dat centreren van 4 losse plaatjes uitzonderlijk ging, dmv de edirot, niet echt lekker. ze kwamen onder elkaar te staan. daarom gaf ik de hele div textalign center, maar dat pakte ie dus niet)

op de pagina contact heb ik het oude systeem trouwens nog even laten staan, met de 4 afzonderlijke plaatjes dus.

 

[csshunter]

Hoi Jeel.
Ook even de scherpe bijl gepakt: Firebug, en losgelaten op de pagina contact.
Binnen 1 minuut gevonden! (het meeste werk zit in het openklikken van al die <div>'s van het template).

• De 4 plaatjes zitten wel in een <div> van 900px breed met een {text-align:center}, maar ze hebben alle 4 een {float:left;}.
• Dan trekken ze zich niets van die center aan.
• En dan komt het volgende element er rechts naast te staan, als er nog ruimte is.
• Floats er uit + ook de 900px div-breedte er uit (door het block-karakter van een <div> wordt het automatisch de volle breedte; en 900px was ook te breed) + ook de {margin: 0 auto} uit de <div> + ook de {clear:both;} uit de <div>.
• Blijft voor de <div> alleen {text-align:center;} over.
• Klaar.

Resultaat:

​

Met vriendelijke groet,
CSShunter
_________
PS: een {clear:both;} om ergens onder te komen werkt pas in het er op volgende element, niet in het element zelf.

 

[jeel2008]

nou , het is me uiteindelijk gelukt, zie: http://www.durf-coaching.nl/test

via

<div style="text-align: center; display: block; clear: both; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto;">
    
    <img style="margin: 5px; border: 2px solid #3399cc;" src="images/stories/rosalie/nijmegen3.jpg" alt="nijmegen3" width="150" height="150" />
    <img style="margin: 5px; border: 2px solid #3399cc;" src="images/stories/rosalie/nijmegen3.jpg" alt="nijmegen3" width="150" height="150" />
    <img style="margin: 5px; border: 2px solid #3399cc;" src="images/stories/rosalie/nijmegen3.jpg" alt="nijmegen3" width="150" height="150" />
    <img style="margin: 5px; border: 2px solid #3399cc;" src="images/stories/rosalie/nijmegen3.jpg" alt="nijmegen3" width="150" height="150" />

</div>

het ligt blijkbaar toch aan display:block.
hieronder nl ff de nieuwe en de oude onder elkaar, ter vergelijking.

<div style="text-align: center; display: block; clear: both; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto;">
    <img style="margin: 5px; border: 2px solid #3399cc;" src="images/stories/rosalie/nijmegen3.jpg" alt="nijmegen3" width="150" height="150" />
    <img style="margin: 5px; border: 2px solid #3399cc;" src="images/stories/rosalie/nijmegen3.jpg" alt="nijmegen3" width="150" height="150" />
    <img style="margin: 5px; border: 2px solid #3399cc;" src="images/stories/rosalie/nijmegen3.jpg" alt="nijmegen3" width="150" height="150" />
    <img style="margin: 5px; border: 2px solid #3399cc;" src="images/stories/rosalie/nijmegen3.jpg" alt="nijmegen3" width="150" height="150" />
</div>

<div style="text-align: center; clear: both; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto;">
    <img style="margin: 5px; border: 2px solid #3399cc; float: left;" src="images/stories/rosalie/nijmegen3.jpg" alt="nijmegen3" width="150" height="150" />
    <img style="margin: 5px; border: 2px solid #33cccc; float: left;" src="images/stories/rosalie/nijmegen4.jpg" alt="nijmegen4" width="150" height="150" />
    <img style="margin: 5px; border: 2px solid #33cccc; float: left;" src="images/stories/rosalie/nijmegencontact.jpg" alt="test" width="150" height="150" />
    <img style="margin: 5px; border: 2px solid #33cccc; float: left;" src="images/stories/rosalie/nijmegenhome.jpg" alt="test" width="150" height="150" />
</div>

dat is blijkblaar alles, display:block.
ik laat dit item nog even open, misschien heeft csshunter , of een ander, nog een goeie tip of zoiets, en anders sluit zet ik het morgen op status: opgelost.

 

[jeel2008]

hallo css hunter, zie net je bericht nadat ik het mijne gepost had.
je had het alweer opgelost zie ik.
nou ja, ik nu toevallig ook.

# {text-align:center}, maar ze hebben alle 4 een {float:left;}.
# Dan trekken ze zich niets van die center aan.

kijk , aha. ik denk dan altijd in de trant van. de div is de schoenendoos.
daarin staat 2 schoenen, de images. die laat je in de doos tegen elkaar aankruipen.
de doos zet je in het midden van de kamer.
of die schoenen in de doos dus mooi naast elkaar staan of niet, de doos blijft toch in het midden van de kamer staan.
mooi uitgelijnd, daar hebben de schoenen in de doos helemaal geen invloed op.
maar dat is met float:lefts dus wel zo, als ik het goed begrijp? dat heeft dus wel invloed?
dan moet ik rap een ander visualisatie bedenken voor die divs. weg met die schoenen.

 

[csshunter]

maar dat is met float:lefts dus wel zo, als ik het goed begrijp? dat heeft dus wel invloed?

Jazeker, een {float} ontsnapt aan de zogenaamde "normal flow" (de gewone volgorde der dingen). Dat is het karakter van een drijvend voorwerp!

Als de schoenendoos een div is met {text-align:right}, dan staan de gewone schoenen (text) rechts, zoals het hoort.
Laat je nu iets drijven (naar links of naar rechts), dan zit dat wel met een touwtje vast aan de schoenendoos, maar het drijft tot aan de linker zijkant of de rechterzijkant, en trekt zich van de rest niets aan:

De rest moet zich wel iets van de float aantrekken: waar iets in het water drijft, kan niet iets anders komen; de tekst drapeert zich om de float heen, voor zover er ruimte is.

Maar omdat de float behalve de grens van de linkerzijkant (/rechterzijkant) van de doos niets met de rest te maken heeft, en los staat van de inhoud van de doos, kan de float onder de div-doos uitkomen, als er te weinig in zit:

Het volgende element na onze div-doos schuift nu gezellig aan náást de float. Want dat is de eerstvolgende vrije ruimte in de "normal flow" (van boven naar beneden en van links naar rechts):

Om het volgende element dan toch onder de float te laten komen, is de clear nodig!

Nog wat voorbeelden & afbeeldingen:
www.handleidinghtml.nl/css/css-elementen/css-elementen06.html

Met vriendelijke groet,
CSShunter
__________
PS: De doos zelf kan je wel verplaatsen, die kan bv. midden in de kamer staan met een opgegeven breedte en een {margin:0 auto;}
De doos kan ook tot aan de helft van de kamer komen (met weer een opgegeven breedte).
Maar de floats binnen de doos blijven netjes in de doos: die botsen steeds tegen de linker- of rechterzijkant.
En zitten er méér floats van dezelfde richting in, dan drijven ze tegen elkaar, voor zover er breedte genoeg is.

• Uitzondering: als je met {position: absolute;} gaat werken, dan kunnen de floats wel uit de doos drijven en overal op de pagina terechtkomen. Maar ja, dan is eigenlijk die hele doos niet nodig.

 

[crash]

1. 
   Voor jou en voor toekomstige lezertjes:

1. 
   Hier komt jong en oud, lijkt me niet dat je de oudere onder ons met "lezertjes" kunt aanspreken.
   
   Ps met oudere, bedoel ik niet meteen personen die een hoge leeftijd hebben.

 

[jeel2008]

hallo csshunter
bedankt voor deze interessante lezing.
ik ga mn schoenen uitdoen, float ze ff left tegen de muur aan, en ga op de bank liggen, maar niet nadat ik deze kwestie de status 'opgelost' heb meegegeven.

 

[csshunter]

Mooi: drijf maar right away van die css-besognes!

 

[tecsman]

Hier komt jong en oud, lijkt me niet dat je de oudere onder ons met "lezertjes" kunt aanspreken.

Ps met oudere, bedoel ik niet meteen personen die een hoge leeftijd hebben.

Ik heb het even aangepast.
Mijn excuses aan allen die zichzelf zo serieus nemen dat ze over mijn woord vielen.
De bedoeling was het luchtigjes te houden.