Ihmiset nyt mollaa tuota tablella tekemistä, niin yritän epätoivoisesti tehdä sivuja divejä käyttäen. Ongelmani on, että divissä ei oikein toimi 100% korkeus. Tässä koodeja:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Trailerz</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="wrap"> <div id="yla"> <div id="logo">logo</div> <div id="mainos_yla">mainos</div> </div> <div id="ala"> <div id="navigaatio"> navigaatio </div> <div id="sisalto"> sisältö </div> <div id="mainos_oikea"> mainos </div> </div> </div> </body> </html>
CSS:
body {
padding: 15px;
margin: 0px;
font-family: verdana;
font-size: 12px;
}
div {
padding: 5px;
overflow: hidden;
}
#wrap {
margin: auto;
width: 900px;
padding: 0px;
border: solid 1px black;
}
#yla {
width: 900px;
height: 100px;
background-color: pink;
padding: 0px;
}
#logo, #mainos_yla {
width: 350px;
height: 100px;
background-color: red;
padding: 0px;
}
#logo {
float: left;
}
#mainos_yla {
float: right;
}
#navigaatio {
background-color: gray;
width: 200px;
float: left;
height: 100%;
}
#sisalto {
width: 580px;
background-color: lightgray;
float: left;
height: 300px;
}
#mainos_oikea {
background-color: gray;
width: 100px;
height: 100%;
padding: 0px;
}
#ala {
padding: 0px;
width: 900px;
}Noiden alhaalla olevien kolmen laatikon pitäisi venyä aina yhtä korkeiksi, kuin muutkin ovat. Eipä veny.
auttaisikohan määritys position: relative; mitään?
#sisalto
height: 100%;
#ala
height: 300px; /* tähän haluttu korkeus */
edit: Viestin ulkoasu.
Kokeilepa laittaa Wrap-diviin
position: relative;
ja navigaatio ja mainos_oikea -diveihin
position: absolute;
Sitten vielä pelkästään mainos_oikea -diviin
right: 0;
Yrität tällä hetkellä käyttää divejä kuin käyttäisit taulukon soluja, mikä on pääsyy sille, että vaikeuksia on. Toki diveille olisi kätevää saada 100%-ominaisuus, mutta tässäkin tapauksessa on täysin mahdollista käyttää hyväksi sitä faktaa, että taustakuvia on mahdollista asetella myös taaemmille elementeille. Tällöin taustaväriä tai taustakuvaa ei ole pakko laittaa päälimmäisille elementeille (tosin niille voi laittaa jotain lisäkoristetta!). Toisaalta tämä ei ole ainoa vaihtoehto, erilaisia lähestymistapoja on monia.
http://kontu.selfip.info/html.css.js/
Tässä hieman muunneltuna. Koska leveys on kiinteä, pystyt aivan hyvin sijoittamaan taustakuvan #ala-elementtiin. Jos leveys olisi vaihteleva, niin voisit laittaa taustakuvat #wrap- ja #ala-elementteihin, toinen vasempaan laitaan, toinen oikeaan.
Tässä muutamia esimerkkejä muista lähestymistavoista:
- display: table; hyväksikäyttö, jolla saa elementit toimimaan kuin taulukko.
http://kontu.selfip.info/html.css.js/
- Sama temppu vielä toistamiseen.
http://kontu.selfip.info/html.css.js/
- Elämää ilman divejä saati taulukoita: näinkin monimutkainen ulkoasu onnistuu ilman niitä.
http://kontu.selfip.info/html.css.js/
Myös absoluuttinen asettelu toki toimii jossain määrin ja sallii 100% käytön, mutta siinä on omat sudenkuoppansa.
Kiitos Merrille ja muillekin vastanneille! Nyt kun ongelma on ratkaistu, niin voisiko joku selittää tai antaa linkkiä, että miksi nuo tablet eivät ole niin hyviä. Itse olen ainakin saanut toimimaan vallan mainiosti.
Pallo kirjoitti:
Tsekkaas http://www.aimedia.fi/stupid_tables/everything.
html
Tuolla jostain syystä oletetaan, että kun tehdään ulkoasu tableilla, niin CSS-tiedostoja ei ole mahdollista käyttää. Samalla myös manaavat sitä, kuinka kauan noita tabletaittosivuja pitää ladata. Jos nyt oteteaan huomioon, että eletään vuotta 2008, prosessorit generoi sivun kuin sivun niin nopeasti, että optimointia ei tarvita. Nettiyhteydetkin ovat nykyään min. 1 Mbit/s, ja mobiililaitteissakin saadaan aika hyvät siirtonopeudet.
Toinen asia josta tuli kritiikkiä, on hakukoneoptimointi. Mikä estää otsikkotagien käytön tabletaitossa?
En näe itse kyllä mitään ongelmaa tabletaitossa tällä hetkellä...
Ongelma on enemmänkin siinä, että taulukot ei ole tarkoitettuja ulkoasun taittamiseen, vaikka se niillä onnistuukin. Otsikkotagia käytetään otsikoille, ei sen takia että lopputulos näyttää otsikolta, vaan sen takia että kerrotaan että on otsikko kyseessä. Jos menet taittamaan leiskan taulukoilla, niin se nostaa esiin sen ongelman, miten tieto pitäisi ymmärtää. Näin esimerkin vuoksi nykyisellään taulukkotaittoisia sivuja on aivan liikaa, jotta hakukoneet voisivat käyttää taulukoita hyväksi indeksointitietona: miten pystyä erottamaan sisältöä tarkoittava taulukko ulkoasutaulukosta?
Kyse on siis nimenomaan erottelusta sen suhteen, käyttääkö HTML:ää ulkoasun kuvaamiseen, vai antaako CSS:n hoitaa ihan kaiken. Toki voi miettiä sitä, miten pitkälle on valmis menemään teknillisen oikeellisuuden, standardien hengen ja periaatteiden saralla, mutta toisaalta kun rakentaa ulkoasun taulukoilla, on se myös toisaalta hyvin sitova, kun oletetaan että elementit rakentuu tiettyyn tapaan sivulle jo ihan HTML:n osalta.
Tuosta "standardien hengestä" vielä sen verran, että tarkoitan sillä tässä tapauksessa nimenomaan niiden asettamien periaatteiden ja ohjenuorien noudattamista: käytetään tageja siihen mihin ne on tarkoitettu, eli tekstit palstaelementteihin, otsikot otsikkotageihin, divit käyttöön silloin kun mitään muuta ei ole käytettävissä ja halutaan koota asioita yhteen, listat listoja kuten valikoita varten jne... Tälle menee eräänlaisena vastakohtana se, että pyritään vain saamaan sivut menemään validaattorista lävitse. Taulukkotaittohan menee validaattorista lävitse, mutta se ei silti ole standardien hengen mukaista, ainakaan imo. Toki ei validointi itsessään ole sekään väärin, mutta validaattori ei huomaa käytätkö elementtejä muuhun kuin sisältöön.
Lopuksi historian oppituntina, että taulukoitahan alettiin käyttää vain sen takia, että niillä ensimmäisenä onnistui ulkoasun kikkailu useampaan palstaan. Taulukoita ei silti missään vaiheessa tarkoitettu tähän, tapa vaan levisi kulovalkeana ennen kuin standardointi ehti tarpeisiin reagoida. Toisaalta sen ansiosta CSS sai tuulta alleen, ja nykyäänhän nettisivuja ei voi kuvitellakaan tekevänsä ilman CSS:ää.
Oma kokemukseni on se, että olen aloittanut kotisivustoni taulukkotaitolla ja siitä on kovin työlästä vaihtaa johonkin muuhun. Olen tehnyt monenlaisia harjoitelmia luopuakseni taulukoista,mutta olen todennut, että pienimuotoinen kotisivusto toimii hyvin taulukkotaitolla. CSS-tiedostosta oli paljon hyötyä sivujen ulkoasun tekemisessä. JVM
/* Julkaistun kotisivuston tyylit 07.03.2006. */
body { margin: 0; padding:0;}
table.iso { width: 100%; border-collapse: collapse;
border-style: solid; border-width: 2px; border-color: #00f; }
h1 { background-color: #bbc; color: #0000EE;}
h3 { text-align: center }
td.logo { font-family: "Arial Black", serif; width: 105px; height: 75px; text-align: center; vertical-align: middle;
background-color: #bbc; color: #00f;
border-style: solid; border-width: 1px; border-color: #00f; }
td.nimi { text-align: center; vertical-align: middle;
background-color: #ccd; color: #00f;}
td.linkki { text-align: center; vertical-align: top;
background-color: #ccd; color: #00f;}
td.asia { background-color: #dde; color: #000; vertical-align: top; padding: 10px;
border-style: solid; border-width: 1px; border-color: #00f;}
td.osoite { text-align: center; background-color: #ccd; color: #00f; border-style: solid;
border-style: solid; border-width: 1px; border-color: #00f; }
table.ilma { background-color: #eef; color: #000; }
caption { font-size: 120%; font-weight: bold; }Minusta suurin ongelma on siinä, että kaikki haluavat tämän tylsän palikkaulkoasun, joka toistuu joka paikassa. Miksi navigaatiopalkille pitäisi varata koko sivun verran tilaa, jos se ei tarvitse sitä? Minusta sellainen ulkoasu ei millään tavalla kohota sivun arvoa, ja erityisesti ratkaisut, joissa on kaksi sivupalkkia, ovat usein sisältöosaltaan ahdistavan kapeita ja heikommin käytettäviä kuin ne, joissa turhia sivuosia ei ole. Erityisesti henkilökohtaisella kotisivulla toimii varsin hyvin tällainen perusrakenne:
<body> <ul id="linkit"> <li><a href="/">Etusivu</a></li> <li><a href="/taka.php">Takasivu</a></li> </ul> <ul id="valid_logot"> <li><a href="XHTML-validaattori"><img src="valid-xhtml.png" alt="Valid XHTML 1.0 Strict!" /></a></li> <li><a href="CSS-validaattori"><img src="valid-css.png" alt="Valid CSS!" /></a></li> </ul> <div id="sisalto"> <h1>Tervetuloa</h1> <p>...</p> </div> </body>
Ulkoasusta saa nyt CSS:llä jo monenlaista, ja lopputuloksesta tulee hyvin pienellä vaivalla paljon kotoisampi kuin teräksenharmaista sivupalkeista, jotka kahlitsevat käyttäjän kapealle keskipalstalle.
Kannattaa olla valmis joustamaan hieman niistä tiukoista vaatimuksistaan, niin pääsee helpommalla.
Ei pidä väärin ymmärtää. Tuo nyt ei tietystikään vastaa lopullista ulkoasua, vaan nuo teräksenharmaat taustavärit vain helpottaa elementtien hahmottamista.
En tiedä kuka ymmärtää nyt väärin ketä, mutta olen sinällään samaa mieltä Metabolixin kanssa siitä, että aivan liian usein toistuu portaalipalikkarakenne "yläosa, kolme palstaa, alaosa". Itseasiassa olen jopa muodostanut inhon sitä kohtaan, mutta en vain anna sen kovinkaan usein näkyä (tosin onhan se kevennyt vuosien varrella, muutama vuosi takaperin vaan "kärähti" päässä). Onneksi isommat kaupalliset sivustot ovat moisesta rakenteesta jo luopuneet ja ulkoasua "rikotaan" enemmän erilaisiksi kokonaisuuksiksi, ja tietoa ja sivun navigointia on mietitty pidemmälle kuin vain siihen, että pyritään tarjoamaan kaikki heti jokaisella sivulla. Eli mietitään tarkemmin miten mikin sisältö pitäisi esittää, sen sijaan että kaikki kahlitaan samaan rakenteeseen, ja mietitään miten kävijät sivulla etenevät.
Aihe on jo aika vanha, joten et voi enää vastata siihen.