[CSS] input velden tov elkaar gelijk uitlijnen

[Verwijderd]

Ik ben momenteel bezig met een online enquete op te bouwen en wil nu mijn formulier eens positioneren zonder tabellen, daar zijn ze immers niet voor bedoeld.

Tot op heden ben ik op dit gekomen. Echter wil ik nu de input velden van Naam & E-mail adres vanaf de linkerkant gezien gelijk met elkaar uitlijnen. Heb me al gek gezocht en verschillende mogelijkheden gevonden en geprobeerd, maar het werkt vreemd genoeg niet. Iemand ervaring?

[Reinier]

Never mind

[ Voor 135% gewijzigd door Reinier op 19-01-2007 15:27 ]

[truegrit]

HTML:

<!-- van http://www.squarepants.nl/tweakers/form/ -->
<FORM action="..." method="post">
<TABLE>
  <TR>
    <TD><LABEL for="n">Naam:</LABEL>
    <TD><INPUT type="text" name="n" id="n">
  <TR>
    <TD><LABEL for="e">Emailadres:</LABEL>
    <TD><INPUT type="text" name="e" id="e">
</TABLE>

wat moet ik hier nou van denken? misschien voortaan een mooier voorbeeldje geven

[ Voor 7% gewijzigd door truegrit op 19-01-2007 15:27 ]

[Reinier]

Ik heb een voorbeeld van w3.org gebruikt waarin letterlijk stond dat de labels gebruikt werden om de inputvelden uit te lijnen. Alleen zag ik (copy-paste ) niet dat het gewoon een tabel was

[1st_Ro]

truegrit, wel even lezen: "...wil nu mijn formulier eens positioneren zonder tabellen..."
Sorry, zag niet je reageerde op Reinier!

Je zal waarschijnlijk met spans/divs moeten werken die je float:left meegeeft. Dat lijkt mij de meest logische oplossing, tenzij iemand anders iets beters weet.

Ik gooi overigens per regel (dus label + veld) er meestal een extra div omheen, zodat ook meerlijnige onderdelen zoals textareas geen problemen veroorzaken.

Rm-rf, ja, dat kan ook

[ Voor 9% gewijzigd door 1st_Ro op 19-01-2007 15:31 ]

[RM-rf]

code:

<fieldset>
<legend>Persoonlijke gegevens</legend>
    <ul>    
              <li><label for="" naam="">Naam:</label>
                <input name="naam" type="text"> 
                    </li>
              <li><label for="" naam="">E-mail adres:</label>
                <input name="mailadres" type="text">    </li>
    </ul>           
</fieldset>

en dan met de CSS

Cascading Stylesheet:

LABEL { display: block; width: 200px; float: left;}

[judgem]

Check deze link anders maar eens: http://www.alistapart.com/articles/prettyaccessibleforms

Succes!

[esf]

Je kan gewoon de label elementen dezelfde breedte geven, dan worden de input elementen goed uitgelijnd

[Reinier]

Herkansing:
http://www.squarepants.nl/tweakers/form/

Van http://www.quirksmode.org/css/forms.html

[RM-rf]

Overigens, ik betwijfel wel een beetje of het nu werkelijk zo is dat een formulier géén tabulaire data bevat ....

deels kun je juist zeggen dat het deze nl. wel bevat ... een kolom met de labels en inputbeschrijvingen, én een kolom met de betreffende input elementen.met een tabel zouden zowel de labels als de inputs ook aan elkaar gerelateerd zijn wat volgens mij ook semantisch prima klopt.

esf schreef op vrijdag 19 januari 2007 @ 15:32:
Je kan gewoon de label elementen dezelfde breedte geven, dan worden de input elementen goed uitgelijnd

enkel als ze ook een 'display: block of inline-block hebben .. default hebben Labels een display: inline, wat ook betekent dat ze geen gedefinieerde breedte kunnen hebben.

[ Voor 32% gewijzigd door RM-rf op 19-01-2007 15:35 ]

[judgem]

inline-block

Die is helaas IE-only

[Reinier]

judgem schreef op vrijdag 19 januari 2007 @ 15:45:
[...]

Die is helaas IE-only

Inderdaad, en dat fixen ze dan met Javascript. Dan vind ik mijn manier eleganter.

[RM-rf]

judgem schreef op vrijdag 19 januari 2007 @ 15:45:
[...]

Die is helaas IE-only

nee, hij is hooguit nog niet door Mozilla geimplementeerd, verder is het een correcte valide CSS2-waarde, die niet proprietair is en naast msie7 ook door safari en Opera ondersteund wordt naar ik meen.

[Cobalt]

dubbel post

[ Voor 98% gewijzigd door Cobalt op 19-01-2007 16:18 ]

[Verwijderd]

Reinier schreef op vrijdag 19 januari 2007 @ 15:33:
Herkansing:
http://www.squarepants.nl/tweakers/form/

Van http://www.quirksmode.org/css/forms.html

Hartelijk dank werkt perfect!

[Cobalt]

