Taulukko vs. css

tähän asti ainakaan vaikuttanut näkymiseen Googlessa.

webnovice kirjoitti:

tähän asti ainakaan vaikuttanut näkymiseen Googlessa.

Taulukkotaitto ei vaikuta indeksointiin millään tavalla.. Framet vaikuttavat, mutta ei mennä siihen nyt.

Miksi sitten valita CSS taulukkotaiton sijaan?

Syitä on monia, aloitan parilla teknisellä syyllä, jotka tuskin kiinnostavat sinua pätkän vertaa, saati sitten sivujen käyttäjää. Mutta koska sillä on "vaikutusta" sivuihin yleensä, niin mainitaan pois.

Taulukoihin tarvitaan enemmän kuvausta (HTML tageja) kuin saman esittämiseen CSS-taitolla. Sivusi ovat siis suurempia ja kestää kauemmin ladata. Se, että kiinnostaako se ketään näin laajakaista-aikana.. En tiedä.

Jotta taulukoita käyttävä sivu voitaisiin esittää, tarvitsee selaimen tietää solun sisältö kokonaisuudessaan (kunnes tulee , pahimmassa tapauksessa ). Selaimen pitää odottaa sivun latautuminen ja sitten vasta mallintaa se. Mainittakoon, että samainen ongelma _saattaa_ tulla joissakin tapauksissa, jos käytetty CSS-taittoa. Jos haluat säästää käyttäjän elämästä pari sekuntia/sivu, niin älä käytä taulukko-taittoa.

Kolmanneksi taulukkoja ei koskaan suunniteltu sivutaittoon, vain ja ainoastaan taulukko-datan esittämiseen. Toimit siis moraalisesti väärin käyttäessä taulukkotaittoa.

No, katsotaanpa sitten syitä jotka saattavat kiinnostaa sinua...

Vaikkakin taulukkotaitto on "helpompi" tehdä, on CSS-taitto huomattavasti helpompi ylläpitää kuin taulukkotaittoa käyttävät sivut. Muutos vain tarvittavaan kohtaan ja homma on sillä selvä. Ei enää turhia laskelmointeja solujen määristä ja spanneista. Kokeile, huomaat eron.

Sivusi näkyvät huomattavasti paremmin myös kannettavilla laitteilla (kännykät, PDA:t...). Ne siis mallintavat sivun paremmin, Googleta aiheesta lisää jos kiinnostus heräsi...

Ulkoasun vaihto käy sutjakasti vain CSS tiedostoa vaihtamalla. Säästää paljon aikaa ja vaivaa, jos nykyinen ulkoasu ei miellytäkkään. Viitaan nyt esim. linkkien sijaintiin ja käyttäytymiseen. (HTML merkkaukseen ei tarvitse koskea)

Lisäksi on etuja, jotka kyllä saadaan taulukkotaittoonkin, mutta on helpommin toteutettavissa jos jo alussa on käytetty CSS-taittoa.

Näistä mainittakoon esimerkiksi eri ulkoasut eri laitteille, esimerkiksi PDA laite tai vaikkapa tulostin ( ) Huomaa kohta media="". Googlette aiheesta lisää, jos kiinnostaa.

En haluaisi mainostaa, mutta mene esim. http://onkosetotta.net/ ja vilkaise "tulostuksen esikatselu" selaimestasi. Siellä on jätetty turhat romppeet pois pritterille tarkoitetusta tyylistä. Mutta kuten sanottu, tämä onnistuu myös taulukkotaitolla, vaikkakin on hieman säädömpää.

Samaisella sivulla on muuten toteutettu pari eri tyyliä, joista käyttäjä voi valita. Tämä on ihan jalo idea, vaikkakin tällä hetkellä turha. Mikään selain ei tällä hetkellä muista valittua tyyliä, kun ladataan uusi sivu (Uusin Opera saattaa muistaa, mutta en mene vannomaan). Kokeile itse, valitse (esimerkki Firefoxiin) Näytä (view) -> Sivun tyylit (Page styles) ja valitse sieltä joku tyyleistä.

Katsotaanpa sitten etuja, jotka tulevat "kaupan päällisinä".

