CSS-pähkinä - sisällön mukaan vaakasuunnassa skaalautuva div

[JHirvi]

Tämä ei ole ainoa juttu, jonka pitäisi olla helppoa ilman <table>-elementtejä, mutta ei ole.

Haluaisin block-elementin, joka skaalautuu vaakasuunnassa sisältönsä levyiseksi (oletetaan että sisältö voi muuttua) ja asettuu vaakasuunnassa keskelle ympäröivää block-elementtiä.

Tein tästä minimaalisen demon. Siinä homma on hoidettu table-elementin avulla. Yleensä joka paikassa sanotaan että table on uncool, ja onhan siinä vähän enemmän kirjoittamista kuin divissä. Joten voiko tämän tehdä ilman diviä.

Div skaalautuu kyllä sisällön mukaan, jos se on float:left. Mutta silloin sitä ei saa keskitettyä ympäröivään diviin.

[morbusg]

Voi kai leivänpaahdintakin käyttää parranajoon jos oikein mielikuvitusta käyttää. Eri asia sitten onko se siihen tarkoitettu.

Koodi: Valitse kaikki

<div>
  <div style="width:30%;margin:0 auto">
    <p>Kehyksen pitaisi asettua taman muuttuvan sisallon levyiseksi 
    ja olla horisontaalisuunnassa keskella ymparoivaa kehysta
  </div>
</div>

[kari.patila]

Suurempi ongelma on varmaan siinä että ajattelet sivua edelleen tableina, vaikka teet muotoilut CSS:llä. Tästä johtuen ratkaisutkin ovat tätä luokkaa:

Koodi: Valitse kaikki

<div style="border:1px solid;overflow: hidden;padding:20px;zoom:1;">
  <div style="float:right;position:relative;left:-50%;">
    <div style="position:relative;left:50%;border:1px solid;">
      <p>Kehyksen pitaisi asettua taman muuttuvan sisallon levyiseksi 
      ja olla horisontaalisuunnassa keskella ymparoivaa kehysta</p>
    </div>
  </div>
</div>

[JHirvi]

Suurempi ongelma on varmaan siinä että ajattelet sivua edelleen tableina, vaikka teet muotoilut CSS:llä. Tästä johtuen ratkaisutkin ovat tätä luokkaa:

Ihan kuin kysymys olisi siitä, että päässä pitäisi vain kääntää jotain katkaisinta - naks vaan!

Itsekin yritän välttää table-elementtejä aina kun mahdollista. Mutta se merkitsee joissakin tapauksissa (kuten tässä) huomattavaa oppimiskynnystä. Vastaan tulevat erityisesti IE:n kummallisuudet. Tämä tehtävä ratkeaisi helposti kirjoittamalla sisemmälle diville display:table. Mutta kun IE pre-8 ei tue sitä.

Kiitos koodista, se on mielenkiintoinen, toiimii (IE:stä voin kokeilla vain kasilla), ja joitakin asioita siinä en vielä ymmärrä.

Löysin tällaisen artikkelin, jossa on "kaikki vaakasuuntaisesta keskittämisestä". Se vaatii sulattelua.

[kari.patila]

Suurempi ongelma on varmaan siinä että ajattelet sivua edelleen tableina, vaikka teet muotoilut CSS:llä. Tästä johtuen ratkaisutkin ovat tätä luokkaa:

Ihan kuin kysymys olisi siitä, että päässä pitäisi vain kääntää jotain katkaisinta - naks vaan!

Itsekin yritän välttää table-elementtejä aina kun mahdollista. Mutta se merkitsee joissakin tapauksissa (kuten tässä) huomattavaa oppimiskynnystä. Vastaan tulevat erityisesti IE:n kummallisuudet. Tämä tehtävä ratkeaisi helposti kirjoittamalla sisemmälle diville display:table. Mutta kun IE pre-8 ei tue sitä.

Kiitos koodista, se on mielenkiintoinen, toiimii (IE:stä voin kokeilla vain kasilla), ja joitakin asioita siinä en vielä ymmärrä.

Löysin tällaisen artikkelin, jossa on "kaikki vaakasuuntaisesta keskittämisestä". Se vaatii sulattelua.

Minulla kesti muistaakseni tyyliin 4-5 vuotta, ennen kuin aloin suunnitella sivut alusta asti CSS:n ehdoilla enkä taulukkomaisesti. Lopputulos on ollut aina parempi ja helpompi. Luulin että table-layoutit katosivat jo 2000-luvun alussa, mutta ilmeisesti sitä vielä jossakin opetetaan?

