[CSS] <div> met float-attribuut laat achtergrond verdwijnen

[Verwijderd]

Ik ben bij het experimenteren met een nieuwe layout voor een website tegen een probleem aangelopen. Mijn bedoeling is een achtergrondafbeelding te gebruiken die voor een deel transparant is, zodat ik de tekst van de pagina er overheen kan leggen, waarbij er een stukje achtergrond achter de tekst zichtbaar is. In een schema:



Ik weet niet zeker of iedereen meteen begrijpt wat ik bedoel, dus heb ik meteen twee afbeeldingen van hoe het wél en níet moet.

Fout! (FF) / Goed! (IE)

De pagina is ook direct te bekijken: http://pipview.xxp.nu/new/

Zoals jullie hopelijk begrijpen, is het de bedoeling dat de ster zichtbaar blijft achter de tekst. Ik begon met het testen en ontwikkelen in Firefox, maar toen ik daar bleef steken op dit probleem, ontdekte ik bij toeval dat het in Internet Explorer wél goed werkt.

Wat ik trouwens al heb gezien, is dat het wél werkt wanneer ik in plaats van twee kolommen slechts één kolom met inhoud gebruik (en de FLOAT-attributen dus niet gebruik). Ook wanneer ik in plaats van DIVS met FLOAT-attributen gebruik maak van een tabel met één rij en twee kolommen, levert dat geen problemen op. Het lijkt dus specifiek met het float-attribuut in Firefox te maken te hebben.

Weet iemand hoe ik dit kan oplossen terwijl ik gebruik kan blijven maken van het float-attribuut om de inhoud in twee kolommen te verdelen?

Alle bronbestanden zijn uiteraard te gebruiken:
- http://pipview.xxp.nu/new/index.html
- http://pipview.xxp.nu/new/css/screen.css
- http://pipview.xxp.nu/new/images/back.gif

[faabman]

waarom haal je niet gewoon je background-color van je #content div weg???

[Verwijderd]

faabman schreef op 22 oktober 2004 @ 00:19:
waarom haal je niet gewoon je background-color van je #content div weg???

Omdat dat niets uitmaakt, het probleem blijft exact hetzelfde. Ik heb hem nu even weggehaald, maar ik geloof dat je een background-image & -color gewoon naast elkaar kunt gebruiken.

[ Voor 8% gewijzigd door Verwijderd op 22-10-2004 00:29 ]

[tjmv]

Probeer eens een z-index op te geven (bijv 2, 3 ofzo.. => z-index: 3;)

[Verwijderd]

Floatende elementen geven geen hoogte door aan hun parent (#content). Die krijgt dus nu slechts de hoogte van zichzelf (100px +10px padding). De rest is gewoon niet zichtbaar. Oplossing:zet een clear-element neer onder de 2 floatende elementen.

Lees hier meer info over het float-model.

[SuperRembo]

In dit geval doet IE wat jij wil, maar FF werkt volgens de CSS specificatie, IE niet. Hier staat uitgelegd hoe het precies zit, en wat je er aan kan doen.
Een simpele oplossing is om

Cascading Stylesheet:

<div style="clear:both;"></div>

voor de sluit-tag van de content-div te zetten.

[ Voor 7% gewijzigd door SuperRembo op 22-10-2004 07:36 ]

[sjaakaq]

Ik had zoiets met een plaatje en daar hielp idd "float: waarde" en "position: relative" en toen werkte het...

[Verwijderd]

Verwijderd schreef op 22 oktober 2004 @ 07:02:
Oplossing:zet een clear-element neer onder de 2 floatende elementen.

Bedankt, dat was inderdaad de goede oplossing. SuperRembo, ook bedankt voor je tip. Ik zal de pagina's waar jullie een link naar hebben gegeven onthouden voor het geval ik nog eens een probleem heb met floats. De pagina is meteen bijgewerkt, dus iedereen die de site nu bezoekt met Firefox zal zien dat het probleem is opgelost.

[Verwijderd]

Dank voor het rekening houden met andere browsers dan IE

[crisp]

Als je tegen een probleem aan loopt met floats in IE, dan is dat 10 tegen 1 een bug in IE; hier kan je een overzichtje vinden van de meest voorkomende problemen en workarounds

Het laten uitrekken van de parent is trouwens puur een verkeerde implementatie van het float model.

[ Voor 18% gewijzigd door crisp op 22-10-2004 09:42 ]