Ruudunlukuohjelmat lukevat tekstin niinkuin se on "tarkoitettu". Jos käytetään taulukkotaittoa voi käydä niin, että ohjelma lukee yhden taulukon solun kokonaan ja siirtyy sitten seuraavaan. Joskus voi käydä niin, että ohjelma lukee solun ylimmän rivin ja siirtyy seuraavaan. Kun kaikki on luettu se siirtyy ensimmäisen solun toiseen riviin. Jos sivujasi selailee joku näkörajoitteinen ihminen, hän ei välttämättä tiedä yhtään mitä sivuillasi koetetaan viestittää.

Sivut näyttävät mainioilta myös tekstipohjaisissa selaimissa (kytke tyylit pois käytöstä, niin saat suuntaa antavan kuvan...)

Lyhyesti sanottuna taulukkotaitto saattaa olla nopeampi ja helponpi tehdä, mutta siinä on ongelmia joita CSS:ssä ei ole. Pitkällä aikavälillä CSS on parempi ratkaisu.

Ei vaikutusta kirjoitti:

Taulukkotaitto ei vaikuta indeksointiin millään tavalla.. Framet vaikuttavat, mutta ei mennä siihen nyt.

Miksi sitten valita CSS taulukkotaiton sijaan?

Syitä on monia, aloitan parilla teknisellä syyllä, jotka tuskin kiinnostavat sinua pätkän vertaa, saati sitten sivujen käyttäjää. Mutta koska sillä on "vaikutusta" sivuihin yleensä, niin mainitaan pois.

Taulukoihin tarvitaan enemmän kuvausta (HTML tageja) kuin saman esittämiseen CSS-taitolla. Sivusi ovat siis suurempia ja kestää kauemmin ladata. Se, että kiinnostaako se ketään näin laajakaista-aikana.. En tiedä.

Jotta taulukoita käyttävä sivu voitaisiin esittää, tarvitsee selaimen tietää solun sisältö kokonaisuudessaan (kunnes tulee , pahimmassa tapauksessa ). Selaimen pitää odottaa sivun latautuminen ja sitten vasta mallintaa se. Mainittakoon, että samainen ongelma _saattaa_ tulla joissakin tapauksissa, jos käytetty CSS-taittoa. Jos haluat säästää käyttäjän elämästä pari sekuntia/sivu, niin älä käytä taulukko-taittoa.

Kolmanneksi taulukkoja ei koskaan suunniteltu sivutaittoon, vain ja ainoastaan taulukko-datan esittämiseen. Toimit siis moraalisesti väärin käyttäessä taulukkotaittoa.

No, katsotaanpa sitten syitä jotka saattavat kiinnostaa sinua...

Vaikkakin taulukkotaitto on "helpompi" tehdä, on CSS-taitto huomattavasti helpompi ylläpitää kuin taulukkotaittoa käyttävät sivut. Muutos vain tarvittavaan kohtaan ja homma on sillä selvä. Ei enää turhia laskelmointeja solujen määristä ja spanneista. Kokeile, huomaat eron.

Sivusi näkyvät huomattavasti paremmin myös kannettavilla laitteilla (kännykät, PDA:t...). Ne siis mallintavat sivun paremmin, Googleta aiheesta lisää jos kiinnostus heräsi...

Ulkoasun vaihto käy sutjakasti vain CSS tiedostoa vaihtamalla. Säästää paljon aikaa ja vaivaa, jos nykyinen ulkoasu ei miellytäkkään. Viitaan nyt esim. linkkien sijaintiin ja käyttäytymiseen. (HTML merkkaukseen ei tarvitse koskea)

Lisäksi on etuja, jotka kyllä saadaan taulukkotaittoonkin, mutta on helpommin toteutettavissa jos jo alussa on käytetty CSS-taittoa.

Näistä mainittakoon esimerkiksi eri ulkoasut eri laitteille, esimerkiksi PDA laite tai vaikkapa tulostin ( ) Huomaa kohta media="". Googlette aiheesta lisää, jos kiinnostaa.

En haluaisi mainostaa, mutta mene esim. http://onkosetotta.net/ ja vilkaise "tulostuksen esikatselu" selaimestasi. Siellä on jätetty turhat romppeet pois pritterille tarkoitetusta tyylistä. Mutta kuten sanottu, tämä onnistuu myös taulukkotaitolla, vaikkakin on hieman säädömpää.

