[CSS] Twee block divs langs elkaar

[Verwijderd]

Als een brave webdesigner probeer ik nu mijn pagina's in elkaar te draaien met DIVs en te positioneren met CSS, maar verdomd als de frustraties die daarmee gepaard gaan niet eens mijn dood worden. Vrûûger, toen we nog tabellen mochten gebruiken, was alles toch veel makkelijker... .

Het probleem is dat ik het scherm in twee blokken wil verdelen. Het linkerblok gaat een titel bevatten in de vorm van een LABEL en het rechterblok één of meer LABELs en INPUTs; het geval is uiteindelijk voor een tabelloos form, zoals hier afgekeken. Alleen, omdat ik nog informatie toe wil kunnen voegen aan een invoerveld gaat het voorbeeld niet helemaal op.

Alles mooi en aardig, maar ik zit me te ergeren aan vreselijk irritant gedrag. Het kleinste stuk code wat de fout demonstreert is deze:

HTML:

<style>
.form_control_label {
  float: left;
  background-color: green;
  display: block;
}

.form_control_control {
  background-color: yellow;
  display: block;
}

label {
  display: block;
}
</style>

<!-- .... -->

    <div class="form_control">
      <div class="form_control_label"><label class="input_title" for="username">Desired username</label></div>
      <div class="form_control_control">
        <label class="input_error" for="username">Username may not be empty</label>
        <input type="text" id="username" name="username" value="" />
       </div>
    </div>

Wat gebeurt er? Hoewel de form_control_label en form_control_control toch duidelijk sibling elementen zijn, menen zowel IE als FireFox dat het label-block IN het control-block getoond moet worden. Het control-block spant dus de hele breedte; het label-block en de error-label delen de eerste regel, en het invoerveld komt aan de linkerkant van de pagina terecht (in plaats van onder het error-label, waar hij eigenlijk thuishoort): schermschotje.

Waarom dit gebeurt is me een groot raadsel. Wat doe ik verkeerd/wat zie ik over het hoofd?

Als extra krenten in de verwarringspap: als ik het control-block (dus de niet gefloate div) een height-waarde toeken, zet Internet Explorer de blokken wel goed naast elkaar. FireFox vertikt het echter nog steeds in alle standen...

Argh! Kwor gek!

[X-Lars]

http://caseyard.com/topics/got/oneofborg.html

[list]
• geen underscores (- kan wel) in elementnamen
• nogal inefficiënt gebruik van css selectors zo

[CrashOne]

Komt door de float.

Tevens is het netter om iets als dit te doen:

code:

<style type="text/css">
    label{
        display:block;
        margin: 10px;
    }
    input, textarea {
        width: 520px;
        margin-right: 10px;
    }
    fieldset {
        width: 540px;
    }
</style>
<form action="post.html" method="post" >
    <fieldset>
        <legend>Blaat</legend>
        <label for="naam">
            Naam:
            <input type="text" name="naam" id="naam" />
        </label>
        <label for="email">
            E-mail adres:
            <input type="text" name="email" id="email" />
        </label>    
        <input type="submit" value="Verstuur" />
    </fieldset>
</form>

Die layers zijn nl nergens voor nodig.

[Verwijderd]

X-Lars schreef op 08 november 2004 @ 01:08:
http://caseyard.com/topics/got/oneofborg.html

Bedankt, maar in jouw pagina komen de twee blokken onder elkaar terecht, terwijl ik ze langs elkaar wil hebben.

[list]
• geen underscores (- kan wel) in elementnamen

Waarom?

• nogal inefficiënt gebruik van css selectors zo

Hmm... valt wel mee, toch? Of heb je het over de classes? In dat geval, daar heb je gelijk in, maar aangezien de HTML door code gegenereerd gaat worden maak ik me daar niet zo druk om. Mij kost het geen extra typwerk, en het is later precies te stylen zoals gewenst (althans, dat wordt de bedoeling ).

CrashOne schreef op 08 november 2004 @ 01:09:
Komt door de float.

Eh, hoe en wat precies, dan?

Tevens is het netter om iets als dit te doen:
[...]
Die layers zijn nl nergens voor nodig.

?

Leuk, en bedankt voor de moeite. Maar ik ben koppig, en ik wil de labels links van de invoerelementen en de fouten erboven (of er achter, eventueel, maar dat gaat lekker configureerbaar worden).

Bedankt voor jullie reacties maar mijn verlossende antwoord heb ik nog niet gehad...

[X-Lars]

Verwijderd schreef op 08 november 2004 @ 01:32:
Bedankt, maar in jouw pagina komen de twee blokken onder elkaar terecht, terwijl ik ze langs elkaar wil hebben.