IE:n omituisuuksista yleensä riittää kun tietää lisätä display:inlinen jokaiseen float:leftiin. Muuten IE tuplaa marginaalit. Absoluuttinen elementti ei myöskään voi joissakin tapauksissa olla suoraan floatin vieressä. Mittayksiköistä em ei ole 1:1 muiden selainten kanssa. Muut ongelmat yleensä korjautuvat pakottamalla elementille hasLayout IE:ssä, mikä hoituu tuolla zoom:1 - jutulla.

Tuo mielenkiintoinen koodi toimii siten, että näkymätön wrapperi heitetään 50% vasemmalle, ja sen sisällä oleva elementti 50% oikealle, mikä sijoittaa sisäisen elementin keskelle ruutua. Overflow:hidden ja zoom:1 tekevät sen, että ulkoinen elementti laajenee sisäisen floatin ympärille. Poista nämä niin huomaat mitä ne tekevät.

Jos asioihin haluaa perehtyä syvällisemmin, täällä on minusta parhaat selvitykset jokaiseen omituisuuteen:

http://www.quirksmode.org/

[Aaaron]

Muuten IE tuplaa marginaalit.

IE 6 tuplaa, ei uudemmat, ellei sitten ole quirks modessa.

Miten voi vielä vuonna 2011 olla tämä sama debatti käynnissä? Luulin, että table-taitosta luovuttiin jo 10 vuotta sitten.

[kari.patila]

Muuten IE tuplaa marginaalit.

IE 6 tuplaa, ei uudemmat, ellei sitten ole quirks modessa.

Miten voi vielä vuonna 2011 olla tämä sama debatti käynnissä? Luulin, että table-taitosta luovuttiin jo 10 vuotta sitten.

Sama juttu. Nostalgisista syistä lähdin tällä kertaa mukaan.

[JHirvi]

Miten voi vielä vuonna 2011 olla tämä sama debatti käynnissä? Luulin, että table-taitosta luovuttiin jo 10 vuotta sitten.

En näe tässä threadissa mitään debattia ainakaan omalta puoleltani. En ole väittänyt, että table-tagit olisivat paras tapa hoitaa puheena oleva suunnittelutarve, enkä halua väittääkään. Onko mielestäsi table-tagin mainitseminen jo sinänsä jotenkin mautonta? Ehkä olen liian newbie tälle hienolle foorumille?

Tietämykseni CSS:stä on monilta osin puutteellista, ja tässä ketjussa olen saanut hyviä ja käytännöllisiä neuvoja, joiden antajille iso kiitos. Tiuo marmatus taas ei hyödytä ketään.

[kari.patila]

Onko mielestäsi table-tagin mainitseminen jo sinänsä jotenkin mautonta?

Pelkkä maininta tableista herättää monissa meistä automaattisesti muistot niistä tuskailun vuosista kun niistä yritettiin päästä lopullisesti eroon. Mistään debaatistahan tässä ei missään vaiheessa ollut kyse, mutta ymmärrän kyllä niitäkin joilla palaa hermo välittömästi kun joku sanoo että tämä olisi helpompi tehdä tableilla.

[JHirvi]

Pelkkä maininta tableista herättää monissa meistä automaattisesti muistot niistä tuskailun vuosista kun niistä yritettiin päästä lopullisesti eroon. Mistään debaatistahan tässä ei missään vaiheessa ollut kyse, mutta ymmärrän kyllä niitäkin joilla palaa hermo välittömästi kun joku sanoo että tämä olisi helpompi tehdä tableilla.

Tuota minäkin arvelin syyksi. :-) Itselläni on edelleen käynnissä tuo prosessi.

Katselin demosivulta koodipituuksia eri ratkaisuilla, ja table-tagilla tehty ratkaisu oli lyhin. En tarkoita väittää tällä mitään... :-) Viimeistään muutaman vuoden päästä voi käyttää kaikille selaimille display:table, ja silloin päästään vielä lyhyempään koodiin.

[morbusg]

Katselin demosivulta koodipituuksia eri ratkaisuilla, ja table-tagilla tehty ratkaisu oli lyhin. En tarkoita väittää tällä mitään... :-)

Eihän se nyt siitä ole kiinni mikä on lyhintä, vaan siitä että ainut paikka mihin semanttisesti kuuluu käyttää tablea on tabulaarinen data (niinkun nimikin jo vähän vihjaa)!