Samaisella sivulla on muuten toteutettu pari eri tyyliä, joista käyttäjä voi valita. Tämä on ihan jalo idea, vaikkakin tällä hetkellä turha. Mikään selain ei tällä hetkellä muista valittua tyyliä, kun ladataan uusi sivu (Uusin Opera saattaa muistaa, mutta en mene vannomaan). Kokeile itse, valitse (esimerkki Firefoxiin) Näytä (view) -> Sivun tyylit (Page styles) ja valitse sieltä joku tyyleistä.

Katsotaanpa sitten etuja, jotka tulevat "kaupan päällisinä".

Ruudunlukuohjelmat lukevat tekstin niinkuin se on "tarkoitettu". Jos käytetään taulukkotaittoa voi käydä niin, että ohjelma lukee yhden taulukon solun kokonaan ja siirtyy sitten seuraavaan. Joskus voi käydä niin, että ohjelma lukee solun ylimmän rivin ja siirtyy seuraavaan. Kun kaikki on luettu se siirtyy ensimmäisen solun toiseen riviin. Jos sivujasi selailee joku näkörajoitteinen ihminen, hän ei välttämättä tiedä yhtään mitä sivuillasi koetetaan viestittää.

Sivut näyttävät mainioilta myös tekstipohjaisissa selaimissa (kytke tyylit pois käytöstä, niin saat suuntaa antavan kuvan...)

Lyhyesti sanottuna taulukkotaitto saattaa olla nopeampi ja helponpi tehdä, mutta siinä on ongelmia joita CSS:ssä ei ole. Pitkällä aikavälillä CSS on parempi ratkaisu.

Lue lisää

Minulla on sivut, joissa on vasemmalla kapeampi valikko ja oikealla leveämpi sisältö. Olen tehnyt sen taulukolla, tässä yksinkertaistettuna:


Valikko
Sisältö


Valikon leveys on kiinteä 200. Sisällön leveys säätyy automaattisesti selainikkunan leveyden mukaan. Valikon ja sisällön korkeus on aina automaattisesti sama. Eli kaikki toimii juuri niin kuin haluan.

Voisiko joku kertoa ihan mallin kanssa, miten täsmälleen vastaavan saa tehtyä CSS:llä. Itse olen joskus yrittänyt, mutta siinä ilmeni kaikenlaisia ongelmia.

Taulukkotaittaja kirjoitti:

Minulla on sivut, joissa on vasemmalla kapeampi valikko ja oikealla leveämpi sisältö. Olen tehnyt sen taulukolla, tässä yksinkertaistettuna:


Valikko
Sisältö


Valikon leveys on kiinteä 200. Sisällön leveys säätyy automaattisesti selainikkunan leveyden mukaan. Valikon ja sisällön korkeus on aina automaattisesti sama. Eli kaikki toimii juuri niin kuin haluan.

Voisiko joku kertoa ihan mallin kanssa, miten täsmälleen vastaavan saa tehtyä CSS:llä. Itse olen joskus yrittänyt, mutta siinä ilmeni kaikenlaisia ongelmia.

Lue lisää

seuraavassa on yksinkertainen esimerkki:

http://www.oswd.org/design/preview/id/2426

lataa sivu koneellesi, avaa css ja html tiedostot ja rupea tutkimaan :)

Ei vaikutusta kirjoitti:

Taulukkotaitto ei vaikuta indeksointiin millään tavalla.. Framet vaikuttavat, mutta ei mennä siihen nyt.

Miksi sitten valita CSS taulukkotaiton sijaan?

Syitä on monia, aloitan parilla teknisellä syyllä, jotka tuskin kiinnostavat sinua pätkän vertaa, saati sitten sivujen käyttäjää. Mutta koska sillä on "vaikutusta" sivuihin yleensä, niin mainitaan pois.

Taulukoihin tarvitaan enemmän kuvausta (HTML tageja) kuin saman esittämiseen CSS-taitolla. Sivusi ovat siis suurempia ja kestää kauemmin ladata. Se, että kiinnostaako se ketään näin laajakaista-aikana.. En tiedä.

