[css] breedte van div instellen

[r0bert]

Ik heb dit probleem veelvuldig en het tot nu toe altijd opgelost, door ipv een DIV een SPAN te gebruiken, maar ik ben toch wel benieuwd wat nu mijn fout is..

HTML:

<div style="
      background-color: green; 
      display: inline; 
      width: 300 px;"
>
    element 1
</div>

<div style="
       background-color: red; 
       display: inline;"
>
    element 2
</div>

Dit werkt niet, de eerste DIV wordt helemaal geen 300 pixels, maar blijft de breedte van de content.. Kan iemand mij eindelijk eens uitleggen waarom dit is ? Verlos met uit mijn lijden

edit:
Voordat ik het vergeet, IE 5.5 werkt wel, 6 niet ..
http://www.robertdewilde.nl/temp/test.html

[ Voor 50% gewijzigd door r0bert op 08-07-2003 21:17 ]

[marty]

dat display: inline weghalen
en als je ze naast elkaar wilt hebben moet je ze floatend maken

maaruh, waarom persee met een div en niet met een span?

[ Voor 69% gewijzigd door marty op 08-07-2003 21:18 ]

[r0bert]

Maar dan zal ik dus met float: left moeten werken indien ik mijn DIVjes naast elkaar wil hebben (BLOCKelement toch ). En float werkt ook weer niet in mijn IE 6

edit:
Gaat me er niet zo zeer om DIV <-> SPAN.. gaat me er eerder om wat ik fout doe, als ik dat iig al doe

[ Voor 45% gewijzigd door r0bert op 08-07-2003 21:20 ]

[André]

iid, want standaard is een div display:block

/spuit 11

[ Voor 13% gewijzigd door André op 08-07-2003 21:21 ]

[marty]

r0bert schreef op 08 July 2003 @ 21:19:
Maar dan zal ik dus met float: left moeten werken indien ik mijn DIVjes naast elkaar wil hebben (BLOCKelement toch ). En float werkt ook weer niet in mijn IE 6

edit:
Gaat me er niet zo zeer om DIV <-> SPAN.. gaat me er eerder om wat ik fout doe, als ik dat iig al doe

dit werkt prima in IE 6 bij mij:

HTML:

<div style="
    position: relative;
    float: left;
    background-color: green;
    width: 300 px;">
    element 1
</div>

<div style="
    position: relative;
    float: left;
    background-color: red;">
    element 2
</div>

[r0bert]

Ja! Hier ook! Eindelijk een fatsoenlijke oplossing! Maar ik snap alleen nog steeds niet waarom dat position relative nodig is

[r0bert]

Nog 2 dingetjes om lastig te doen

HTML:

<div    style="
        position: relative;
        display: inline;
    
        background-color: white;
    
        height: 16 px;
        width: 150 px;
">element 1</div>

<div    style="
        position: relative;
        display: inline;
        background-color: black;
    
        height: 16 px;
        width: 100%;
">element 2</div>

Ik gebruik deze HTML, direct in mijn body.. Maar hij zet deze 2 DIVs onder elkaar Dus dacht ik, misschien ziet ie die 100% niet als de overgebleven breedte, maar rekent ie gewoon de hele browserbreedte (=100%) en omdat er dan niet genoeg ruimte is, springt ie naar de volgende regel..

dus probeerde ik dit

HTML:

<div    style="
        position: relative;
        display: inline;
    
        background-color: white;
    
        height: 16 px;
        width: 20%;
">element 1</div>

<div    style="
        position: relative;
        display: inline;
        background-color: black;
    
        height: 16 px;
        width: 80%;
">element 2</div>

(weer direct in mijn BODY) , maar nu vult ie niet de hele breedte van mijn browserscherm (= toch 100%:?).. Is hier een (on)logische verklaring voor .. en anders misschien een oplossing..

[ Voor 6% gewijzigd door r0bert op 08-07-2003 22:05 ]

[crisp]

Het zou helpen als je deze typvoudt even verbeterd:

code:

width: 20% px;

verder had ik ondertussen toch wel verwacht dat je het verschil tussen inline en blocklevel elementen zou weten; er wordt toch genoeg over gesproken hier.
Naast floats kan je trouwens ook nog met een container-div werken en je andere divjes daarbinnen absoluut positioneren

o, floats hoeven geen position style attribuut te hebben; een float is van zichzelf al een positioning

[ Voor 13% gewijzigd door crisp op 08-07-2003 22:04 ]

[r0bert]

Ik heb het verbeterd (edit) het werkt nu inderdaad wel

En ja, container-divs kan ook, maar dat lijkt me nog meer een omweg dan toch maar een SPAN te gebruiken Anyways, het werkt tot nu toe dus wel..

En sorry dat ik het niet snap, maar loop al een tijdje steeds tegen dit probleem aan en snapte er niets van.. Had al lopen zoeken enzo, dus ik dacht laat ik het maar hier vragen, daar is het toch voor ?

edit:
Ennuh, internetlinks waar het nog uitgebreider wordt uitgelegd zijn natuurlijk altijd welkom (niet dat ik er om vraag, maar mocht je er eentje weten, GRAAG)

