[CSS] Fout bij inline elementen - Softwareontwikkeling

zondag 14 november 2004 15:22

Acties:

Verwijderd

Topicstarter

Hallo,

ik heb een div waarin een aantal (variabel) div's in gezet wordt.
Ik dacht, als ik die nu "inline" maak, komen ze mooi naast elkaar, totdat de parent in de breedte vol zit en dan gaat ie naar onder.

Dit werkte gedeeltelijk, ik gebruikte eerste deze doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
maar kwam er achter dat deze meer overeenkomsten had tussen IE en mozilla:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Alleen nu werkt het bovenstaande niet meer

Stylesheet

code:

.f {
display: inline;
width: 160px;
margin: 8px;
border: 1px solid black;
}

stukje test code:

code:

<div style="width: 500px; border: 1px solid red;"> 
<div class="f">bla</div>
<div class="f">bla</div>
<div class="f">bla</div>
<div class="f">bla</div>
</div>

Op de een of andere manier pakt de browser de width niet meer...
Ik gebruik nu de laatste doctype van hierboven.

Ziet iemand misschien wat ik fout doe?

zondag 14 november 2004 15:24

Acties:

Verwijderd

Wat je fout doet, is dat je ervanuit gaat dat je bij inline elementen een breedte op kunt geven. Dat kan niet, volgens de specificatie.

zondag 14 november 2004 15:33

Acties:

Verwijderd

Topicstarter

Is dat veranderd dan van 4.0 naar 4.01?

Dan stop ik er een plaatjes in van 1px hoog en 160px breedt
Alleen op de een of andere manier krijg ik zeg maar 2 div's te zien.

1 waar mijn spacer plaatjes in zit, daar zit de border om heen en los daarvan nog eens de inhoud

[ Voor 46% gewijzigd door Verwijderd op 14-11-2004 15:36 ]

zondag 14 november 2004 15:39

Acties:

Koeniepoenie

Spacer plaatjes? Dat kan anders waarschijnlijk (margin, padding, oid)

Maar goed, zoals Cheatah al zegt kun je bij inline elementen geen breedte opgeven. Wat je kunt doen is alle elementen naar links laten 'floaten':

code:

1	float: left;

Dan kun je wel een breedte opgeven.

Parse error: syntax error, unexpected GOT_USER in https://gathering.tweakers.net on line 1337

zondag 14 november 2004 15:55

Acties:

Verwijderd

Topicstarter

als ik dus "spacers" erin zet werkt het niet helemaal, als ik er een <br> in zet dan komt de inhoud ernaast te staan.

Float:left wil ook niet helemaal werken: in mozilla wordt de parent div niet opgerekt

zondag 14 november 2004 16:00

Acties:

Blaise

wel als je achter die floats een lege div zet met clear:both

zondag 14 november 2004 16:38

Acties:

Verwijderd

Verwijderd schreef op zondag 14 november 2004 @ 15:55:
Float:left wil ook niet helemaal werken: in mozilla wordt de parent div niet opgerekt

En wederom doet mozilla het goed

Verder is er niks veranderd tussen html 4 en 4.01 wat betreft de css, alleen IE gaat er anders mee om.

Verder is voor deze dingen zowel display: inline (je mag geen breedte opgeven) en float: left (eigenlijk voor textwrapping), niet geschikt. Hiervoor zit display: inline-block; in de css specificatie, maar je raadt het al: de implementatie laat te wensen over.

Practische oplossing: floaten en een <br style="clear:both"> erachter, of je surrounding div gewoon een hoogte geven.

Verder riekt dit naar een menu en kan je beter gebruik maken van een list, in goede html staan vrij weinig divs iha (en ook vrij weinig spans)

maar eens een verhaaltje over geschreven: http://www.rikkertkoppes.com/?thoughts/2004/11/14

[ Voor 7% gewijzigd door Verwijderd op 14-11-2004 19:47 ]