Jotta taulukoita käyttävä sivu voitaisiin esittää, tarvitsee selaimen tietää solun sisältö kokonaisuudessaan (kunnes tulee , pahimmassa tapauksessa ). Selaimen pitää odottaa sivun latautuminen ja sitten vasta mallintaa se. Mainittakoon, että samainen ongelma _saattaa_ tulla joissakin tapauksissa, jos käytetty CSS-taittoa. Jos haluat säästää käyttäjän elämästä pari sekuntia/sivu, niin älä käytä taulukko-taittoa.

Kolmanneksi taulukkoja ei koskaan suunniteltu sivutaittoon, vain ja ainoastaan taulukko-datan esittämiseen. Toimit siis moraalisesti väärin käyttäessä taulukkotaittoa.

No, katsotaanpa sitten syitä jotka saattavat kiinnostaa sinua...

Vaikkakin taulukkotaitto on "helpompi" tehdä, on CSS-taitto huomattavasti helpompi ylläpitää kuin taulukkotaittoa käyttävät sivut. Muutos vain tarvittavaan kohtaan ja homma on sillä selvä. Ei enää turhia laskelmointeja solujen määristä ja spanneista. Kokeile, huomaat eron.

Sivusi näkyvät huomattavasti paremmin myös kannettavilla laitteilla (kännykät, PDA:t...). Ne siis mallintavat sivun paremmin, Googleta aiheesta lisää jos kiinnostus heräsi...

Ulkoasun vaihto käy sutjakasti vain CSS tiedostoa vaihtamalla. Säästää paljon aikaa ja vaivaa, jos nykyinen ulkoasu ei miellytäkkään. Viitaan nyt esim. linkkien sijaintiin ja käyttäytymiseen. (HTML merkkaukseen ei tarvitse koskea)

Lisäksi on etuja, jotka kyllä saadaan taulukkotaittoonkin, mutta on helpommin toteutettavissa jos jo alussa on käytetty CSS-taittoa.

Näistä mainittakoon esimerkiksi eri ulkoasut eri laitteille, esimerkiksi PDA laite tai vaikkapa tulostin ( ) Huomaa kohta media="". Googlette aiheesta lisää, jos kiinnostaa.

En haluaisi mainostaa, mutta mene esim. http://onkosetotta.net/ ja vilkaise "tulostuksen esikatselu" selaimestasi. Siellä on jätetty turhat romppeet pois pritterille tarkoitetusta tyylistä. Mutta kuten sanottu, tämä onnistuu myös taulukkotaitolla, vaikkakin on hieman säädömpää.

Samaisella sivulla on muuten toteutettu pari eri tyyliä, joista käyttäjä voi valita. Tämä on ihan jalo idea, vaikkakin tällä hetkellä turha. Mikään selain ei tällä hetkellä muista valittua tyyliä, kun ladataan uusi sivu (Uusin Opera saattaa muistaa, mutta en mene vannomaan). Kokeile itse, valitse (esimerkki Firefoxiin) Näytä (view) -> Sivun tyylit (Page styles) ja valitse sieltä joku tyyleistä.

Katsotaanpa sitten etuja, jotka tulevat "kaupan päällisinä".

Ruudunlukuohjelmat lukevat tekstin niinkuin se on "tarkoitettu". Jos käytetään taulukkotaittoa voi käydä niin, että ohjelma lukee yhden taulukon solun kokonaan ja siirtyy sitten seuraavaan. Joskus voi käydä niin, että ohjelma lukee solun ylimmän rivin ja siirtyy seuraavaan. Kun kaikki on luettu se siirtyy ensimmäisen solun toiseen riviin. Jos sivujasi selailee joku näkörajoitteinen ihminen, hän ei välttämättä tiedä yhtään mitä sivuillasi koetetaan viestittää.

Sivut näyttävät mainioilta myös tekstipohjaisissa selaimissa (kytke tyylit pois käytöstä, niin saat suuntaa antavan kuvan...)

Lyhyesti sanottuna taulukkotaitto saattaa olla nopeampi ja helponpi tehdä, mutta siinä on ongelmia joita CSS:ssä ei ole. Pitkällä aikavälillä CSS on parempi ratkaisu.