Edit 2:
Is het niet mogelijk de eerste DIV gewoon in pixels op te geven en dat de tweede DIV de overige ruimte ernaast inneemt ?

[ Voor 30% gewijzigd door r0bert op 08-07-2003 22:19 ]

[crisp]

r0bert schreef op 08 July 2003 @ 22:07:
[...]En ja, container-divs kan ook, maar dat lijkt me nog meer een omweg dan toch maar een SPAN te gebruiken Anyways, het werkt tot nu toe dus wel..

Een span is weer een inline element en kan je als zodanig geen width of height voor opgeven; terug naar af dus (hoewel IE het waarschijnlijk wel pikt, maar dat is een ander verhaal)

En sorry dat ik het niet snap, maar loop al een tijdje steeds tegen dit probleem aan en snapte er niets van.. Had al lopen zoeken enzo, dus ik dacht laat ik het maar hier vragen, daar is het toch voor ?

Ik zeg ook niet dat ik het erg vind echter loop jij al lange tijd hier rond, en ik zie regelmatig topics (vnl topics over mensen mensen die hun table-layout omzetten naar een div-layout) waarin dit soort problemen aan de orde komen en besproken worden

edit:
Ennuh, internetlinks waar het nog uitgebreider wordt uitgelegd zijn natuurlijk altijd welkom (niet dat ik er om vraag, maar mocht je er eentje weten, GRAAG)

mmz, zo uit het hoofd ken ik eigenlijk alleen maar de recommendations van w3c, maar die zal je zelf ook wel kennen (begrijpen is een 2e, ik vind ze vaak ook moeilijk te begrijpen )

Edit 2:
Is het niet mogelijk de eerste DIV gewoon in pixels op te geven en dat de tweede DIV de overige ruimte ernaast inneemt ?

in Mozilla wel:

HTML:

<html>
<head>
</head>
<body>
<div style="position:relative;width:100%">
<div     style="
        position: absolute;
        background-color: white;
        height: 16px;
        width: 200px;
">element 1</div>

<div     style="
        position: absolute;
    left: 200px;
    right: 0px;
        background-color: black;
        height: 16 px;
">element 2</div>
</div>
</body>
</html>

alleen dan moet je afzien van IE ondersteuning

dat is dus 1 van de punten die maken dat divs nog niet altijd een goede vervanging zijn voor opmaak t.o.v. tabellen...

[r0bert]

Ik heb het nu inderdaad opgelost dmv geneste divs in een containerDIV en heb die, geneste elementen dus absolute gepositioneerd. Werkt prima! Ook al was de weg er naar toe voor mij nogal lang maar weet het nu in ieder geval voor de volgende keer

(thnx voor je goede/lange reply trouwens!!)

Edit:
Ohw oeps, zoals je al zei.. werkt dus niet in IE verdosie.. xal nog maar eventjes doorzoeken dan Anders maar 'ALLES' absoluut positioneren

HTML:

<div>
    <div    style="
            position: absolute;
            
            left: 0 px;
            width: 150 px;
            
            background-color: green;">..
    </div>
    <div    style="
            position: absolute;
            
            left: 150 px;
            width: 150 px;
            
            background-color: red;">..
    </div>
</div>

werkt niet eens Nou ik wordt gek! Ik ga wel of alles absoluut plaatsen of tables gebruiken

Waarom pikt 5.5 dit wel allemaal en 6.0 niet meer raarrr..

[ Voor 69% gewijzigd door r0bert op 08-07-2003 22:44 ]

[CH4OS]

[qoute]
Ennuh, internetlinks waar het nog uitgebreider wordt uitgelegd zijn natuurlijk altijd welkom (niet dat ik er om vraag, maar mocht je er eentje weten, GRAAG)
[/qoute]

http://www.handleidinghtml.nl
Kijk ik vaak... Staat alles over HTML (duh) en CSS

[r0bert]

Ik zal wel echt gek worden:

HTML:

<div style="position: absolute;left: 250 px;top: 250 px;background-color: green;">..</div>

Blijft gewoon doodleuk linksboven in mijn scherm staan Hoe krijg ik dat ding naar 250,250 ?

edit:
Hmmz, als ik mijn doctype eruit gooi doet ie 't ? Is deze DTD niet goed

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

[ Voor 44% gewijzigd door r0bert op 08-07-2003 22:51 ]

[Verwijderd]

250 px 250px

http://www.w3.org/TR/CSS2/syndata.html#length-units

The format of a length value (denoted by <length> in this specification) is an optional sign character ('+' or '-', with '+' being the default) immediately followed by a <number> (with or without a decimal point) immediately followed by a unit identifier (e.g., px, deg, etc.). After the '0' length, the unit identifier is optional.

[ Voor 92% gewijzigd door Verwijderd op 08-07-2003 22:54 ]

[r0bert]

Fijn Zo ben ik dus altijd al aan het coden met die spaties ertussen

Van je fouten moet je maar leren, om het maar even positief in te blijven zien Thanks trouwens..!