Eräs yleisimmistä virheistä, joka liitetään XHTML:n kanssa työskentelyyn, liittyy perusolettamukseen, jolla merkintätapaa käytetään. Useimmille HTML:n parissa pitkään työskennelleille on enemmän tai vähemmän oletusarvoista luottaa ulkoasun laadinnassa taulukoihin, merkitä tabulaarista tietoa luetteloelementtien avulla tai kirjoittaa lähestulkoon kaikki sivulle tuleva sisältö kappale-elementin sisään. XHTML maailmassa nämä kaikki ovat teoriassa huutavia vääryydentekoja. Käyttämällä semantiikaltaan virheellistä XHTML-merkintää tuhoamme samalla perusteet merkintätavan olemassaololle.

Tuhoamme perusteet merkintätavan olemassaololle! Voiko tuota enää osuvammin sanoa.

[Juhani L]

Tuhoamme perusteet merkintätavan olemassaololle! Voiko tuota enää osuvammin sanoa.

Eipä, mutta sen voi esittää myös värikkäänä kauhukertomuksena.

[villeristi]

Eipä, mutta sen voi esittää myös värikkäänä kauhukertomuksena.

Loistava lähde!
Kiitos tästä, helpottaa perustelua/ "tietämättömien" kanssa vänkäämistä huomattavasti!

[JHirvi]

Katselin demosivulta koodipituuksia eri ratkaisuilla, ja table-tagilla tehty ratkaisu oli lyhin. En tarkoita väittää tällä mitään... :-)

Eihän se nyt siitä ole kiinni mikä on lyhintä, vaan siitä että ainut paikka mihin semanttisesti kuuluu käyttää tablea on tabulaarinen data (niinkun nimikin jo vähän vihjaa)!

Lyhyys ei ole itseisarvo, mutta se on silti sinänsä tavoiteltavaa, koska se säästää resursseja kaikilla tasoilla. Jos ratkaisu yksinkertaiseen ongelmaan (kuten tämän ketjun otsikossa) on mutkikas ja vaatii paljon koodia, se on merkki siitä että jotain jossain on pielessä. Tässä tapauksessa lähinnä IE on pielessä, ja sehän ei ole mikään uutinen. Toistan vielä, että tämä ongelma lakkaa olemasta ongelma sitten kun IE7:n osuus selaimissa putoaa niin alas ettei sitä enää tarvitse tukea. Sitä odotellessa tuo hieman mutkikas css-ratkaisu tai vastaava lienee vähiten huono ratkaisu.

Toivon todella, ettei tässä alettaisi tuhlaamaan energiaa vastustamalla table-tag-layouteja yleisesti. Se lienee turhaa ja aikansaelänyttä. Sen sijaan minulla on pari muutakin tapausta, joissa olen tehnyt asiat itselleni helpoksi käyttämällä table-tagia, enkä ole selvittänyt vastaavaa css-toteutusta. Ehkä otan nämä esiin toisessa ketjussa joskus.

"Värikäs kauhukertomus" oli kyllä hauska, kepeä johdatus css:n alkeisiin. (Jaksoin tällä erää sivulle 29 asti.)

[Touho]

Katselin demosivulta koodipituuksia eri ratkaisuilla, ja table-tagilla tehty ratkaisu oli lyhin. En tarkoita väittää tällä mitään... :-)

Eihän se nyt siitä ole kiinni mikä on lyhintä, vaan siitä että ainut paikka mihin semanttisesti kuuluu käyttää tablea on tabulaarinen data (niinkun nimikin jo vähän vihjaa)!

Lyhyys ei ole itseisarvo, mutta se on silti sinänsä tavoiteltavaa, koska se säästää resursseja kaikilla tasoilla. Jos ratkaisu yksinkertaiseen ongelmaan (kuten tämän ketjun otsikossa) on mutkikas ja vaatii paljon koodia, se on merkki siitä että jotain jossain on pielessä. Tässä tapauksessa lähinnä IE on pielessä, ja sehän ei ole mikään uutinen. Toistan vielä, että tämä ongelma lakkaa olemasta ongelma sitten kun IE7:n osuus selaimissa putoaa niin alas ettei sitä enää tarvitse tukea. Sitä odotellessa tuo hieman mutkikas css-ratkaisu tai vastaava lienee vähiten huono ratkaisu.

Toivon todella, ettei tässä alettaisi tuhlaamaan energiaa vastustamalla table-tag-layouteja yleisesti. Se lienee turhaa ja aikansaelänyttä. Sen sijaan minulla on pari muutakin tapausta, joissa olen tehnyt asiat itselleni helpoksi käyttämällä table-tagia, enkä ole selvittänyt vastaavaa css-toteutusta. Ehkä otan nämä esiin toisessa ketjussa joskus.

