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ä.
Tämän julkaisun kommentointi on suljettu.
Kun tämän julkaisun kommentointi oli vielä avoinna, tälle julkaisulle kirjoitettiin yhteensä 3 kommenttia. Tämä artikkeli on lokeroitu kategoriaan Vierailijat. Tämän julkaisun kestolinkin osoite on http://www.kuopassa.com/weblog/2005/11/19/sivu-keskelle-nayttoa.
Pete kirjoitti 993 päivää sitten:
Se “epäpuhtaus” ei tee siitä yhtään virheellisempää, kuin ilman sitä. Yhtä validia se CSS siltin on. Kannattaa käyttää myös html tagille sitä text-align: center; CSS:ää jos tekee XHTML-sivuja.anda kirjoitti 993 päivää sitten:
Itse käytin joskus tuota margin:auto; muotoilua ja center-juttua sekaisin. Laitoin tuon centerin kustomoidun kommentin sisään – IE näytti sen sisällä olevan koodin, muut selaimet tulkkasi sen kommentiksi eivätkä siis välittäneet siitä. Eikä validaattori inahtanutkaan, validikin viritys vielä oli.Emil Virkki kirjoitti 992 päivää sitten:
Ei toki, mutta “turhaa” koodiahan tuo on. Se on siellä vain yhden selaimen vian vuoksi. Täytyy myös huomauttaa, että tuo miinuskohta ei ollut ihan tosissaan kirjoitettu, vaan on tarkoitettu lähinnä perfektionisteille. (Huomioi sarkastinen “kyynel”)