Lue lisää

hyvästä ja perusteellisesta vastauksesta! Pitää varmaan seuraava sivusto tehdä ilman taulukoita...

webnovice kirjoitti:

seuraavassa on yksinkertainen esimerkki:

http://www.oswd.org/design/preview/id/2426

lataa sivu koneellesi, avaa css ja html tiedostot ja rupea tutkimaan :)

Lue lisää

Eipä säädy tuossa sivun sisällön leveys selainikkunan leveyden mukaan.

Eikä sisältöä vieritettäessä paikallaan pysyvä valikko taida toimia IE6:ssa.

Edelleen olen pakotettu taulukkotaittoon...

Taulukkotaittaja kirjoitti:

Minulla on sivut, joissa on vasemmalla kapeampi valikko ja oikealla leveämpi sisältö. Olen tehnyt sen taulukolla, tässä yksinkertaistettuna:


Valikko
Sisältö


Valikon leveys on kiinteä 200. Sisällön leveys säätyy automaattisesti selainikkunan leveyden mukaan. Valikon ja sisällön korkeus on aina automaattisesti sama. Eli kaikki toimii juuri niin kuin haluan.

Voisiko joku kertoa ihan mallin kanssa, miten täsmälleen vastaavan saa tehtyä CSS:llä. Itse olen joskus yrittänyt, mutta siinä ilmeni kaikenlaisia ongelmia.

Lue lisää

On aika rumaa liittää koodi suoraan tähän, mutta vaihtoehtojen puutteessa sen teen.

*** alkaa ***


Esimerkki


#palkki {
background-color: green;
width: 200px; /* Kannattaa muuten käyttää jotain muuta kuin px */
float: left;
}
#sisalto {
background-color: red;
margin-left: 200px; /* Sama luku kuin #palkin width */
}

#palkki, #sisalto {
min-height: 500px; /* Ei liity esimerkkiin mitenkään, mutta näyttää hienommalta kun hieman korkeutta */
}






Tämä tässä on se vasen palkki


Ja tänne kaiketi olet ajatellut laittaa sisältöä.






*** Loppuu ***

Sikäli jos ymmärsin yhtään oikein, niin sinulla on tuollainen malli hakusessa?


Koita ymmärtää tuosta jotain. Perusidea on siis sellainen, että #palkki on 200px levyinen (kuten sinun mallissasi). Tämän jälkeen laitetaan #sisällön vasenta marginaalia juurikin saman verran keskemmälle ja asetetaan #palkki "kellumaan".

Taustavärit on selventämässä leiskaa.

Ja nykyään kun on jostain kumman syystä muotia laittaa kaikki keskelle, niin kokeileppa lisätä seuraava pätkä tyyleihin..

#kontti {
margin: 0px auto 0px auto;
width: 500px;
}

Tuossa 500px on asia-alueen leveys, eli palkki on 200px ja sisältö 500-200=300px.

Toivottavasti pääset alkuun.
Haluan vielä todeta, että tapoja toteuttaa sama on ties kuinka monta. Älä yritä käyttää tuota pohjana, yritä ymmärtää mitä siinä tapahtuu. Täten pystyt rakentamaan tuon pohjalta omiin tarpeisiisi soveltuvan leiskan.

tässä malli kirjoitti:

On aika rumaa liittää koodi suoraan tähän, mutta vaihtoehtojen puutteessa sen teen.

*** alkaa ***


Esimerkki


#palkki {
background-color: green;
width: 200px; /* Kannattaa muuten käyttää jotain muuta kuin px */
float: left;
}
#sisalto {
background-color: red;
margin-left: 200px; /* Sama luku kuin #palkin width */
}

#palkki, #sisalto {
min-height: 500px; /* Ei liity esimerkkiin mitenkään, mutta näyttää hienommalta kun hieman korkeutta */
}






Tämä tässä on se vasen palkki


Ja tänne kaiketi olet ajatellut laittaa sisältöä.






*** Loppuu ***

Sikäli jos ymmärsin yhtään oikein, niin sinulla on tuollainen malli hakusessa?