Dan haal je display:block; weg.

Hmm... valt wel mee, toch? Of heb je het over de classes? In dat geval, daar heb je gelijk in, maar aangezien de HTML door code gegenereerd gaat worden maak ik me daar niet zo druk om. Mij kost het geen extra typwerk, en het is later precies te stylen zoals gewenst (althans, dat wordt de bedoeling ).

Selectors en classes ja. Valt niet echt mee vind ik. Je begint wel met CSS, maar past het niet handig toe imho. En dat de code gegenereerd gaat worden is geen argument natuurlijk. Als je het doet, doe het dan goed Kost ook nog eens minder (type)werk.

[Verwijderd]

X-Lars schreef op 08 november 2004 @ 01:40:
[...]

Dan haal je display:block; weg.

Dan doe ik dat. En dan ben ik terug bij af, want hij doet nu precies hetzelfde als wat ik al had, met het verschil dat alle underscores door hyphens vervangen zijn.

Oh ja, de form_control_label div is weg; natuurlijk snap ik dat je die weg kan laten en het label zelf kan stylen. Maar al met al verandert dit niks aan het probleem.

(Overigens heb ik in verband met die underscores het volgende documentje opgeduikeld. Deze aanpassing is alleen blijkbaar nogal controversieel. Ik moet zeggen, ik wist het niet. Als programmeur voelt het gewoon natuurlijk om underscores te gebruiken om woorden te scheiden. Maar ik zal me beperken tot hyphens, dan.)

[...]

Selectors en classes ja. Valt niet echt mee vind ik. Je begint wel met CSS, maar past het niet handig toe imho. En dat de code gegenereerd gaat worden is geen argument natuurlijk. Als je het doet, doe het dan goed Kost ook nog eens minder (type)werk.

Okee. Zou je dan precies aan kunnen geven wat ik niet "handig" doe?

De bedoeling is dat ik straks de genererende code zonder aanpassing kan hergebruiken, en de presentatie helemaal regel via CSS (dat is toch de bedoeling van CSS?). Om te zorgen dat ik de code later niet aan hoef te passen, strooi ik nu dus liberaal met css klasses, zodat ik zo'n beetje elk element apart kan stylen, mocht ik daar behoefte aan hebben. Dat lijkt me toch niet een heel verkeerd uitgangspunt...

[ Voor 15% gewijzigd door Verwijderd op 08-11-2004 01:58 ]

[X-Lars]

Verwijderd schreef op 08 november 2004 @ 01:55:
[...]
Dan doe ik dat. En dan ben ik terug bij af, want hij doet nu precies hetzelfde als wat ik al had, met het verschil dat alle underscores door hyphens vervangen zijn.

Hoewel de form_control_label en form_control_control toch duidelijk sibling elementen zijn, menen zowel IE als FireFox dat het label-block IN het control-block getoond moet worden. Het control-block spant dus de hele breedte; het label-block en de error-label delen de eerste regel, en het invoerveld komt aan de linkerkant van de pagina terecht (in plaats van onder het error-label, waar hij eigenlijk thuishoort)

Je vond dit verwarrend. <label> en <input> elementen zijn in-line elementen. Maar die foutmelding probeer je onder het eerste label te krijgen door er een div omheen te plaatsen met een display:block. Dan zet je dus extra structuur in je document voor de layout. De idee van CSS is juist dat je content en layout van elkaar scheidt. Ik geef dan ook aan dat het niet nodig is om die extra div er omheen te zetten. In plaats daarvan geef je alleen het <label> met de foutmelding een class mee, zodat die afwijkend wordt weergegeven (eventueel met een display:block, dan gebeurt er ook wat jij wilt). Elementen zonder breedte nemen automatisch 100% van de containing block aan (dit klopt niet altijd, maar voor deze inline elementen in ieder geval wel). Daar is het element <fieldset> dan wel weer handig (zie CrashOne), die kun je een breedte geven (of eventueel het <form> element zelf).

Okee. Zou je dan precies aan kunnen geven wat ik niet "handig" doe?

De bedoeling is dat ik straks de genererende code zonder aanpassing kan hergebruiken, en de presentatie helemaal regel via CSS (dat is toch de bedoeling van CSS?). Om te zorgen dat ik de code later niet aan hoef te passen, strooi ik nu dus liberaal met css klasses, zodat ik zo'n beetje elk element apart kan stylen, mocht ik daar behoefte aan hebben. Dat lijkt me toch niet een heel verkeerd uitgangspunt...

