Kotisivuni on käytännössä yksi iso taulukko. Testatessani sivua Firefoxilla se ei keskittänyt taulukkoa, vaan jätti sen vasempaan ruudun reunaan. Käytin komentona <P Align=Center> koko taulukolle, mutta se ei taida olla edes oikea komento keskittämään muuta kuin tekstia. IE:llä se kuitenkin toimi. Miten taulukko (ja kaikki muutkin komponentit) keskitetään oikeaoppisesti?
table { margin : 0 auto; }Keskittää IE6:sta edemmäs, kunhan DOCTYPE on heti ensimmäisellä rivillä ja Strict-tyyppinen.
Tuossa siis ylä- ja alamarginaalit asettuvat nollaksi ja vasen ja oikea automaattiselle. Lopputuloksena keskitys.
En ole ihan varma tajusinko noita sinun aaltosulkeita, mutta siis liittyykö css layouteihin? Aloin tutkiskelemaan asiaa ja löysin html-tagin <div>, joka align-parametrilla varustettuna hoitaa keskityksen. Onko tämä hyvä vaihtoehto? On minulla DOCTYPE heti alussa mutta en tiedä onko se strict-tyyppinen. Laitoin oppaasta vain copypastella mutta minulla ei ole hajuakaan mitä tuo tekee.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Klassinen ja toimiva ratkaisu on center-tagi:
<center> <table></table> </center>
Center-tagin kanssa vaan pitää olla varovainen, koska sattumoisin selaimet saattavat keskittää myös tekstin kun sitä käyttää (IE6 alkoi tehdä näin, muistan kun otti päähän kun piti sivut tehdä ihan uusiksi IE6:n julkaisun myötä: tuolloin en osannut CSS:ää kuin sen verran että linkit tyylittelin uusiksi). Ja siis käytännössä nykyaikana ei ole kovinkaan järkevää opetella tekemään sivuja ilman CSS:n osaamista. XHTML:stä ei löytyne center-tagia edes transitional-mallista.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="fi">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Tereve</title>
<style type="text/css">
#keskitys {
margin : 0 auto;
padding : 10px;
width : 580px;
}
</style>
</head>
<body>
<div id="keskitys">
<h1>Tämä elementti on keskitetty!</h1>
<p>Ja se on myös 600 pikseliä leveä (580px + 10px + 10px).</p>
</div>
</body>
</html>Katsotaan mitä saan aikaiseksi. Sitähän varten minä näitä sivuja lähinnä teen että oppisin css:ät sun muut nettiohjelmoinnin salat.
DOCTYPE:llä on suuri vaikutus CSS:n ja muutamien HTML:n elementtien käyttäytymiseen. Esimerkiksi juurikin tämä margin : 0 auto; hajoaa IE6:ssa jos käytössä on jokin muu kuin Strict-muotoinen DOCTYPE. IE:n takia myös DOCTYPE:n sijoittamisella on väliä. Normaalistihan XML-tiedostoissa on niin sanottu prologi, joka kertoo XML:n version ja tiedoston käyttämän merkistökoodauksen. XHTML on XML-pohjainen, mutta yleensä prologi jätetään siitä pois juuri IE:n takia.
Tämä taas johtuu siitä, että IE kytkeytyy pois standardimoodista jos DOCTYPE ei ole ensimmäisellä rivillä. Standardimoodin "vastakohta" on quirks mode, eli mitenkäs sen taas suomentaisi... no, kuitenkin pohjalla on se, että siinä moodissa selain pyrkii imitoimaan vanhojen IE-versioiden ja Netscape 4:n käyttäytymistä. Ja tämä vain siksi, etteivät vanhat sivustot menisi rikki.
Käytännössä siis uudet sivut kannattaisi tehdä strict-muotoisina, ellei jokin asia pakota muuhun (joskus yhteensopivuusratkaisut pakottavat muuhun, joskin yhä vähenevissä määrin). Lopuksi on sitten vielä mietittävänä erottelu XHTML:n ja HTML4:n välillä, eli haluaako pakottautua hieman rajatumpaan syntaksiin ja sääntöihin, vai tahtooko mennä löysempää reittiä pitkin.
Ja muistaa vielä, että HTML, XHTML ja CSS eivät ole nettiohjelmointia, vaan enemmänkin sivusuunnittelua: kuvauskielet kyseessä :)
Merri kirjoitti:
Ja muistaa vielä, että HTML, XHTML ja CSS eivät ole nettiohjelmointia, vaan enemmänkin sivusuunnittelua: kuvauskielet kyseessä :)
Niin no tämä on nyt tätä ikuista nörttitaistelua että miksi noita pitäisi kutsua. Minulle ne on täyttä ohjelmointia niin kauan kuin niissä käsketään konetta/selainta tekemään jotain sanallisilla komennoilla.
Janezki kirjoitti:
Minulle ne on täyttä ohjelmointia niin kauan kuin niissä käsketään konetta/selainta tekemään jotain sanallisilla komennoilla.
Kuvauskielet eivät kyllä minusta "käske" konetta/selainta tekemään mitään. Ne ainoastaan kuvaavat sivua, eivätkä sisällä minkäänlaisia komentoja. Muutenhan minkä tahansa datatiedoston luominen olisi ohjelmointia. Kuvan piirtäminen olisi ohjelmointia, koska kuvatiedosto sisältää "ohjeet" siitä, millainen kuva on. Ohjelmointikielen vaatimuksiin ei muuten kuulu sanallisuus. Esimerkiksi whitespace on täysverinen ohjelmointikieli, vaikka siinä käytetään nimensä mukaisesti vain whitespace-merkkejä, eli ei siis kirjaimia lainkaan.
Kyseessä ei edes ole nörttitaistelu, vaan taustalla on ihan puhdas fakta. CSS:ssä ja HTML:ssä ei ole esimerkiksi muuttujia tai funktioita, jotka ovat luonteenomaisia suurimmalle osaa ohjelmointikielistä. JavaScript kuitenkin taas selvästi on ohjelmointia.
JavaScript kertoo koneelle mitä sen pitää tehdä, HTML kertoo sivu sisältää ja mikä sen rakenne on, CSS kertoo miltä sivu näyttää. HTML:n rakenteen tärkeyttä muuten usein aliarvioidaan ja tehdään liikaa asioita pohjautuen siihen miltä elementit näyttävät, tai mitä halutaan CSS:n avulla saavuttaa. Kuitenkin lähtökohtaisesti olisi parempi lähteä rakentamaan sivua sisällön pohjalta, ja siitä, missä järjestyksessä asiat halutaan esittää (riippumatta siitä, miltä sivu lopullisesti näyttää selaimessa).
Aihe on jo aika vanha, joten et voi enää vastata siihen.