sivut.web

ohjeita web-sivuston tekijälle

etusivu html javascript perl php grafiikka sivusto palvelin sanasto info palaute

HTML: Palstoja tyylipohjilla

Tyylipohjat tuovat uusia mahdollisuuksia web-sivun palstoittamiseen. Tyylipohjien avulla voidaan mikä tahansa elementti sijoittaa web-sivulla mihin tahansa kohtaan, sillä tyylipohjien asemointi toimii pikselintarkasti. Tässä vinkissä esitellään tekniikka monipalstaisen sivun tekemiseen.

Sivujen palstoitus on ennen tyylipohjia rakentunut kehyksien ja taulukkojen varaan. Ei ole suositeltavaa käyttää kehyksiä, sillä ne muun muassa rikkovat sivujen rakenteen, estävät hakukoneiden toimintaa ja vaikeuttavat tulostusta. Taulukkojen käyttöä ulkoasun luomiseen ei voi suositella, sillä taulukot ovat olemassa vain ja ainoastaan taulukkomuotoisen datan järkevään esittämiseen.

Selainten tuki tyylipohjille on nykyään tarpeeksi kattava, jotta tämän kaltaisia ohjeita voidaan suositella käytettäväksi. Tyylipohjien tehokkuus näkyy myös siinä, että vaikka selain ei tyylipohjia tukisikaan, on sisältö täysin luettavissa. Näytön leveyskään ei tuota ongelmaa, sillä kuva-alan käydessä liian kapeaksi selaimet rivittävät palstat allekkain eivätkä pakota niitä vierekkäin turvautuen vierityspalkkeihin.

Palstoittaminen tyylipohjilla tapahtuu siten, että jokainen palsta ryhmitetään omaksi div-elementikseen.

<div class="palsta"><p>Ensimmäinen palsta</p></div>

<div class="palsta"><p>Toinen palsta</p></div>

<div class="palsta"><p>Kolmas palsta</p></div>

esimerkit/palstat_ei_tyylia.html

Ilman tyylipohjia palstat rivittyvät allekkain omiksi kappaleikseen.

Palstojen saamiseksi vierekkäin lisätään palsta-luokalle tyylisäännöt. Kelluttamisen lisäksi palstoille täytyy määrätä leveys, jottei yksi palsta pääse viemään koko sivun leveyttä.

.palsta {
	float:	left;
	width:	33%;
}

esimerkit/palstat_tyylilla.html

Lopuksi pieni vinkki siitä, miten palstoituksen jälkeisen sisällön saa rivittymään oikein. Palstoitus pitää siis katkaista, ettei kaikki sitä seuraava sisältö rivity palstojen oikealle puolelle. Tämä onnistuu tyylipohjien clear-määritteellä. Valmis kolmipalstainen sivu näyttää seuraavalta:

<div class="palsta"><p>Ensimmäinen palsta</p></div>

<div class="palsta"><p>Toinen palsta</p></div>

<div class="palsta"><p>Kolmas palsta</p></div>

<div style="clear: both;">
<hr />
<address>Tätä sivua päivittää Juha-Pekka Järvenpää</address>
</div>

esimerkit/palstat_valmis.html

Tätä sivua on viimeksi päivitetty 26.2.2004.

Käyttäjien kommentit

paska

Jossakin ohjeissa suositeltiin, ettei tableilla saisi taittaa sivua. Onko tyylitiedostoilla mahdollista tehdä koko sivun taitto. Oheinen esimerkki kertoo kuinka laittaa sivu palstoihin, mutta voiko niiden avulla luoda samanlaisen asettelun kuin taulukoilla?

Miten saan tehtyä palstat marginaalien sisälle? Olen tehnyt marginaalit sivuilleni(10% ja 20% reunoista) ja yritän sinne sisälle laittaa kaksi palstaa, joilla olisi myös otsikko. Kuinka onnistun tässä, en ole vielä onnistunut.

Korjataampa äskeinen... Onnistuin yrittämässäni melkein heti kysyttyäni neuvoa. Joten ei tarvitse siihen apua. Mutta sanotaan nyt että näistä sivuista on saanut todella paljon apua kotisivujen teossa. Kiitos siitä.

Voiko palstojen väliin jättää tyhjää tilaa, muuten kuin tekemällä uuden palstan vanhojen palstojen väliin ja laittamalla sinne läpinäkyvän kuvan?

Ei kannata keksiä pyörää uudelleen. Tyylipohjilla saa margin-määritteellä marginaalia minkä tahansa elementin ympärille.

<div style="margin-left: 10em;">

"Näytön leveyskään ei tuota ongelmaa, sillä kuva-alan käydessä liian kapeaksi selaimet rivittävät palstat allekkain eivätkä pakota niitä vierekkäin turvautuen vierityspalkkeihin."


Kätevää, mutta onko kuitenkin mahdollista tehdä niin, että palstat eivät rivity allekkain tilan käydessä vähiin, vaan käytetään vierityspalkkeja?

Pystyykö tällä tekniikalla tuottamaan sivun, jonka vasten palsta olisi sivun kokonaisleveydestä 1/3 leveä ja oikea palsta 2/3? Vai edellyttääkö systeemi sitä, että kaikki palstat ovat keskenään yhtä leveitä?

Voi, teet vain kaksi eri nimistä DIViä.

Ei palstoilla kannata vielä koko sivua väsätä. IE:llä ei tietääkseni palstat kunnolla toimi, ja jos palstoissa käyttää PIKSELEITÄ, niin ei saa mitään asiaa kohdidistettua sinne minne haluaa, sillä eri resoluutioilla pikselien määrät vaihtelevat, ainut järkevä tapa on käyttää palstoja prosenteilla. En suosittele sivujen tekoa pelkästään palstoilla, sillä taulukoilla saa sivut vallan mainiosti tehtyä. En ymmärrä minkä takia väitetään että taulukoilla ei pitäisi tehdä sivuja. MItä se haittaa. Ei yksinkertaisesti mitään, ja lisäksi taulukoilla saa mainiosti tehtyä sivut.

Selittäisitkö vielä kuinka voi laittaa taulukot vierekkäin??

Voisiko tuon div-elementin jotenkin keskittää? Olen tehnyt sivun ulkoasun diveillä mutta koko sivu jää harmillisesti vasempaan reunaan. Kiitokset!

Div-elementti keskitetään seuraavasti:

<div style="margin-left: auto; margin-right: auto;">keskitetty</div>

Saako palstalle jotenki oman taustavärin tai kuvan?

Minulla on valmis kaksipalstainen web-sivupohja, jota olen editoinut Frontpagella. Aina kun lisään tekstiä oikealle palstalle, niin vasemman palstan tekstit liikkuvat alas. Millä komennolla vasemman palstan tekstit saataisiin lukittua eli pysymään paikallaan ja mihin kohtaan tämä komento tulisi lisätä?

toinen palsta on varmaan liian leveä :>

Miten palstojen reunat saa näkyviin?

jos haluatte esm, sateenkaari värit eli niinkuin näin:

-----------------------------------------------------
eka vaik punainen väri tässä
-----------------------------------------------------
tässä sit sininen

ja sillee voi jatkaa. niin sen saa div koodilla näin:

<div style="background-color:black">

tulee musta

dsfsaf

Lisää oma kommentti