Kelluvat otsikot

Tämän esimerkkisivun otsikot on asetettu kelluviksi. Kelluvat otsikot sopivat paljon tekstiä sisältäville sivuille, jotta olisi sisältöä jonka vierelle otsikot voisivat asettua kellumaan. Esimerkin vuoksi pääotsikko (H1-elementti) on asetettu kellumaan vasemmalle ja toisen tason otsikot (H2-elementit) taas oikealle. Toki kellutuksen lisäksi otsikoille on pyydetty muitakin tyylejä. Muun muassa reunuksiin, marginaaleihin, kokoon ja väritykseen vaikuttavia ehdotuksia. Näitä asetuksia voidaan helposti muokata omien tarpeiden ja/tai mieltymyksien mukaisiksi.

Otsikoihin vaikuttava koodi

Koodissa kaikki mahdollinen on pyritty määrittelemään suhteellisesti, jotta sivun sommittelu mukautuisi mahdollisimman hyvin erilaisiin tilanteisiin. Voit kokeilla miten sivu mukautuu erilaisiin asetelmiin esim. muuttamalla kirjasinkokoa ja/tai muuntelemalla selainikkunasi kokoa. Pääotsikkoon vaikuttava koodi on seuraavanlainen:

K O O D I

h1 {
float:left; /* aliotsikoissa float:right */
width:35%;
font-weight:bold;
text-align:center;
margin:1em;
font-size:1.2em;
color:#000;
background-color:#ffce63;
padding:.5em;
border:thin dashed #000;
}

Huomioitavaa

Esimerkin vuoksi tuossa koodilistauksen yhteydessä esiintyy myös kolmannen tason otsikko (H3-elementti), johon on yhdistetty poikkeavat tyylit, jotta otsikosta saataisiin pystysuora. Efekti on aikaansaatu määrittelemällä otsikon leveys niin pieneksi, että siihen mahtuu vain yksi kirjain riville. Tämä on ihan hyväksyttävää, mutta efektin toimivuus vaatii, että otsikon kaikki kirjaimet erotetaan toisistaan välilyönnillä (<h3>K O O D I</h3>), jolloin otsikon asiasisältö on hahmotettavissa ainoastaan visuaalisesti. Tästä syystä tällaista ratkaisua ei voi suositella, ainakaan minkään oleellisen tiedon yhteydessä.

Tarkasta tämän sivun tyylien oikeellisuus.Loput sivun ulkoasumääritykset (paitsi yo. CSS-esimerkkikoodiin vaikuttavat) löytyvät lähdekoodin STYLE-elementistä. Tässä esimerkissä CSS-sommittelu on suunnattu ainoastaan näytölle ja samalla piilotettu vanhemmilta selaimilta @media screen -säännöllä. Laajemmissa toteutuksissa tyyliehdotukset kannattaa ulkoistaa ja piilottaminen toteuttaa esim. @import-säännöllä.