Keskustelu: Nettisivujen teko: div-taiton opiskelua

$i = 0;
for($i = 0; $i <= 15; $i++){
  echo '<div align="left;" class="divHenkilo"><input type="text" name="henkilo_'.$i.' value="" style="width:100%; border:0px;"></div>';

  echo '<div class="divHenkilo"><input type="text" name="henkilotunnus_'.$i.' value="" style="width:100%; border:0px;"></div>';
}

?>

Miten saan laitettua esimerkissä olevat divit tulostumaan vierekkäin. Nythän ne tulostuu allekkain.

Tarkoitus olisi saada seuraavanlainen taulukko aikaan diveillä

Henkilö, henkilötunnus, 1,2,3,4,5,6,7,8,9,10, jne.. sen mukaan montako päivää kuussa on.

Henkilöitä olisi tarkoitus saada n. 15 allekkain. Ennenkuin alan miettimään tuota kalenteria rinnalle diveillä, olisi varmaan syytä saada edes. henkilö, sekä henkilötunnus vierekkäin.

Jos on tarkoitus tehdä taulukko, tee sitten taulukko äläkä kikkaile diveillä. Divien ei ole tarkoitus korvata taulukoita.

Jos on tarkoitus laittaa muuten vain asioita yhdelle riville peräkkäin, laita ne yhdelle riville ja vasta koko rivin ympärille div tai p ja sille tarvittaessa CSS:llä white-space: nowrap.

Jos välttämättä haluat kikkailla vierekkäisillä diveillä, laita CSS:llä float: left.

HTML:ssä ei ole divillä tuollaista align-attribuuttia, ota se joka tapauksessa pois.

Otsikosta: Ei ole (tai ei pitäisi olla) sellaista asiaa kuin div-taitto, vaan pitäisi puhua vaikka CSS-taitosta. "Div-taitto" on yleinen väärinkäsitys, joka seuraa varmaankin siitä, että taulukkotaittoon tottuneet yrittävät hakea taulukoiden väärinkäytön tilalle jonkin yksittäisen joka paikkaan sopivan elementin. Hienoja ulkoasuja voi tehdä kokonaan ilman divejäkin.

Yksittäisiä input-kenttiä ei ole tarpeen kääriä diveihin. Ne voi asemoida CSS:llä suoraankin. Diveillä ei ole attribuuttia align eikä arvo 'left;' olisi validi vaikka align olisikin.

Yleisesti ottaen kaksi diviä saa vierekkäin helpoiten joko määrittämällä molemmille CSS:ssä "float: left" tai "display: inline-block". Mutta edelleen: älä tee näin vaan ota turhat divit pois ja käytä CSS:ää suoraan inputteihin.

Kiitoksia nopeasta toiminnasta :

Tuon align atribuutin mokan otan heti pois, se oli vain epätoivoisen yrityksen ylijäämä palanen ;-)

Taidan jättää "Div-taittelun" ja alkaa käyttämään vain raakasti väärin nuita taulukoita.

Tuo oli hyvä heitto tuo, että jätä turhat divit pois. Aivot kun jää putkiaivoille, niin ne jää ;-)

Olet ilmeisesti ymmärtänyt jotain pahasti väärin sekä taulukoista että diveistä.

Taulukko on sellainen, jossa on rivejä ja sarakkeita ja johon voi keksiä järkevät otsikot. Jos siis tarkoitus on laittaa 15 riviä, jotka kaikki sisältävät nimen, henkilötunnuksen ja samanlaisen listan kuukauden päiviä, taulukko kuulostaisi minusta olevan juuri oikea ratkaisu.

Taulukon väärinkäyttö taas on sitä, että yritetään asetella taulukoiden avulla jotain muuta kuin kuvatun kaltaista taulukkoon sopivaa tietoa. Esimerkiksi sivuston logo, linkkipalkki, sivupalkki ja sisältö eivät ole järkevää taulukkotietoa.

En laskisi ryhmää input-kenttiäkään taulukoitavaksi dataksi. Kokonaisen rivin inputit voi kyllä ryhmitellä divillä.

Luokkien nimet kannattaisi myös pitää siisteinä ja semanttisina. Ei ole kovin perusteltua nimetä luokkaa "divHenkiloksi", kun ihan yhtä hyvin CSS:ssä voi viitata luokkaan muodossa "div.henkilo { }", jos on tarpeen tunnustaa elementin tyyppiä. Tuossa esimerkissäsi olisi selvempää antaa luokalle nimeksi "henkilotiedot".

Esim.

<form>
  <div>
    <input>
    <input>
  </div>
  <div>
   <input>
   <input>
  </div>
  <div>
    <button>Lähetä</button>
    <button type="reset">Tyhjennä</button>
  </div>
</form>