Keskustelu: Nettisivujen teko: HTML/CSS: sivun keskitys näyttöön?

Terve,

kysyisin tälläistä yksinkertaista asiaa pitkästä aikaan, että miten kotisivut voisi keskitää näyttökoosta riippumatta käyttäen vaikka css:sää?

Olen itse suunitellut sitä ehkä nykyisin yleisen 17t/18t -näyttöihin, omalla isommalla näytölläni sivuni jäävät näytön keskikohdasta vasemmalle reilusti, eikä sivusto näytä hyvältä, jos koko sivustoa ei saada keskitettyä hienosti, miten tämän voisi tehdä?

Melko yksinkertaisella CSS:llä tämäkin onnistuu:

#pohja {
    margin: 0 auto;
    width: 960px;
}

Leveyttä toki voi muuttaa miten tahtoo.

CoolC++ kirjoitti:

Olen itse suunitellut sitä ehkä nykyisin yleisen 17t/18t -näyttöihin

Ja mitäs sitte ku mää haluan kattoa sivujas mun 10.1" miniläppärillä?

Kiitos, olinpa ajattelematon...pitää kokeilla...

-Suunnittelin niitä enemmän yleisimpiin näyttöihin ja tuskin miniläppäri on nykyään, joka kodin perustietokone ja voihan sivuja sitten muuntaa myöhemmin toisellaiseen liittymään sopivaksi...

Erikokoiset näytöt voi huomioida näin: http://css-tricks.com/resolution-specific-stylesheets/

En sitten tiedä, että millä selaimilla tuo toimii.

Muokkaus. Ainakaan IE8 ei näyttäisi tukevan, tuleekohan tuki 9:iin?

CoolC++ kirjoitti:

Suunnittelin niitä enemmän yleisimpiin näyttöihin ja tuskin miniläppäri on nykyään, joka kodin perustietokone

Mää oon ymmärtäny, että nuo ois suhteellisen yleisiä, mut oli miten oli, se, että sää et pidä sitä "joka kodin perustietokoneena" ei paljo lämmitä mua siinä vaiheessa ku haluaisin sitä sivua kattoa ko. laitteella.

Kun tekee suosiolla selainikkunan leveyteen mukautuvat sivut ei tarvi alkaa miettimään, millaisia näyttöjä kelläkin sattuu olemaan käytössä.

Macro kirjoitti:

Erikokoiset näytöt voi huomioida näin: http://css-tricks.com/resolution-specific-stylesheets/ [...] tuleekohan tuki 9:iin?

Muistan lukeneeni, että joo. Kaikki fiksut selaimet taisi tukeakin jo.

Täytyy kyllä sanoa, melkoisen kokematttomana joudun kysyä tyhmää kysymystä, että miten tuo saadaan toimimaan?

Itselleni ensitärkemäpi asia on vain saada keskittää sivut...ei siis ole tarvetta saada toimintoa, joka scaalata sivuja erikse näyttöön sopivaksi vaan, että se on vain keskitetty niin voi tuota hiiren scrollia käyttää tarvittaessa. Tosin kyllä suunnittelin sivut ihan yhdelle näytöölle sopivaksi, mutta se ei ole pikku tarkaa.

Sain jotatakin myös tälläisen tutoriaalin sivun keskittämiseen css:sällä, mutta en saa sillä toimimaan niinkuin sen haluaisin saada toimimaan: http://www.joe2torials.com/view_tutorial.php?view=37

Ymmärrän suunilleen kaiken tuosta, mutta itselleäni sivuillani on koko juttu valmiiksi mitoitettu (paikkat & kokoot), että saisi pelkästään tuon koko sivuston sellaisenaa näytönkeskelle ilman että, jokaiseele id:elle pitää määrittää tuo keskitys tai automaattinen px paikka, ellei se ole yksinkertaista, esim. yhdellä koodi rivillä tyyliin.

Homma ei edes toimi, jos pastetan koko koodini tuon divin sisällä vaan koko sivusto näyttää edelleen muuttumatomalta ja omalla paikallansa...

<div id="centeredcontent"><p>koodit...</p></div>

Myöskään en ole käyttänyt html:llässä centtereitä, joten senkään lisääminen ei siirrä koko hoitoa keskelle, koska käytän css:sää. Mitä tein väärin tai tein tekemättä?

CoolC++ kirjoitti:

Ymmärrän suunilleen kaiken tuosta, mutta itselleäni sivuillani on koko juttu valmiiksi mitoitettu (paikkat & kokoot), että saisi pelkästään tuon koko sivuston sellaisenaa näytönkeskelle ilman että, jokaiseele id:elle pitää määrittää tuo keskitys tai automaattinen px paikka, ellei se ole yksinkertaista, esim. yhdellä koodi rivillä tyyliin.

Et kai sää oo absoluuttista sijottelua käyttäny? Sillon oot niinsanotusti out of luck.

Normaaliflown mukana olevat elementit keskittyy asettamalla niille jonkin leveyden ja marginaalit autoksi kuten yllä neuvottiin.

Pystyakselilla keskittäminen, mitä tuo linkkis käsittelee, taas on hankalaa, eikä noin pääsääntösesti maksa vaivaa.

Blaze kirjoitti:

Et kai sää oo absoluuttista sijottelua käyttäny? Sillon oot niinsanotusti out of luck.

Ei kai siinä mitään hätää ole? Pitää vain laittaa tuolle keskitetylle elementille tyyli position: relative, jotta se kelpaa offset parentiksi eli absoluuttinenkin sisältö suhteutetaan siihen.

