Keskustelu: Nettisivujen teko: Tekstin tasasus CSS:llä

Onko css:llä mahdollista tasata tekstiä esim. diveissä, kuten tableissa menee automaattisesti?

etunimi     [tekstiboksi]
sukunimi	[tekstiboksi]
			[submit]

Teuron esimerkki vaan siirtää tekstikentän sisällä olevan tekstin oikeaan reunaan. Katsoppa Merrin koodivinkki palstoista, sitä soveltamalla pystyt saamaan kätevästi tuollaisen ulkoasun.

Yritän siis etsiä vaihtoehtoista tapaa formien tasaamiseen tableilla. Tuo divien kanssa säätäminen tuo vaan enemmän säätöä.

Teuron esimerkki ei myöskään toimi, koska se ei tasaa mitään.

PhpBB3 foorumeissa prosilver layoutissa on käytetty ovelasti listaelementtejä, jos sitä haluaa kokeilla kannattaa tutkailla foorumilistausten lähekoodeja. Kuitenkin pohjarakenne olisi suurinpiirtein tällainen:

<ul>
	<li>
		<dl>
			<dt>Etunimi</dt>
			<dd><input type="text" name="etunimi" /></dd>
		</dl>
	</li>
</ul>

Totesinpahan vaan omaa foorumiani tehdessäni kyseisen tavan olevan älyttömän rasittava toteuttaa (isommassa skaalassa) :P

Ei tarvitse tehdä noin monimutkaisesti.

<form>
    <h2>Minun lomake</h2>
    <fieldset><legend></legend>
        <h3>Perussetti</h3>
        <p>
            <label for="yksi">Yksi:</label>
            <input id="yksi" type="text" name="yksi" value="" />
        </p>
        <p>
            <label for="kaksi">Kaksi:</label>
            <input id="kaksi" type="text" name="kaksi" value="" />
        </p>
    </fieldset>
    <p>
        <button type="submit">Lähetä!</button>
    </p>
</form>

Seuraavasta CSS:stä vain kohta fieldset label on oikeasti olennainen:

/* legendien tyylittely on niin rajoitettua, että on kivempi käyttää oikeita otsikoita */
legend { display: none; }

/* korostetaan hiirelle, että näitä voi klikata */
button,label { cursor: pointer; }

/* tehdään vain fieldsettien alaisille labeleille näin */
fieldset label {
    display: block;
    float: left;
    width: 10em;
}

/* jos tahdotaan säätää labeleille vaikka jokin pieni ohjeteksti toiselle riville, niin tämä on hyödyllinen */
fieldset p {
    clear: both;
}

Eli lomakkeet on helppoa ja selvää pässinlihaa ilman taulukoita :)

HTML5:ssä small-elementin merkitystä on muuten muutettu, niin sitä voi myös käyttää lomakkeissa vaikka noiden kentän täyttämisen ohjeiden antamiseen. Esim:

        <p>
            <label for="yksi">Yksi:</label>
            <input id="yksi" type="text" name="yksi" value="" />
            <small>Tähän kenttään tulee kirjoittaa "sormus" ilman lainausmerkkejä.</small>
        </p>

/* ja tyyli: */
fieldset small {
    display: block;
    padding: 5px;
}

Jos labelille määrittää vähänkään alapaddingia, niin sitten small-elementti tasautuu samasta kohdasta kuin input-elementti. Jos sitä ei määritä, niin sitten small-elementti alkaa labelin alapuolelta.

Tuo labeli sopii käyttööni kyllä loistavasti. Olen aikaisemmin miettinyt jotain samantapaista, mutta jättänyt sitten käyttämättä sen takia kun tuo labeli ei veny tuon tekstin kanssa. Noh, kai sen voi sitten aina formikohtaisesti määrittää sen leveyden css:ään kun kerran säästyy tablesotkuilta :)

Olen huomannut että tietty kiinteä leveys toimii ihan hyvin kunhan se ei ole liian rajoitettu. 10em taitaa olla tuollainen hyvin toimiva vakioleveys (em suhteutuu fonttikoon mukaan). Muutenkinhan noiden kenttäotsikoiden on hyvä olla suht lyhyitä, tarkennuksia varten on sitten hyvä heittää tuo erillinen kuvaus.

Toinen vaihtoehto muuten tuohon p-elementtien siirtoon tarpeeksi kauas edellisen floatatun elementin vaikutuksesta on tehdä clearin sijasta tämmöinen määritys:

fieldset p {
    overflow: hidden;
}

Tämä saa p-elementin olemaan vähintäänkin floatatun labelin korkuinen. Haittapuoli on se, että p-elementin ulkopuolelle ei voi sijoitella elementin sisäisiä juttuja, esim. jos jQueryllä vaikka tekee jonkin hienon tooltipin niin se jäisi todennäköisesti pois näkyviltä tai näkyisi vain osittain.

Vaihtoehto B tälle olisi:

fieldset p {
    width: 100%;
}

fieldset p:after {
    clear: both;
    content: '';
    display: block;
}

Width-määritys IE6 ja IE7 takia, muut selaimet pärjää tuolla standardimmalla tavalla luoda pseudoelementti. Ja tämän jälkeen ei tule noita overflow:n ongelmia.

Komeista lomakkeista lisää:

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

http://sprawsm.com/uni-form/