6. Oppitunti - Palstojen teko
Palataan hetkeksi takaisin sivun rakenteen pariin. Otsikot näyttävät melko hyvältä ja leipäteksti on mukavasti jäsennettynä. Tekstimassa on kuitenkin hieman leveä, se näyttäisi paljon paremmalta jos sen jakaisi palstoihin. Vaikka kuten seuraavassa esimerkissä:
Tämä vaatii hieman muutoksia omasivu.html:ään, mutta suurimmaksi osaksi homma hoituu css:llä.
Käytämme palstojen tekoon div-tägiä. Kuvittele div ikäänkuin laatikoksi. Laatikon sisällä oleva materiaali pysyy tallessa ja se on helppo asettaa haluttuun paikkaan.
1. Ympäröi yksi tekstikappaleista div-tägillä ja siirrä se muun tekstin perään.
Tästä tulee palsta sivun oikeaan laitaan.
2. Lisää id, esim. oikea_palsta (eli <div id="oikea_palsta">)
id:n avulla on mahdollista erotella kappaleet ja liittää kumpaankin omat css-ominaisuudet. Muistathan kuinka id-määritettä käytettiin luvussa 3 kuvien erotteluun?
3. Ympäröi muu teksti samalla tapaa div-tägeilä ja nimeä se esim. vasen_palsta (eli <div id="vasen_palsta">)
Muu teksti jää sivun vasempaan laitaan.
Tällä hetkellä omasivu.html:n pitäisi näyttää kutakuinkin tuolta:
<body> <h1>Jokin iso otsikko</h1> <h2>Jokin alaotsikko</h2> <div id="vasen_palsta"> vasemman palstan sisältöä </div> <div id="oikea_palsta"> oikean palstan sisältöä </div> </div>
Tällä hetkellä minkään ei pitäisi olla muuttunut. Oikea palsta on tavalliseen tapaansa vasemman perässä sivun jatkona. Seuraavaksi tehdään taikatemppu css:llä.
5. Kopioi seuraava koodi tyyli.css-tiedostoon
#vasen_palsta {
float:left;
width:67%;
padding-right:5%;
padding-left:0;
border-right:solid 1px;
margin-top:1em;
margin-bottom:1em;}
#oikea_palsta {
margin-left:0;
float:right;
width:24%;
margin-top:1em;
margin-bottom:1em;
text-align:right;
}
Nyt meillä on siis kaksi palstaa, oikea ja vasen.