Koita ymmärtää tuosta jotain. Perusidea on siis sellainen, että #palkki on 200px levyinen (kuten sinun mallissasi). Tämän jälkeen laitetaan #sisällön vasenta marginaalia juurikin saman verran keskemmälle ja asetetaan #palkki "kellumaan".

Taustavärit on selventämässä leiskaa.

Ja nykyään kun on jostain kumman syystä muotia laittaa kaikki keskelle, niin kokeileppa lisätä seuraava pätkä tyyleihin..

#kontti {
margin: 0px auto 0px auto;
width: 500px;
}

Tuossa 500px on asia-alueen leveys, eli palkki on 200px ja sisältö 500-200=300px.

Toivottavasti pääset alkuun.
Haluan vielä todeta, että tapoja toteuttaa sama on ties kuinka monta. Älä yritä käyttää tuota pohjana, yritä ymmärtää mitä siinä tapahtuu. Täten pystyt rakentamaan tuon pohjalta omiin tarpeisiisi soveltuvan leiskan.

Lue lisää

Ei tarvi laitella noita "yritä ymmärtää" -juttuja. Ymmärrän css:n varsin hyvin, mutta koska en saa sillä tehtyä samaa asiaa kuin taulukolla, joudun edelleen taittamaan sivuni taulukolla. Joten ihan turha höpöttää siitä, ettei taulukkoa saisi käyttää sivun taitamiseen.

Css:llä ei siis vieläkään saa tehtyä sivua niin, että valikko-osa on esim. 200 pikseliä leveä, ja sisältöosa täyttää loput selainikkunan leveydestä. Käytän siis taulukkoa, koska sillä tuon saa tehtyä helposti.

Taulukkotaittaja kirjoitti:

Ei tarvi laitella noita "yritä ymmärtää" -juttuja. Ymmärrän css:n varsin hyvin, mutta koska en saa sillä tehtyä samaa asiaa kuin taulukolla, joudun edelleen taittamaan sivuni taulukolla. Joten ihan turha höpöttää siitä, ettei taulukkoa saisi käyttää sivun taitamiseen.

Css:llä ei siis vieläkään saa tehtyä sivua niin, että valikko-osa on esim. 200 pikseliä leveä, ja sisältöosa täyttää loput selainikkunan leveydestä. Käytän siis taulukkoa, koska sillä tuon saa tehtyä helposti.

Lue lisää

"Ei tarvi laitella noita "yritä ymmärtää" -juttuja"
Pahoittelen, jos koit viestini loikkaavaksi, se ei ollut tarkoitus. Sain vain ensimmäisestä viestistäsi sellaisen kuvan, ettei CSS olisi vielä ollut ihan tuttua kauraa.

"Joten ihan turha höpöttää siitä, ettei taulukkoa saisi käyttää sivun taitamiseen"

Missään vaiheessa en ole niin väittänytkään. Viestissäni lähinnä heitin ilmaan pari ajatusta, miksi CSS-taitto on suositeltavampaa kuin taulukkotaitto.

"Css:llä ei siis vieläkään saa tehtyä sivua niin, että valikko-osa on esim. 200 pikseliä leveä, ja sisältöosa täyttää loput selainikkunan leveydestä. Käytän siis taulukkoa, koska sillä tuon saa tehtyä helposti."

Kokeilitko tuota antamaani koodia. Ainakin minulla se toimii juurikin niin kuin kuvailit taulukkotaittoesimerkkisi. Toki esimerkkisi oli pelkistetty, joten en tiedä oletko viritellyt siihen jotain muutakin toiminnallisuutta joka esimerkissäsi ei käynyt ilmi.

Ainut ero tuolla koodinpätkällä on se, että vasen alue ei veny muun sivun mukana. Tämä ongelma on helposti korjattavissa joko antamalla #kontille ja #palkille height: 100% tai vaihtoehtoisesti #kontille vihreää taustaa jolloin #palkki _näyttää_ venyneeltä.

"Käytän siis taulukkoa, koska sillä tuon saa tehtyä helposti."
Jep.. Taulukolla tuo on parin minuutin homma, CSS:llä saat varata pahimmillaan puolisen tuntia sen tekemiseen. Mutta kuten todettu (aikaisemmassa viestissäni) CSS olisi loppupelissä parempi vaihtoehto.

Taulukkotaittaja kirjoitti:

