Keskustelu: Nettisivujen teko: Taulukkomaisen lomakkeen teko css:llä ilman html muokkasuta

Eli minulla on runsaasti tällaista html:ää, jossa haluaisin saada otsikot syöttölaatikon vasemmalle puolelle, mutta ei tunnu onnistuvan kovin helposti.

Idea olisi siis muokata vain CSS:ää ettei HTML:ään tarvitsisi koskea.

<div class="laatikko">
    <div class="editor-label">
        <label for="Tunnus">Käyttäjätunnus</label>
    </div>
    <div class="editor-field">
        <input id="Tunnus" name="Tunnus" type="text" value="Grez" />
    </div>

    <div class="editor-label">
        <label for="Etunimi">Etunimi</label>
    </div>
    <div class="editor-field">
        <input id="Etunimi" name="Etunimi" type="text" value="Grez" />
        <br />Etunimi ei kelpaa
    </div>
</div>

Olen kokeillut muutamaa erilaista tapaa tehdä asia, mutta nämä ei vaan tuota tyydyttävää lopputulosta...

http://jsfiddle.net/dchP2/
Muuten hyvä, mutta oikeanpuolisesta sarakkeesta vain ensimmäinen rivi pysyy oikealla.

http://jsfiddle.net/dchP2/1/
Muuten hyvä, mutta koko setti ei vie tilaa, jolloin ympärillä oleva laatikko pienenee.

http://jsfiddle.net/dchP2/2/
Muuten hyvä mutta pitäisi saada kukin kokonaisuus omalle rivilleen.

Ideoita?

.laatikko {
    background-color: #ccc;
    padding: 1em;
    float: left;
}


.laatikko:after {
    content: '';
}

Käviskö tämmönen päivitys tuohon keskimmäiseen?

Itse asiassa toimii kyllä tuohon esimerkkiin, mutta laatikko oli oikeastaan vain demonstroimassa tuota että miten elementit vie tilaa. Eli laatikkoon ei voi tehdä muutoksia, kun sitä ei tuollaisenaan ole olemassa varsinaisessa toteutuksessa. :(

Mutta toki jos mitään muuta tapaa ei löydy, niin täytyy harkita tuota.

Muuta htmlää vähäsen

http://jsfiddle.net/dchP2/33/

Replace allilla textieditorissa vaikka

.editor-label,
.editor-field {
  float: left;
  margin-bottom: 5px;
}

.editor-label {
  width: 10em;
  clear: left;
}

Näin sen olen itse tehnyt jo vuosien ajan. Formeihin on ihan turha tunkea muuta roskaa kuin labelit ja inputit. Fieldsetillä voi ryhmitellä suurempaa joukkoa syöttökenttiä semanttisesti.

Olet määrittänyt absoluuttisen leveyden label-laatikolle, joten oletan, että tämä on tapauksessasi hyväksyttävää. Sopisiko vain laittaa label floatilla vasemmalle ja fieldille riittävä (labelia suurempi) marginaali?

http://jsfiddle.net/sGVkb/1/

(Oho, tuli sitä tahtia vastauksia, että kommentoin äsken kelle sattui. nyt korjattu)

Esajeejee:

Kuten sanoin alkuperäisessä postauksessa:
Idea olisi siis muokata vain CSS:ää ettei HTML:ään tarvitsisi koskea.

Eli ihan triviaalisti olisin pystynyt muuttamaan tuon HTML:n, mutta kun niitä on ziljoona enkä haluaisi säätää jokaista uuteen uskoon.

Metabolix:

Näinhän se toimii. Itse asiassa tuo ajatus tuli mieleen aikaisemmin itselläkin, kun olin kokkaillessa päivällistä, mutta unohdin sitten testata sitä :D

Ja tosiaan pikselimääräinen leveys oli jäänyt epähuomiossa jostain testistä, korjasin senkin pois.

Kiitos.

Alchemist:
Siis tuohan on käytännössä sama kuin oma toinen esimerkkini. Mutta tosiaan ei väliä koska Metabolixin esimerkillä lähti toimimaan.

Ei niitä divejä tarvitse poistaa, tuo toimii ihan hyvin niiden kanssakin. Ne vain ovat turhaa roskaa, koska niitä ei käytetä mihinkään.

Kaikissa tavoissa on jotain vikaa, myös siinä ilmeisimmässä, jota ei ole mainittu (CSS:n table-ominaisuuksien käyttö – muuten hyvä mutta ei toimi vanhoilla selaimilla). Menetelmä, jossa labeleille asetetaan kiinteä leveys ja float: left lienee yksinkertaisin, ja siitä on yksinkertaista osoittaa sen perusvika: pitää asettaa kiinteä leveys. Vaikka se kuinka asetetaan em-yksikköä käyttäen, se on joustamaton, koska a) sama sana vie eri määrän leveyttä eri fonteissa (myös suhteessa em-yksikköön) ja b) pitää laskea tai arvata jokin maksimileveys, ja pitää muistaa muuttaa sitä, jos label-tekstejä muutetaan.

Table-merkkauksen lisääminen olisi kieltämättä hiukan työlästä, jos lomakkeita on paljon, mutta kyllä esimerkiksi noiden leveyksien säätäminenkin vie aikansa, jos se tehdään suunnilleen oikein.