Jos pystysuuntainen asettelu on jostain pätevästä syystä ihan pakko saada, sen voi toteuttaa helpoiten säätämällä JavaScriptilla sisältöelementin yläreunan marginaalia. Tämä pitää tietenkin tehdä uudestaan aina ikkunan ko'on muuttuessa.

"Et kai sää oo absoluuttista sijottelua käyttäny? Sillon oot niinsanotusti out of luck."

-Fixed:ttiä...tyyliin:

"background-color:#***;position:fixed;left: *px; top: *px; width: *px; height: *px; z-index: *;

-Pitäisikö tähän tehdä jotakin muutoksia jos sen haluaa flowna auto margina?

"Pitää vain laittaa tuolle keskitetylle elementille tyyli position: relative, jotta se kelpaa offset parentiksi eli absoluuttinenkin sisältö suhteutetaan siihen."

-relative ei tehnyt mitään haluttuja vaikutuksia, joita halusin saada sivuille, koko hoito meni ihan palasiksi ja ihan metikköön valitettavasti.

Fixed on aina suhteessa ikkunaan eikä välitä edes skrollaamisesta. Käytä sen sijaan absolutea.

<div id="keskitetty" style="position: relative; width: 300px; height: 200px; margin: 0 auto; border: 1px solid red;">
  <div style="position: absolute; left: 20px; top: 20px; border: 1px solid blue;">
    Hei!
  </div>
</div>

Pystysuuntainen asettelu JS:llä:

window.onresize = function() {
  var keskitetty = document.getElementById("keskitetty");
  var tilaa = keskitetty.parentNode.clientHeight - keskitetty.offsetHeight;
  tilaa = Math.max(0, tilaa);
  keskitetty.style.top = tilaa / 2 + "px";
};
window.onload = function() {
  window.onresize();
};

css:llä ilman javascriptiä.

http://veijola.net/keskitys.php

Pystysuuntainen CSS-asettelu on tosiaan mahdollinen, jos sisällön tarkka koko tunnetaan etukäteen. Oma oletukseni oli, että sivulla olisi myös dynaamisia tekstejä (eli mainittu absoluuttinen sijoittelu koskisi vain muutamaa erikoiselementtiä). Tosin tällaisessa tilanteessa pystysuuntainen keskitys taitaisi näyttää aika tyhmältä, kun sivuston eri sivut alkaisivat ruudulla eri kohdasta. :)

"<div id="keskitetty" style="position: relative; width: 300px; height: 200px; margin: 0 auto; border: 1px solid red;"> "

-Kokeilin vain laittaa esimerkiksi näin:

"background-color:#40BF43;style="position":fixed;left: 120px; top: 45px; width: 1025px; height: 130px; margin: 0 auto; z-index: 1;"

-Niin se keskitty kyllä sen nyt keskelle, mutta ongelmia tuli sitten itse sisällön kohdalla, jotka eivät ole täysin keskellä, mutta kuuluvat itse keskitettyä sisältöä, että tuo rivi koodia taas keskittää nekin keskelle sivustoa ja sitten toinen ongelma tulee siihen, jotka kuuluisivat olla jonkin asian päällä niin ne keskittyät kyseisen paikan alle tai ylle eikä sijoitu näin olle sen kohteen päälle, että sain sen tuolla laitettua keskelle.

Opettele käyttämään lainaustageja ja kooditageja oikeissa kohdissa, ei tuosta tekstistäsi ymmärrä enää, mitkä lainausmerkit tarkoittavat lainausta ja mitkä kuuluvat koodiin.

Jälkimmäisessä rivissä ei ole mitään järkeä, ja jos se tosiaan esiintyy tuossa muodossa sivullasi, olet aika pahasti pihalla HTML:n tai CSS:n syntaksista. Lisäksi yrität näköjään käyttää yhä fixed-asettelua, vaikka sanottiin jo, että pitäisi käyttää absolutea. Et voi myöskään yhdistää absoluuttista asettelua ja marginaalitemppuja, vaan elementti menee juuri siihen, mihin sen left- ja top-arvoilla asetat.

Tuo veijola.netin toteutus on aika heikohko, sillä tulee heti ongelmia jos tahtoo minkään tason joustavuutta.

Keskitetty laatikko -esimerkki, jonka olen jossain välissä tehnyt. Tämä on joustava ratkaisu, joka muuttuu normaalisti vieriväksi sivuksi kun sisältö kasvaa tarpeeksi pitkäksi. Toimivuus on kuitenkin rajallinen, eli IE7 ja IE6 ei toimi samaan tapaan kuin toiset; niille pitää syöttää oikeita taulukkoelementtejä, eikä tyylitellä taulukkotyylejä elementteihin CSS:n kautta.

Noin yleensä olen kuitenkin sitä mieltä, että nyt se mörkö pois sieltä pääkopasta! Ei joustavien sivujen suunnittelu ole niin kamalan vaikeaa, että sitä pitäisi välttää kuin kuolemaa. Pikselitarkkuudella taittaminen sattuu vaan omaan nilkkaan. Jos on oikeasti kiinnostunut nettisivujen värkkäämisestä, niin kannattaa laajentaa omaa taitovalikoimaa ja tietoutta, eikä rajoittua siihen mitä itse pitää oikeana. Jos siis kerrot mitä käytännön ongelmia tulee vastaan siinä, että ottaa vaihtelevan sivun leveyden huomioon, niin kyllä täältä apua ja toimivia ratkaisuja saa.