Olen lähtenyt tyypillisestä sarakeliitännästä meidän käytännön projektissamme. Ennen kuin kuitenkin esittelen tämän projektin live- ja väriversiona, haluan näyttää teille hyvin konkreettisesti, miten voitte toteuttaa sarakeliitännät itse. Painopisteessä ovat kahden ja kolmen sarakkeen asettelut, sillä ne muodostavat yhä suurimman osan verkkosivuista.
Ulkona muotoilun klassikko olisi todennäköisesti kaksisarakkeinen. Vasemmassa ikkunan osassa navigointi on yleensä esillä, kun taas oikealla sarakkeella näkyy varsinaiset sisällöt. Blogien osalta tämä käyttäytyminen on muuttunut hieman. Itse asiassa monissa blogeissa oikealla näkyy navigointi tai mainonta, kun taas vasemmalla on itse sisältö.
Tällaisia sovelluksia on verrattain helppo toteuttaa CSS:ssä. Itse asiassa kaksisarakkeet ovat yksinkertaisin layout-muoto.
Esitän seuraavassa esimerkissä kaksisarakkeen, jossa käytetään absoluuttisia prosentuaalisia arvoja.
Tässä on täydellinen esimerkki:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
#nav {
position: absolute;
left: 0;
margin: 0;
width: 20%;
background-color:#66CCCC;
}
#main {
margin: 0;
margin-left: 20%;
width: 80%;
background-color:#6666CC;
}
</style>
</head>
<body>
<div id="header">Asettelu absoluuttisella sijoittelulla</div>
<div id="nav">Navigointi</div>
<div id="main">Tämä on sisältöalue</div>
<div id="footer">Tässä on tekijänoikeusinformaatiot.</div>
</body>
</html>Ja näin se näkyy selaimessa:
Voit siirtää vasemman sarakkeen oikealle helposti. Muuta seuraavat ohjeet:
• #navssa muutetaan arvo left: 0 arvoon right: 0.
• #mainssa vaihdat vain margin-left yksinkertaisesti margin-rightksi.
Kun muutokset on tallennettu, haluttu tulos näkyy.
Tämän näytön perusteella esitettyyn layoutiin perustuvalla absoluuttisella sijoittelulla on kuitenkin yksi ongelma: Jos vasemman sarakkeen sisältö on laajempi, se menee jalkaosan yli.
Tämä johtuu yksinkertaisesti siitä, että absoluuttisesti sijoitettuja elementtejä varten ei "varata tilaa". Ongelma voidaan kiertää lisäämällä pääalueelle vastaavia sisältöjä, jotka ovat pidempiä kuin vasemmalla sarakkeessa olevat.
Tätä layout-muotoa tulisi käyttää vain, jos olet varma, että pääalue on todellakin korkeampi kuin vasen (tai oikea) sarake.
Kaksisarakkeinen floatilla
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
#nav {
float: left;
margin: 0;
width: 20%;
background-color:#66CCCC;
border: 0;
}
#main {
margin: 0;
float: left;
border: 0;
background-color:#6666CC;
width: 80%;
}
#footer {
clear: both;
}
</style>
</head>
<body>
<div id="header">Asettelu absoluuttisella sijoittelulla</div>
<div id="nav">Navigointialue</div>
<div id="main">Tämä on sisältöalue</div>
<div id="footer">Tässä on tekijänoikeusinformaatiot.</div>
</body>
</html>
Tässä molemmat sarakkeet on varustettu float-ominaisuudella. Tämän seurauksena sarakkeet ovat nyt vierekkäin.
Vasemmalle sarakkeelle on annettu 20 prosentin leveys. Kiinnitä erityistä huomiota siihen, että float-asemointia käyttävät elementit odottavat aina leveysilmoitusta.
Varsinainen sisältöalue saa 80 prosentin leveyden. myös tätä aluetta sijoitetaan float: left-asetuksella. Tämän seurauksena tämä alue näytetään vasemman sarakkeen vieressä.
Jotta jalka-alue on todellakin aina alaosassa - siis sarakkeiden alapuolella - tarvitaan seuraava syntaksi:
#footer {
clear: both;
}
Olin jo viitannut mahdollisuuteen määrittää oma luokka tälle vaihtoehdolle.
Kolmisarakkeinen floatilla
• Vasemmassa sarakkeessa on navigointi.
• Keskitetyssä sarakkeessa on varsinaiset sisällöt.
• Oikealla näytetään lisätietoja tai mainontaa.
Alla on esimerkki joustavasta kolmisarakkeisesta luomisesta. Systeemi on - huomaatteko sen - melko samankaltainen kuin aiemmin esitetyn kaksisarakkeisen. Kuitenkin tässä on nyt lisätty
right yksi ylimääräinen div-alue, joka edustaa lopulta oikeaa ikkunassa olevaa saraketta.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
#main, #right {
margin: 0;
border: 0;
padding:0;
}
#nav {
float: left;
margin: 0;
width: 20%;
background-color:#66CCCC;
border: 0;
}
#main {
margin: 0;
float: left;
border: 0;
background-color:#6666CC;
width: 60%;
}
#right {
float: right;
width: 20%;
background-color:#6699FF;
}
#footer {
clear: both;
} </style>
</head>
<body>
<div id="header">Layout mit absoluter Positionierung</div>
<div id="nav">Der Bereich für die Navigation</div>
<div id="main">Das ist der Inhaltsbereich</div>
<div id="right">Das ist die rechte Spalte</div>
<div id="footer">Hier stehen die Copyright-Informationen.</div>
</body>
</html>
Uuteen alueeseen on määritetty leveys 20 prosenttia. Joten jakautuminen näyttää seuraavalta:
• Vasen ja oikea sarake vievät kumpikin 20 prosenttia käytettävissä olevasta mainostilasta.
• Keskipalkki on leveydeltään 60 prosenttia.
Syntaksin avulla right-alue näytetään todellakin oikealla.
Syntax on kuitenkin tällä hetkellä joustava. Voitte muokata main-alueen myös seuraavasti:
#main {
margin: 0;
float: right;
border: 0;
background-color:#6666CC;
width: 60%;
}
Tässä float on asetettu right. Tämän seurauksena right-alue siirtyy vasemmalle.
Tässä opetusohjelmassa näitte, kuinka helppoa perusasettelujen määrittely on float-pohjalta. Tämä tieto muodostaa nyt perustan verkkosivuston rakentamiselle. Tulevissa oppitunneissa luodaan askel askeleelta verkkosivusto, lähtien perusrakenteesta.