Ei tarvi laitella noita "yritä ymmärtää" -juttuja. Ymmärrän css:n varsin hyvin, mutta koska en saa sillä tehtyä samaa asiaa kuin taulukolla, joudun edelleen taittamaan sivuni taulukolla. Joten ihan turha höpöttää siitä, ettei taulukkoa saisi käyttää sivun taitamiseen.

Css:llä ei siis vieläkään saa tehtyä sivua niin, että valikko-osa on esim. 200 pikseliä leveä, ja sisältöosa täyttää loput selainikkunan leveydestä. Käytän siis taulukkoa, koska sillä tuon saa tehtyä helposti.

Lue lisää

Et ymmärrä css:ää, jos et tajua, ettei css:ssä ole mitään rajoituksia.

Onko liian vaikea tajuta, että haluamasi saa näin:


#palkki {
background-color: green;
width: 200px; /* Kannattaa muuten käyttää jotain muuta kuin px */
float: left;
}
#sisalto {
background-color: red;
width:*%;
margin-left: 200px; /* Sama luku kuin #palkin width */
}

#palkki, #sisalto {
min-height: 500px; /* Ei liity esimerkkiin mitenkään, mutta näyttää hienommalta kun hieman korkeutta */
}

webnovice kirjoitti:

Et ymmärrä css:ää, jos et tajua, ettei css:ssä ole mitään rajoituksia.

Onko liian vaikea tajuta, että haluamasi saa näin:


#palkki {
background-color: green;
width: 200px; /* Kannattaa muuten käyttää jotain muuta kuin px */
float: left;
}
#sisalto {
background-color: red;
width:*%;
margin-left: 200px; /* Sama luku kuin #palkin width */
}

#palkki, #sisalto {
min-height: 500px; /* Ei liity esimerkkiin mitenkään, mutta näyttää hienommalta kun hieman korkeutta */
}

Lue lisää

Ensimmäisen kerran vasta kukaan mainitsi "width:*%;". Enkä silti edelleenkään saa millään esimerkillä valikon korkeutta säätymään automaattisesti samaksi kuin sisällön korkeus. Sisällön korkeus on sisällöstä riippuen esim. 50 - 50000 pikseliä, eikä css:llä taida saada mitenkään yhden divin korkeutta automaattisesti samaksi kuin toisen divin korkeus? Tyhmän näköistä, kun vihreä vasen valikko loppuu eri kohdassa kuin punainen oikea sisältö. Taulukkotaitolla tuo onnistuu ihan automaattisesti.

Taulukkotaittaja kirjoitti:

Ensimmäisen kerran vasta kukaan mainitsi "width:*%;". Enkä silti edelleenkään saa millään esimerkillä valikon korkeutta säätymään automaattisesti samaksi kuin sisällön korkeus. Sisällön korkeus on sisällöstä riippuen esim. 50 - 50000 pikseliä, eikä css:llä taida saada mitenkään yhden divin korkeutta automaattisesti samaksi kuin toisen divin korkeus? Tyhmän näköistä, kun vihreä vasen valikko loppuu eri kohdassa kuin punainen oikea sisältö. Taulukkotaitolla tuo onnistuu ihan automaattisesti.

Lue lisää

miten olisi valikon alapuolelle toinen div, jonka korkeus on height:*%;

webnovice kirjoitti:

miten olisi valikon alapuolelle toinen div, jonka korkeus on height:*%;

Eipäs tuo edellinen ehkä toimikaan, joten pitää vähän "huijata" katsojaa vaikka näin:






Esimerkki



#tausta {
background-color: blue;
}

#vasenpalkki {
background-color: blue;
width: 200px; /* Kannattaa muuten käyttää jotain muuta kuin px */
height:100%;
float:left;
}

#linkit {
background-color: blue;
padding: 20px 50px;
font-weight:bold;
}

#sisalto {
background-color: #ccc;
width:*%;
margin-left: 200px; /* Sama luku kuin #palkin width */
padding: 20px 50px;
}