"Värikäs kauhukertomus" oli kyllä hauska, kepeä johdatus css:n alkeisiin. (Jaksoin tällä erää sivulle 29 asti.)

Olisi ehkä kannattanut silti lukea loppuun asti, ja vielä yrittää ymmärtää lukemansa. Ainakin näistä vastauksistasi saa semmoisen kuvan, että kaikki nuo ylemmät vastausyritykset ovat menneet harakoille. Ei siis ihme että porukka luovutti.

Et nyt tainnut sisäistää yhtä css-tyylisivujen käytön olennaisinta motiivia, eli sen (html-) dokumentin sisällön ja sen ulkoasun erottaminen toisistaan.

Se dokumentin olennainen sisältö on kaikille erilaisille lukulaitteille sama, ja ulkoasu määräytyy sen mukaan, mihin kulloinenkin lukulaite (esim. selain) kykenee, ja dokumentin ulkoasu määritellään erikseen erillisillä tyylitiedostoilla.

Kannattaisi ihan oikeasti käydä vaikka tuolla linkitetyllä Zen Garden -saitilla ja klikata ne erilaiset sivuleiskat läpi, edes muutama putkeen. Sieltä olisi saattanut tulla se kaivattu ahaa-elämys.

Jos et asiaa vielä ole hoksannut, olennaista tuossa Zen-sivusarjassa on se, että se html-sivu siellä taustalla on kaikissa noissa keskenään hyvinkin erinäköisissä leiskoissa täsmälleen sama. Eikä siellä käytetä saati tarvita mitään table-tägejä html:ssä, eikä edes table-attribuutteja css-tiedostoissa.

Varsinainen ongelmasi ei siis ole mikään css-pähkinä, vaan joku ihan toisenlainen papana.

Esim. kari.patila yritti jo tuossa ketjun alussa vihjata siitä, että lähestymistapasi ongelmaan on vähän pielessä, ja väkerrät tuossa itseäsi vaan ojasta allikkoon. Ei ole juuri mieltä korvata vanhat, sisällön sekaan sotketut table- yms. tägit uudemmilla div style -tägeillä, jos yrität tehdä homman edelleen samalla 15 vuotta vanhalla tekniikalla.

Jotkut MSIE-oikut ovat sitten kokonaan oma juttunsa. Se on tässä käsitellyistä asioista kokonaan erillinen ongelma.
Sinun tapauksessasi se suurin ongelma ei siis ollut tuo MSIE-epäsopivuus, vaan tapa, jolla tuota laatikkoleikkiäsi olet lähtenyt toteuttamaan. Eli niinsanotusti hanuri edellä puuhun kiiveten.

Kannattaisi nyt ihan ensialkuun ottaa mallia vaikka noista linkitetyistä saiteista, ja ruveta tekemään niitä www-sivuja siten kuin tänä päivänä on tapana, eli erottaa sisältö ja ulkoasu toisistaan.

Tee vaikka ensin simppeli sivu, jossa se olennainen sisältö on valmiina, ja tee sen jälkeen sivun ulkoasu loppuun erillisessä css-tyylitiedostossa. Huolehdi alussa vaan siitä, että tavara on kutakuinkin W3C-standardin mukaista.
Vasta ihan viimeisenä voit alkaa murehtimaan jotain MSIE-kummallisuuksia, ja korjata niistä kenties vain ne pahimmat ja helpoiten (standardinmukaista koodia sotkematta) toteutettavat MS-hakkeroinnit.

Sitäpaitsi tuommoisen simppelin laatikkoleiskan toteutus ihan perus-css:llä ei yleensä edes vaadi vielä mitään MSIE-hakkerointeja. Tai ainakaan sen tekoa ei kannata aloittaa siitä, että ruvetaan väkertämään jotain ihme MSIE-hackeja ennen varsinaisen W3C-standardin mukaisen koodin kirjoittamista. Ei enää tänä päivänä.


Eikä sitten kannata vetää tästä hernettä nenään. Voi toki olla, että luennoin tässä vähän turhaan ja olet jo sisäistänyt nämä perusasiat, mutta noista vastauksista vaan sai vähän sellaisne kuvan, että hommassa ollaan vielä pahasti hakoteillä.

Onneksi asia on kuitenkin suht helposti korjattavissa, kunhan se perusoivallus vaan kolahtaa kupoliin. Siitä vaan nuudlaamaan ja harjoittelemaan.