[css] Invoervelden met prefix en postfix uitlijnen

[Moolie]

Ik ben bezig met een aantal schermen met invoervelden. Elk invoerveld kan een prefix en een postfix hebben, en die moeten natuurlijk vlak voor respectievelijk vlak na het invoerveld staan, zo dus:

Omschrijving1	<korte prefix>	<invoerveld>	<korte postfix>
Omschrijving2	<een wat langere prefix>	<invoerveld>	<een wat langere postfix>
Omschrijving3	<prefix>	<invoerveld>	<postfix>

De invoervelden worden nu vertikaal onder elkaar geplaatst door een absolute positie op te geven. De prefix en postfix zijn echter relatief, waardoor ze niet meer netjes voor/achter het invoerveld staan.

Ik heb al enige tijd gezocht in nieuwsgroepen en hier op GOT, maar nog niet kunnen vinden wat ik wil. Ik wil graag weten of dit mogelijk is in CSS2, dus zonder gebruik van tabellen of CSS 3.

Hieronder de html en css die van belang is:

HTML:

<div id="inputcontainer1">
    <label>Omschrijving1</label>
    <span class="input">
        <span class="prefix">prefix</span>
        <input name="invoerveld1" id="invoerveld1" value="70"/>
        <span class="postfix">postfix</span>
    </span>
</div>
<div id="inputcontainer2">
    <label>Omschrijving2</label>
    <span class="input">
        <span class="prefix">prefix</span>
        <input name="invoerveld2" id="invoerveld2" value="70"/>
        <span class="postfix">postfix</span>
    </span>
</div>

Cascading Stylesheet:

input
{
    position:absolute;
    left:340px;
}

[MtC]

Ik zou in dit geval gewoon gebruik maken van tabellen. Als je toch css gaat gebruiken, wil je natuurlijk ook dat je formulieren er netjes uitzien in browsers die geen css ondersteunen.

[Moolie]

Ik geef toe dat in dit geval tabellen prima voldoen , ik wil alleen weten of het zonder tabel ook kan.

[Verwijderd]

met display table-row en table-cell zou je zoiets kunnen oplossen, maar dat werkt dus helaas niet overal. display: inline-block zou ook kunnen (dan heb je wel niet een meerekkende breedte, maar wel een ingestelde), maar dat werkt ook niet overal.

Dus dan toch maar een tabel denk ik (zou ik doen iig)

[Rowanov]

Het is ook mogelijk dat je het met javascript laat regelen; je loopt door de prefixen en selecteert de grootste, waarna je de rest daaraan aanpast. Als je het netjes en unobtrusive doet, hebben mensen met een niet javascript-ondersteunende browser er geen last van omdat hij dan terugvalt op de css default. Dat houdt wel in dat zij je pagina ietwat anders voorgeschoteld krijgen dan gebruikers met javascript. Een ander nadeel is misschien de extra regels code, maar ik kan me voorstellen dat dat je site noch je dataverkeer nekt Het voordeel wat ik zie is dat je code net en overzichtelijk blijft en je geen tabel hoeft te gebruiken, want ik denk dat semantisch een tabel hier niet goed past

Dit is allemaal gemierenneuk in de marge natuurlijk

[Technicality]

Rowanov schreef op woensdag 18 oktober 2006 @ 17:52:
Het is ook mogelijk dat je het met javascript laat regelen; je loopt door de prefixen en selecteert de grootste, waarna je de rest daaraan aanpast. Als je het netjes en unobtrusive doet, hebben mensen met een niet javascript-ondersteunende browser er geen last van omdat hij dan terugvalt op de css default. Dat houdt wel in dat zij je pagina ietwat anders voorgeschoteld krijgen dan gebruikers met javascript. Een ander nadeel is misschien de extra regels code, maar ik kan me voorstellen dat dat je site noch je dataverkeer nekt Het voordeel wat ik zie is dat je code net en overzichtelijk blijft en je geen tabel hoeft te gebruiken, want ik denk dat semantisch een tabel hier niet goed past

Dit is allemaal gemierenneuk in de marge natuurlijk

Hoezo zou een tabel hier niet semantisch goed passen? Het gaat hier toch om 2 soorten "data": een beschrijving en een input?

[Verwijderd]

http://www.alistapart.com/articles/prettyaccessibleforms/

Geen postfix, wel een hoop nuttige info, en de rest is er wel bij te verzinnen!

Succes!

[Rowanov]

Technicality schreef op woensdag 18 oktober 2006 @ 17:54:
[...]

Hoezo zou een tabel hier niet semantisch goed passen? Het gaat hier toch om 2 soorten "data": een beschrijving en een input?

Dat is meer een definition list dan tabulaire data, maar het is wel een discussiepunt. Het meest kosten efficient is toch zeker een tabel.

[Moolie]

Verwijderd schreef op woensdag 18 oktober 2006 @ 18:04:
http://www.alistapart.com/articles/prettyaccessibleforms/

Geen postfix, wel een hoop nuttige info, en de rest is er wel bij te verzinnen!

Succes!

Bedankt voor de link, ik ga even hiermee stoeien