Keskittää voi monellakin tapaa, mutta miten otetaan huomioon esimerkiksi eri resoluutioiden käyttäjät. Kun käyttäjän resoluutio voi olla 1280 tai vaikkapa vain 800 pikseliä leveä. Keskittämisen voi esimerkiksi tehdä määrittämällä elementeille tarkat koordinaatit joissa ne ovat, mutta tällä tavalla voidaan ottaa vain yksi resoluutio huomioon kerrallaan. Center-tagi on vanhentunutta koodia, sitäpaitsi se keskittää kaiken, myös tekstin!
Esimerkissäni sisältö on "kääritty" erilliseen diviin, joka keskitetään tietynlevyisenä. Olen käyttänyt tätä tekniikkaa esimerkiksi näillä sivuilla.
...
<body>
<div id="wrapper">
Sisältö tähän
</div>
</body>
...
Tämän jälkeen css-muotoiluihin lisätään seuraava kohta:
div#wrapper{
width:600px;
margin:0 auto;}
Esimerkissä divin leveys on siis 600 pikseliä. Yhtä hyvin voidaan käyttää prosentteja esim. 80%, jolloin divi venyy tarvittaessa resoluution mukaan. Tämä voi kuitenkin olla ongelmallinen esimerkiksi laajakuvanäyttöjen kanssa. Se rikkoo hyvin helposti ulkoasun yhtenäisyyden ja kompaktin olemuksen.
Selaimen rullauspalkki vie noin 20 pikseliä oikeasta laidasta, joten suositeltu maksimileveys wrapperille olisi 780 pikseliä.
Esimerkissäni sisältö on "kääritty" erilliseen diviin, joka keskitetään tietynlevyisenä. Olen käyttänyt tätä tekniikkaa esimerkiksi näillä sivuilla.
...
<body>
<div id="wrapper">
Sisältö tähän
</div>
</body>
...
Tämän jälkeen css-muotoiluihin lisätään seuraava kohta:
div#wrapper{
width:600px;
margin:0 auto;}
Esimerkissä divin leveys on siis 600 pikseliä. Yhtä hyvin voidaan käyttää prosentteja esim. 80%, jolloin divi venyy tarvittaessa resoluution mukaan. Tämä voi kuitenkin olla ongelmallinen esimerkiksi laajakuvanäyttöjen kanssa. Se rikkoo hyvin helposti ulkoasun yhtenäisyyden ja kompaktin olemuksen.
Selaimen rullauspalkki vie noin 20 pikseliä oikeasta laidasta, joten suositeltu maksimileveys wrapperille olisi 780 pikseliä.
Viimeisimmät kommentit