Afbeelding en achtergrond

[Metian]

(Sorry, kon niet op goede titel komen die het probleem compleet beschrijft)

Ik heb een pagina met kruiden en elke kruiden staat onder zijn eigen "p" tag.

Het probleem echter is dat wanneer ik er voor kies om een afbeelding neer te zetten en hem float:left geef, dat de background stopt na de tekst en de afbeelding dus er overheen schuift.



Dit is (een deel) van de code

HTML:

<h2>Laos</h2>
<p><img src="/img/kruiden/laos.png" />Lijkt op gember, maar is iets frisser. Laos is de poeder van de gedroogde laoswortel, die voorkomt in Thailand, Zuid-China, Indonesië, Japan en het Caribische gebied.</p>

en de CSS

Cascading Stylesheet:

#kruiden p {
        margin: 5px 0px 10px 0px;
        text-align: justify;
        background: #F2F2F2;
        padding: 8px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
    }
    
    #kruiden img {
        margin-right: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        float: left;
    }

Hoe kan ik zorgen dat de background gewoon doorgaat tot onder de afbeelding ? Of moet ik toch echt <div> gaan gebruiken per kruiden ?.

[RobIII]

Kijk eens naar clear Hint: Je moet een clear op je h2 zetten. Op je paragraphs zet je vervolgens een overflow: auto om te zorgen dat de achtergrond "meegroeit" et voila.

[ Voor 41% gewijzigd door RobIII op 08-06-2012 14:32 ]

[OkkE]

Door float houdt de <p> geen rekening meer met de afbeelding; om het even simpel te zeggen. Kort gezegd zijn er 2 oplossingen:

1. Zet een overflow:hidden of auto op je <p>.

2. Zet net voor je de <p> sluit een extra element dat je clear:both meegeeft (bijvoorbeeld een <span>)

---

@RobIII: Het probleem is geloof ik ook dat de achtergrond kleur van de <p> niet door loopt, niet (alleen) dat de <H2> naast de afbeelding komt te staan.

[ Voor 5% gewijzigd door OkkE op 08-06-2012 14:37 ]

[RobIII]

OkkE schreef op vrijdag 08 juni 2012 @ 14:34:
2. Zet net voor je de <p> sluit een extra element dat je clear:both meegeeft (bijvoorbeeld een <span>)

Dat extra element is nergens voor nodig

[Metian]

A million thanks!

Heb de overflow toegepast en het werkt nu perfect naar mijn mening. Betreft nare bewerkingen nog niks tegen gekomen, gelukkig maar.

[RobIII]

Metian schreef op vrijdag 08 juni 2012 @ 14:42:
Heb de overflow toegepast en het werkt nu perfect naar mijn mening. Betreft nare bewerkingen nog niks tegen gekomen, gelukkig maar.

In dit geval volstaat de overflow (toevallig); maar als ik jou was zou ik me even verdiepen in floats/clear etc. want hier loop je geheid vaker tegen aan en dan is 't wel verdomd handig als je weet hoe dat nou zit met bijv. de clear.

[OkkE]

RobIII schreef op vrijdag 08 juni 2012 @ 14:38:
[...]

Dat extra element is nergens voor nodig

True. Maar het is ook een oplossing.

Metian schreef op vrijdag 08 juni 2012 @ 14:42:
A million thanks!

Heb de overflow toegepast en het werkt nu perfect naar mijn mening. Betreft nare bewerkingen nog niks tegen gekomen, gelukkig maar.

Ik had eerst alleen overflow: hidden als suggestie (stom), dat heeft soms wel nare bijwerkingen. De auto valt opzich wel mee. Maar ook daar, er zijn situaties waarbij het bijwerkingen kan hebben.

[ Voor 7% gewijzigd door OkkE op 08-06-2012 14:45 ]

[RobIII]

OkkE schreef op vrijdag 08 juni 2012 @ 14:44:
True. Maar het is ook een oplossing.

...die extra (overbodige) markup vereist

OkkE schreef op vrijdag 08 juni 2012 @ 14:44:
De auto valt opzich wel mee. Maar ook daar, er zijn situaties waarbij het bijwerkingen kan hebben.

Heb je een voorbeeld? Ik heb 't nog niet meegemaakt (maar, granted, ik ben niet meer héél veel bezig met dit soort werk).