Linkki
Linkki
Linkki
Linkki
Linkki
Linkki




Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla eleifend venenatis leo. Donec venenatis
posuere lectus. Pellentesque turpis arcu, elementum quis, molestie ac, gravida auctor, tortor. Vestibulum ante
ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec volutpat. Nunc nisi. Nunc
vitae sem. Duis velit. Praesent iaculis tempor risus. Fusce a ipsum. Ut pharetra tempus dolor. Sed molestie
feugiat ante. Sed eu dui.
Aenean non sapien vitae tellus gravida convallis. Suspendisse venenatis molestie odio. Suspendisse eu leo.
sectetuer eu, cursus at, dignissim et, mauris. Morbi placerat tortor eu leo bibendum adipiscing.
venenatis, enim nec ullamcorper luctus, turpis purus pulvinar ante, in elementum nisi leo a eros. Suspendisse
pellentesque, diam nec vestibulum ornare, leo tellus vestibulum ipsum, at lobortis leo tortor vel est. Nulla
facilisi. Maecenas nonummy, tortor at condimentum ornare, pede justo facilisis purus, ac laoreet diam mi quis
eu ipsum ut nisi tempus aliquet. Donec pellentesque purus in urna. Aenean blandit, nunc at tincidunt
fringilla at, gravida a, felis. Fusce malesuada neque vitae nisl. Morbi sagittis rhoncus leo. Donec erat
amet mi facilisis molestie. Aenean quam neque, fringilla non, convallis sed, pellentesque sit amet, metus.
Vestibulum justo. Phasellus neque leo, iaculis nec, facilisis et, faucibus eu, diam. Integer a neque vitae
massa laoreet volutpat. Duis nibh ipsum, viverra vel, lobortis ultricies, ultrices in, magna.
Vivamus congue faucibus sem. Nunc non pede. Integer sagittis dignissim ligula. Donec ac ipsum. Vestibulum
dignissim, purus non bibendum vestibulum, odio mauris sagittis tortor, eget ullamcorper ligula augue ac purus.
bibendum libero nisl et sapien. Quisque a mi. Morbi odio lectus, semper quis, dictum sed, porta quis, libero.
Fusce nibh nunc, consectetuer in, faucibus et, imperdiet sed, ante. Fusce risus mi, vehicula a, dapibus at,
feugiat id, sapien. Nunc ipsum enim, iaculis congue, ullamcorper eget, ultricies sed, sem. Integer tincidunt,
odio eu ornare accumsan, eros massa eleifend libero, id fringilla massa metus eget enim.
Pellentesque libero. Morbi quam nunc, accumsan eu, laoreet et, commodo eu, ante. Phasellus massa.

Taulukkotaittaja kirjoitti:

Ensimmäisen kerran vasta kukaan mainitsi "width:*%;". Enkä silti edelleenkään saa millään esimerkillä valikon korkeutta säätymään automaattisesti samaksi kuin sisällön korkeus. Sisällön korkeus on sisällöstä riippuen esim. 50 - 50000 pikseliä, eikä css:llä taida saada mitenkään yhden divin korkeutta automaattisesti samaksi kuin toisen divin korkeus? Tyhmän näköistä, kun vihreä vasen valikko loppuu eri kohdassa kuin punainen oikea sisältö. Taulukkotaitolla tuo onnistuu ihan automaattisesti.

Lue lisää

http://www.intensivstation.ch/files/en_templates/2/template-1.html

Vasen palkki (Menu left) korkeus muuttuu sisällön (Content) mukana. Jos haluaa koko näytön levyiseksi, muuttaa vain:

#container {
width:100%;
}

webnovice kirjoitti:

http://www.intensivstation.ch/files/en_templates/2/template-1.html

Vasen palkki (Menu left) korkeus muuttuu sisällön (Content) mukana. Jos haluaa koko näytön levyiseksi, muuttaa vain:

#container {
width:100%;
}

Lue lisää

Ja mahdollisesti myös #containerin parent-elementin width-määreitä.

Width: 100%:han on siis periytyvä ja määräytyy parent-elementtinsä mukaan. Jos siinä [parentissa] ei ole määritelty widthiä ei tuokaan vaikuta mihinkään.

Sanon siis mahdollisesti, koska en laiskuutani jaksa tarkastaa ko. sivun sorsaa, mutta tuon kaltainen ongelma on koitunut kohtalokseni useita kertoa [sille on vaan niin sokea]