HTML:

        <FORM NAME=""  ID=""  METHOD="post"  ENCTYPE="application/x-www-form-urlencoded"  ACTION="" >
            <DL>
              <DT>
                <LABEL></LABEL><SPAN cLASS="hint"></SPAN>
              </DT>
              <DD>
                <INPUT TYPE="text"  NAME=""  ID="" >
              </DD>
              <DT>
                <LABEL></LABEL><SPAN CLASS="hint"></SPAN>
              </DT>
              <DD>
                <INPUT TYPE="text"  NAME=""  ID="" >
              </DD>
              <DD></DD>
            </DL>
            <INPUT NAME=""  ID=""  CLASS="button"  TYPE="submit"  VALUE="" >
          </FORM>

Cascading Stylesheet:

    label {
        font-size:medium;
        font-weight: bold;
    }
    .hint{
        padding-left:5px;
        font-size:small;
    }   
    dl{ 
        width: 100%;
        margin-bottom: 0;   
        padding: 1%;
        box-sizing: border-box; /* css 3 */
        -moz-box-sizing: border-box; /* fix voor FireFox */
    }
    dd{
        margin:0;
        display: block;
        width: 100%;
    }

Het boven staande is wellicht een alternative oplossing. Zonder css staat de dd alleen één tab naar rechts. Maar dat is met de bovenstaande css dd{} gefixed

[apokalypse]

RM-rf schreef op vrijdag 19 januari 2007 @ 16:02:
[...]


nee, hij is hooguit nog niet door Mozilla geimplementeerd, verder is het een correcte valide CSS2-waarde, die niet proprietair is en naast msie7 ook door safari en Opera ondersteund wordt naar ik meen.

niks IE-only
http://www.thismuchiknow.co.uk/?p=7

maar gebruik dan -moz-inline-box ipv -moz-inline-block

[ Voor 21% gewijzigd door apokalypse op 20-01-2007 15:34 ]

[Verwijderd]

Ik heb nog een probleem. Mijn layout ziet er in Firefox 2 perfect uit, precies zoals ik hem hebben wil. Echter IE 6 en & verkrachten de hele zaak iemand een idee hoe dit komt en hoe ik mn layout er zowel in Firefox als IE er hetzelfde uit kan laten zien?

Hier staat de layout

[Reinier]

Je kan je breaks een clear: both geven, dan lijkt het te werken:
http://www.squarepants.nl/tweakers/form/

[XWB]

Hoeft niet, een overflow: hidden op het floating element zelf moet volstaan.

[Verwijderd]

Hoe moet ik vragen met een likert schaal gebaseerd antwoord nu opmaken om html zo correct mogelijk te gebruiken? Mag dat in tabellen of moet dat met span's of div's geregeld worden?

[mithras]

Verwijderd schreef op maandag 22 januari 2007 @ 08:18:
Hoe moet ik vragen met een likert schaal gebaseerd antwoord nu opmaken om html zo correct mogelijk te gebruiken? Mag dat in tabellen of moet dat met span's of div's geregeld worden?

Wat zou er mis zijn met de manier zoals je ook bij man/vrouw hebt gedaan? Alleen dan niet man/vrouw, maar meerdere opties.
Ik heb geen IE tot mn beschikking, dus ook geen idee of IE juist je lay-out verneukt met deze vraag waardoor dit natuurlijk niet meer opgaat.

[RM-rf]

Verwijderd schreef op maandag 22 januari 2007 @ 08:18:
Hoe moet ik vragen met een likert schaal gebaseerd antwoord nu opmaken om html zo correct mogelijk te gebruiken? Mag dat in tabellen of moet dat met span's of div's geregeld worden?

lijkt me een prima voorbeeld waar het gebruik van een tabel wel te rechtvaardigen is, omdat er duidelijk sprake is vabn meerdere verticale kolommen.
anderszijds, de verwacht dat degene die de lijst invult duidelijk de volgorde 'vraaglezen' - 'antwoorden lezen', 'antwoord uitkiezen' > 'door naar volgende vraag' aanhoudt...

dan zou ook:

HTML:

<ul>
 <li> Ik voel me goed achter het stuur: 
   <ol>
        <li> <input type="radio" name="goed_achter_stuur" value="1" id="vraag1optie1"> 
               <label for="vraag1optie1">Helemaal eens </label>
        <li> <input type="radio" name="goed_achter_stuur" value="2" id="vraag1optie2"> 
               <label for="vraag1optie2">eens  </label>
        <li> <input type="radio" name="goed_achter_stuur" value="3" id="vraag1optie3"> 
               <label for="vraag1optie3">onverschillig  </label>
        <li> <input type="radio" name="goed_achter_stuur" value="4" id="vraag1optie4"> 
               <label for="vraag1optie4">oneens  </label>
        <li> <input type="radio" name="goed_achter_stuur" value="5" id="vraag1optie5"> 
               <label for="vraag1optie5">helemaal oneens </label>
   </ol>
</ul>

een prima werkbare oplossing kunnen zijn