[Metian]

RobIII schreef op vrijdag 08 juni 2012 @ 14:43:
[...]

In dit geval volstaat de overflow (toevallig); maar als ik jou was zou ik me even verdiepen in floats/clear etc. want hier loop je geheid vaker tegen aan en dan is 't wel verdomd handig als je weet hoe dat nou zit met bijv. de clear.

Dat ga ik zeker even doen, heb namelijk niet echt zin om nog keer tegen dit soort problemen aan te lopen, wanneer ik nog genoeg te doen heb .

OkkE schreef op vrijdag 08 juni 2012 @ 14:44:

[...]


Ik had eerst alleen overflow: hidden als suggestie (stom), dat heeft soms wel nare bijwerkingen. De auto valt opzich wel mee. Maar ook daar, er zijn situaties waarbij het bijwerkingen kan hebben.

Grappige is, dat ik eigenlijk zonder na te denken al overflow:auto gebruikte en niet hidden. Terwijl ik toch echt dacht hidden te gebruiken. Maar goed, het werkt allemaal

Daarvoor alle, dank u

[OkkE]

RobIII schreef op vrijdag 08 juni 2012 @ 14:47:
[...]

...die extra (overbodige) markup vereist

You are absolutely right, sir.
Het was meer, soms heb je al zo'n extra element in je HTML, dan zou je daar een clear:both op kunnen zetten.

[...]

Heb je een voorbeeld? Ik heb 't nog niet meegemaakt (maar, granted, ik ben niet meer héél veel bezig met dit soort werk).

Het is in zo'n situatie als dit zeker geen issue. Het probleem kan bijv. ontstaan wanneer je auto of hidden combineert met een (max-)height of (max-)width. Granted, dan heb je eigenlijk zo'n probleem niet dat de background niet doorloopt, maar (zoals jij al zei) kan het geen kwaad even de exacte werking van overflow op te zoeken.

[R4gnax]

Of je sidestepped de hele issue en gebruikt de micro clearfix hack, die zowel float als margin containment normaliseert tussen alle gangbare browsers.

Cascading Stylesheet:

.bfc { zoom:1 }
.bfc:before, .bfc:after { clear:both;content:"";display:table }

[NMe]

Om vervolgens alsnog de gebruikelijke markup/CSS te moeten gebruiken voor IE8 en lager? Wat heeft dat voor zin?
Ok, daar is die zoom dus voor... Maar dat sterretje op de pagina die je linkt staat er vast niet voor niets?

[ Voor 34% gewijzigd door NMe op 09-06-2012 18:53 ]

[RobIII]

Dat sterretje zorgt ervoor dat andere browsers dan IE die property negeren

[ Voor 4% gewijzigd door RobIII op 09-06-2012 19:41 ]

[NMe]

Dat weet ik. Daarom zeg ik juist dat het er niet voor niks staat.

[R4gnax]

NMe schreef op zondag 10 juni 2012 @ 03:37:
Dat weet ik. Daarom zeg ik juist dat het er niet voor niks staat.

Alleen IE implementeert de vendor-specific zoom property. Verder is de waarde 1 (net als 100%) een neutrale waarde die geen daadwerkelijke vergroting toepast. Het netto effect is in dit geval hetzelfde, dus de star hack heeft alleen zin als je expliciet wilt zijn.

Zelf gebruik ik in gevallen waar ik expliciet moet/wil zijn liever een conditional IE CSS sheet, of nog liever een simpele Modernizr test voor 'hasLayout', zoals bijv. de volgende.

JavaScript:

Modernizr.testStyles( "#modernizr { zoom: 1 }",function( el ) {
  Modernizr.addTest( "layout", !!el.currentStyle && !!el.currentStyle.hasLayout );
});

[ Voor 4% gewijzigd door R4gnax op 10-06-2012 13:07 ]

[Verwijderd]

R4gnax schreef op zaterdag 09 juni 2012 @ 18:39:
Of je sidestepped de hele issue en gebruikt de micro clearfix hack, die zowel float als margin containment normaliseert tussen alle gangbare browsers.

Cascading Stylesheet:

.bfc { zoom:1 }
.bfc:before, .bfc:after { clear:both;content:"";display:table }

^met hem dus. Beste manier voor self-clearing floats IMHO.