Keskustelu: Nettisivujen teko: Sivut DIV:illä

Terves
Haluan nyt tehdä pohjan kunnolla ja "oikeaoppisesti" heti kerralla ettei tarvitse jälkikäteen tehdä remonttia. Eli tarkoituksena muuttaa nykyiset sivut käyttämään diviä table tr td viritysten sijaan. Pohja sivusta:

http://img135.imageshack.us/img135/8593/example4ze.jpg

index.php
--------

	<div>
		<div id="left_shadow">vasen</div>

		<div id="center">
			<div id="logo"> logo</div>
			<div id="menu"> menu</div>
			<div id="content"> content</div>
			<div id="footer"> footer</div>
		</div>

		<div id="right_shadow">oikea</div>
	</div>

style.css
--------

body, html {
			margin: 0;
			padding: 0;

			height: 100%;

			font: 12px/18px arial, verdana, sans-serif;
			color: #353535;

			background-color: #EEDFBE;
}

#left_shadow {
			background: pink;
			width: 22px;
			height: 100%;
			float: left;
}

#right_shadow {
			background: lightyellow;
			width: 22px;
			height: 100%;
			float: left;
}

#center {
			 background: lightgreen;
			 width: 740px;
			 height: 100%;
			 float: left;
}

#logo {
			 background: lightgreen;
			 width: 740px;
			 height: 100%;
			 float: both;
}

#menu {
			 background: lightgreen;
			 width: 740px;
			 height: 100%;
			 float: both;
}

#content {
			 background: lightgreen;
			 width: 740px;
			 height: 100%;
			 float: both;
}

#footer {
			 background: lightgreen;
			 width: 740px;
			 height: 100%;
			 float: both;
}

näin olen lähtenyt sivua kasaamaan. Eli kokemusta DIV:ien käytöstä ei ole vaan 10minuutin tutkiskelulla saatu aikaiseksi moista koodia. Risut/ruusut, vinkit, neuvot kaikki kotiinpäin

Nooh jotain tuosta voisi sanoa.

Nämä menu, content, logo jne... id:istä puuttuu paikka. left,top ovat tärkeimmät, ja saat divit sijoittumaan toisiinsa erilailla position määritteellä, joka ottaa arvokseen absolute, fixed, relative ja none(ainakin).

EDIT. Niin ja googlella löytyy erittäin hyviä oppaita hakusanoilla "css opas", tarpeeksi hyviä tuon laisen sivun tekemiseen.

Ihan vain edelliseen viestiin, kyllä ne divit voi sijoitella muutenkin kuin absoluuttisesti (kuten ensimmäisen viestin kirjoittajakin on tehnyt).

Tässä on kuitenkin huomattavissa selkeä historia vielä taulukoiden puolelle. Suurin ongelmahan taulukkotaitossa on se, että rakenteen merkitystä ei määritellä kunnolla vaan HTML:ssä lukee ja asetetaan tyylillisiä seikkoja. Jos lähdetään "oikeaoppisuuden" linjalle, niin voidaan lähteä saman tien karsimaan ajatukset siitä, että tehdään HTML CSS:n ehdoilla. Jos HTML tehdään tyylin ehdoilla, siirrytään herkästi divinismiin eli asetetaan sivulle ylimääräisiä elementtejä CSS:n tarpeiden mukaan. "Oikeaoppisuus" vaatii sen, että HTML ja sisältö tulee ensin. Ylimääräinen merkkaus revitään pois ja jäljelle jää puhdas rakenne ja sisältö.

Tällä hetkellä CSS:n rajoituksista johtuen ei vieläkään aivan kaikista "turhista" diveistä pääse kaikissa tapauksissa eroon. Divien roolin voi kuitenkin miettiä selkeästi näin: jaetaan sivun sisältö osiin ja diveille annetaan rooli erilaisten sisältöjen mukaan. Tätä olet jo tehnytkin: #logo, #menu, #content ja #footer ovat selkeitä sisältöön viittaavia jakoja. #logolle voisi myös miettiä sopivampaa tagia, sellainen kun kerran löytyy: h1 eli ylimmän tason otsikko. Se kuvaa selkeästi sitä, mitä logo tulee sisältämään: sivu(sto)n nimen tai sivu(sto)n otsikon. Se kuvaa minkä tai mitä sivu sisältää.

Mietitäänpä seuraavaksi miten rakenne voidaan tässä tapauksessa sijoittaa uusiksi ja mitä rajoituksia ja mahdollisuuksia CSS meille asettaa. Ehkä huomattavin seikka sivussa on, että se on aina tasalevyinen. Pikselimitat ovat aina samat leveyssuunnassa. Tämä antaa meille mahdollisuuden toteuttaa sekä vasen että oikea laita samalla taustakuvalla (tai asettamalla väri vain kerran tai asettamalla sopivaa borderia). Tarvitsemme tätä varten vain yhden divin, joka voidaan nimetä vaikka nimellä #document: se tulee sisältämään kaiken muun.

<div id="document">
    Kaikki muu tähän.
</div>

...

#document {
    background : väri url('taustakuva.png') repeat-y center top;
    color : väri;
    padding : 0 22px;
    width : 740px;
}

Seuraavaksi meillä onkin enää helppo työ jäljellä: kaikki loput elementit tulevat loogisesti #documentin sisälle ja kulkevat ylhäältä alas. Ei tarvitse miettiä sen kummemmin asetteluja, kun divit varaavat automaattisesti sen oikean määrän tilaa leveyssuunnassa.

Menuhan tulee tietysti tehdä listana, koska valikko on aina lista. Loput on oikeastaan jo itsestäänselvää, koska kaikki ylimääräinen on karsiutuu helposti pois. Lopullinen HTML olisi siis vaikka tällaista tyyliä:

<body>
    <div id="document">
        <!-- span antaa mahdollisuuden piilottaa tekstin;
        CSS:ssä ei ole mahdollisuutta piilottaa tekstiä muulla tavoin -->
        <h1 id="logo"><span>Logo</span></h1>
        <div id="menu">
            <ul>
                <li><a href="/">Etusivu</a></li>
                <li><a href="/muuta/">Muuta</a></li>
            </ul>
       </div>
       <div id="content">
            <h1>Tämä sivu on hyvä.</h1>
            <p>Sisältöä.</p>
       </div>
       <div id="footer">
            <p>Tämän sivun olen tehnyt minä.</p>
       </div>
    </div>
</body>

Lopputuloksena meillä onkin sitten selkeärakenteinen HTML jota on helppo lukea ja josta on tyylitiedot poistettu kokonaan. HTML-sivun tulee olla selkeä ja luettava myös ilman tyylitiedostoa. HTML ja sisältö ensin, tyyli sitten "liimataan päälle".

Oletin sitten tässä että käytössä on strict-muotoinen DOCTYPE ja että selain kytkeytyy standardimoodiin. IE asettaa rajoja, esim. DOCTYPEn täytyy olla ensimmäisellä rivillä, jotta standardimoodi aktivoituu. Padding ja width määräytyvät eri tavalla "quirksmodessa".

Lopuksi voidaan lisätä mukaan JavaScriptiäkin, kunhan pitää huolta siitä ettei sivun luettavuus ja sivujen selattavuus kärsi vaikka JavaScript olisi kytkettynä pois päältä. Monilla tuntuu olevan edelleen tapana mustamaalata JavaScriptiä, mutta ei JavaScriptissäkään mitään vikaa ole jos sitä käyttää siihen mihin se on tarkoitettu.

Oho. Johan kirjoitin nopeasti pitkän viestin...