varför visas inte bakgrunden

7 svar · 657 visningar · startad av smileenergy 19 feb. 2007

smileenergyMedlem sedan jan. 200781 inlägg

Trådstart19 feb. 2007 12:23#1

Hej, jag undrar varför min bakgrund inte visas i webbläsaren.
bakgrunden i #blackline visas utmärkt medan den i #maincontainer inte visas, vad beror detta på? och som ni ser i min bortkommenterade rad så har jag försökt skriva koden kortare men då visas bakgrunden inte ens i blackline. skulle gärna vilja ha hjälp med detta.

#wrap { width: 800px; margin:0 auto;}
#top { width:800px; height:100px;}
#blackline { width:800px; height:22px; background-image:url(pic/blackline.jpg); background-repeat:repeat-x; /*background:url(pic/blackline.jpg)repeat-x;*/}
#maincontainer { width:800px; height:auto; background-image:url(pic/bg.jpg); background-repeat:repeat-y;}

edit: den visas i ie men inte i opera och firefox.

itpastornMedlem sedan feb. 2007278 inlägg

19 feb. 2007 21:38#2

Kan Firefox och Opera visa bilden ö h t? Dvs vad ser du om du tar in dem direkt i webbläsaren som en URL.

smileenergyMedlem sedan jan. 200781 inlägg

20 feb. 2007 19:59#3

då visas de, jag försöker använda mig utav en s.k. fauxcolums. (http://alistapart.com/articles/fauxcolumns/)
i den "stora" diven som bakgrunden finns i ligger även två mindre divar som verkar dölja bakgrunden för tar jag bort de två divarna som ligger i den stora diven så visas bakgrunden, det är helkonstigt

zcorpanMedlem sedan dec. 20042 245 inlägg

20 feb. 2007 23:19#4

Jag gissar att du endast har floats däri, och eftersom floats tas ut ur dokumentflödet så blir höjden på förälderdiven 0. Du behöver bana dina flöten med tex:

#maincontainer::after { content:""; display:block; clear:both; }

smileenergyMedlem sedan jan. 200781 inlägg

21 feb. 2007 00:15#5

hmm, kanske kan ses som en dum fråga men måste jag anropa ::after grejen på något sätt och hur gör jag det i så fall?

zcorpanMedlem sedan dec. 20042 245 inlägg

21 feb. 2007 01:31#6

Nej. Du lägger bara till den där raden i din stilmall.

("::after" är ett så kallat pseudo-element. Enligt Selectors har pseudo-element två kolon istället för ett som i CSS2.1.)

smileenergyMedlem sedan jan. 200781 inlägg

21 feb. 2007 12:46#7

Tack så mycket, det verkar fungera nu men vad gör den tomma content taggen i diven? content="";

zcorpanMedlem sedan dec. 20042 245 inlägg

21 feb. 2007 15:38#8

'content' (vilket är en egenskap) anger vilket innehåll pseudo-elementet ska ha. Du kan tex testa lägga in lite text där (content:"foo bar"). I det här fallet vill vi inte ha någon text men måste fortfarande ange en tom sträng för att det ska genereras en box som kan bana flötena.

I princip fungerar det på samma sätt som om du hade lagt till

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

sist i #maincontainer (vilket också fungerar), fast du gör det med CSS.