Kyllä se vaan niin on, että Webissä se sivu on useimmiten keskellä näyttöä.
Kyseessä on yksi Webin monista vakiintuneista käytännöistä. Keskitetty sivu on yleensä sopivalla kohdalla lukemista ajatellen ja tasapainottaa näkymää hyvin kun sivu on näyttöä kapeampi. Tapoja sivun keskittämiseen on monia, mutta mikä niistä on Keinoista Parhain?
<center>Vanhin tapa keskittää tekstiä, kuvia, taulukoita tai kokonaisia sisältösäiliöitä on center-tagi. Center on kuitenkin vanhentunut, sillä se sotii modernin web-kehityksen perusperiaatteita vastaan: kun ulkoasu pitäisi pyrkiä erottamaan dokumentin rakenteesta, center-elementti kuvailee merkityksen sijasta ulkoasua. Koko elementti onkin poistettu XHTML 1.0 Strict-dokumenttityypistä ja sen seuraajista.
HTML:
<center>
<div id=”main”>
Keskitettyä sisältöä.
</div>
</center>
CSS:
#main {
width: 50%;
text-align: left;
}
Teksti on aseteltava vasemmalle jotta <center> ei keskittäisi myös sitä.
Jos sivun leveys on asetettu prosenteissa, voi sivun keskittää myös asettamalla sille sopivasti marginaalia. Jos sivun leveys on esimerkiksi 50% voit keskittää sen laittamalla vasemmalle puolelle 25% marginaalia. Jos sivun leveys on 60% on marginaali 20%.
HTML:
<div id=”main”>
Keskitettyä sisältöä.
</div>
CSS:
#main {
width: 50%;
margin-left: 25%;
}
Negatiivisella marginaalilla voi keskittää myös sivun, jonka leveys on määritetty pikseleinä tai em-yksiköissä. Ideana on, että sivu vasen reuna asetetaan ensin keskelle näyttöä, ja sitten negatiivisella marginaalilla, joka on puolet sivun leveydestä, sivu siirretään näytön keskelle. Esimerkki helpottaa ymmärtämistä.
HTML:
<div id=”main”>
Keskitettyä sisältöä.
</div>
CSS:
#main {
position: absolute;
width: 600px;
left: 50%;
margin-left: -300px;
}
Tämä lähestymistapa aiheuttaa valitettavasti ongelmia pienillä resoluutioilla — osa sivusta katoaa ruudulta kokonaan. Käyttäjien keskuudessa saattaa olla käytössä hyvinkin pieniä resoluutioita, eivätkä matkapuhelimet ja Nokia Communicator välttämättä näytä sivujasi kunnolla. Tästä syystä negatiivisen marginaalin käyttöä koko sivun asettelussa tulisi välttää.
Moderni tapa keskittää sivu on määritellä sille leveys ja molemmille reunoille automaattinen marginaali. Tämä metodi on moderneissa selaimissa luotettavin ja siistein menetelmä.
HTML:
<div id=”main”>
Keskitettyä sisältöä.
</div>
CSS:
body {
text-align: center;
}
#main {
width: 50%;
text-align: left;
margin: 0 auto;
}
Tässä metodissa on yksi sudenkuoppa: Internet Explorer 5 ei osaa keskittää sivua. Ongelma voidaan kuitenkin ohittaa keskittämällä ympäröivän elementin (koko sivua keskitettäessä yleensä body) teksti, jolloin IE5 näyttää sivun oikein. Tämän lisäksi varsinaisen elementin sisältö on aseteltava vasempaan reunaan, jottei myös sen tekstiä keskitetä.
Koska aika on arvokasta, kannattaa tutustua tähän alla näkyvään listaan jos mielit löytää tämän nettisivuston parhaat kirjoitukset. Tässä alapuolella on kaikkein luetuimpia kirjoituksia Korinaa kuopasta -blogin aarreaitasta. Kirjoitukset on järjestetty suosituimmuusjärjestykseen siten, että luettelon kärjessä on tällä hetkellä eniten lukukertoja saaneet kirjoitukset.
Blogimerkintää "Sivu keskelle näyttöä" muokattiin viimeksi 6831 päivää sitten, eli keskiviikkona. Kirjoitukseen on julkaistu kommentteja 3 kpl. Kaikki kirjoituksen saamat kommentit löytyvät suoraan tämän tekstimötikän alapuolelta.
Selaat tällä hetkellä blogimerkintää Sivu keskelle näyttöä. Se julkaistiin 19. ä. Voit siirtyä lukemaan blogin tuoreimpia kirjoituksia klikkaamalla tiesi weblogin etusivulle. Tässä blogissa julkaistaan kiinnostaviksi katsomiani asioita, joten jos tiedät kiinnostavan nettiin liittyvän aiheen, josta kannattaisi kirjoittaa, laita palautetta!