Ik probeerde aan te geven dat je niet al die divs nodig hebt om toch alle elementen te kunnen bereiken middels CSS. Met het gebruik van selectors, i.p.v. al die divs te plaatsen (want dat begint weer te lijken op een table-structuur waarin de <td>'s vervangen worden door divs). Dus

Cascading Stylesheet:

form label {}

i.p.v.

Cascading Stylesheet:

.form_control_label {}

En een afwijkend label (error) geef je dan een class mee. Blijkbaar ben je betrokken bij de bouw van het CMS o.i.d., dus dan kun je ook die gegenereerde code wel beïnvloeden

[ Voor 6% gewijzigd door X-Lars op 08-11-2004 10:29 ]

[Verwijderd]

X-Lars schreef op 08 november 2004 @ 09:46:
[...]


[...]

Je vond dit verwarrend. <label> en <input> elementen zijn in-line elementen. Maar die foutmelding probeer je onder het eerste label te krijgen door er een div omheen te plaatsen met een display:block. Dan zet je dus extra structuur in je document voor de layout. De idee van CSS is juist dat je content en layout van elkaar scheidt. Ik geef dan ook aan dat het niet nodig is om die extra div er omheen te zetten. In plaats daarvan geef je alleen het <label> met de foutmelding een class mee, zodat die afwijkend wordt weergegeven (eventueel met een display:block, dan gebeurt er ook wat jij wilt). Elementen zonder breedte nemen automatisch 100% van de containing block aan (dit klopt niet altijd, maar voor deze inline elementen in ieder geval wel). Daar is het element <fieldset> dan wel weer handig (zie CrashOne), die kun je een breedte geven (of eventueel het <form> element zelf).
[...]

Ik probeerde aan te geven dat je niet al die divs nodig hebt om toch alle elementen te kunnen bereiken middels CSS. Met het gebruik van selectors, i.p.v. al die divs te plaatsen (want dat begint weer te lijken op een table-structuur waarin de <td>'s vervangen worden door divs). Dus

Cascading Stylesheet:

form label {}

i.p.v.

Cascading Stylesheet:

.form_control_label {}

En een afwijkend label (error) geef je dan een class mee. Blijkbaar ben je betrokken bij de bouw van het CMS o.i.d., dus dan kun je ook die gegenereerde code wel beïnvloeden

Maar goed, stel dat ik nu de hele rij een achtergrondkleur wil geven (of het blok waar de invoervelden in staan). Dan heb ik daar toch een div omheen nodig waar ik de achtergrondkleur op kan instellen, of niet dan?

In elk geval, bedankt voor je uitleg, maar mijn probleem is nog steeds niet opgelost. Vergeet anders even waar ik het voor ga gebruiken; de volgende code illustreert precies hetzelfde probleem:

HTML:

<html>
<head>
<style>
.one {
  float: left;
  background-color: green;
  width: 300px;
  height: 30px;
}

.two {
  background-color: yellow;
  height: 200px;
}
</style>
</head>
<body>
  <div class="one"></div>
  <div class="two"></div>
</body>
</html>

Onder IE werkt deze dus goed (vanwege de height properties), maar onder Firefox niet.

[X-Lars]

Verwijderd schreef op 08 november 2004 @ 15:02:
[...]


Maar goed, stel dat ik nu de hele rij een achtergrondkleur wil geven (of het blok waar de invoervelden in staan). Dan heb ik daar toch een div omheen nodig waar ik de achtergrondkleur op kan instellen, of niet dan?

Ligt eraan. Je kunt <form> of <fieldset> ook een background-color geven. Ja, als je elke rij apart een andere kleur wilt geven moet je overal een div omheen zetten. Kun je er net zo goed een table omheen bouwen. Maar alles net anders willen stylen is niet consistent, lijkt me ook niet gewenst. Mocht dat in jouw geval wel zo zijn: go ahead.

[...]
Onder IE werkt deze dus goed (vanwege de height properties), maar onder Firefox niet.

Zet eens [b][norml] [/][/] in zo'n div. En RTFM over widths, heights, divs en spans

[Verwijderd]

X-Lars schreef op 08 november 2004 @ 16:13:
Zet eens [b][norml] [/][/] in zo'n div. En RTFM over widths, heights, divs en spans

[norml] [/] in de div verandert er niks aan.

En ik vraag het net hier in lieu van het R van de FM omdat me dat veel tijd scheelt. Het is niet dat ik de moeite niet wil steken in het R van de FM, maar het is gortdroge kost en als iemand me er even op kan wijzen wat ik fout doe, dan weet ik het ook voor de toekomst.

[X-Lars]

Verwijderd schreef op 08 november 2004 @ 17:17:
[...]
[norml] [/] in de div verandert er niks aan.
[...]

Klopt, ik bedoel een float met width en zonder inhoud zie je niet in FF, wel in IE.