Hei!
Tein tässä verkkosivut osoitteeseen http://www.moniväylä.tk ja aivan huomaamattani tein sivusta järjettömän leveän. Kuinka saisin sen mukailemaan pieniä näyttöjä? Esimerkiksi, että sivusta tulisi näkyviin sitten enemmän jos omaat suuremman näytön.
Ikävintä on, että pienellä näytöllä joutuu rullaamaan leveysrullaa. : <
Kiitos.
sweetone kirjoitti:
Tein tässä verkkosivut osoitteeseen http://www.moniväylä.tk
Muuten ihan hauska parodia (öhalpaa verkkosivu suunitteluaö – ja öUusi tasokas ulkoasu vastaa nyt palveluittemme tasoaö), mutta oikeastikin tuollaista tehdään ja myydään, joten parodian mahdollisuudet ovat todellisuudessa aika heikot.
lainaus:
ja aivan huomaamattani tein sivusta järjettömän leveän.
Ihankohan vahingossa? Mutta tuohan on vain pieni osa järjettömyydestä. Esimerkiksi linkkielementit ovat tyhjiä ja niihin sijoitetaan _taustakuviksi_ tekstiä kuvina. Voisiko vielä vähän enemmän vaivaa näkemällä rikkoa käytettävyyden tehokkaammin?
lainaus:
Kuinka saisin sen mukailemaan pieniä näyttöjä? Esimerkiksi, että sivusta tulisi näkyviin sitten enemmän jos omaat suuremman näytön.
Just joo. Onhan tämä parodiaa, onhan? Kullakin sivulla on pienen kappaleen verran sisällöntapaista. Se kyllä mahtuu melkein mihin vain, jos et ihan erikseen näe vaivaa rikkoaksesi toiminnallisuuden.
Mitähän muuten otsikolla on tekemistä kysymyksen sisällön kanssa?
Juuri tämän takia en ole täällä mitään ennen kehdannut kysyä, kun täällä on näitä aivottomia idiootteja. Jään odottamaan järkevää vastausta.
width: 1650px;
Onko sinulla tuollainen näyttö?
Komeetaha toi on suurena...
Javascriptillä tutkit näytön leveyden ja tulostat oman css-fileen... tai pääasia että pienennät tuota sivun leveyttä käteen käyväksi. Vaikka jokaisella kävijälle sivun leveys just sama kuin on näytön leveys :)
Ehtoja on monia vaihdettavaksi :)
width: 1650px;
lainaus:
Komeetaha toi on suurena...
Onko sinulla tuollainen näyttö?
Kiitos, kyllä on. :)
lainaus:
Javascriptillä tutkit näytön leveyden ja tulostat oman css-fileen... tai pääasia että pienennät tuota sivun leveyttä käteen käyväksi. Vaikka jokaisella kävijälle sivun leveys just sama kuin on näytön leveys :)
Ehtoja on monia vaihdettavaksi :)
Tuli kokeiltua width: 100%; ym. vaihtoehtoja, kun koitin saada sivun mukailemaan kävijän näytön leveyttä, mutta en saanut sitä mitenkään toimimaan sivu hajosi joka kerta, kun koitin pienentää arvoja.
Tietty joo jos palottelis tota sivua jokaselle eri resoluutiolle ni se tarttis aika monta .css tiedostoa ja vaivaa.
Jotain yksinertaista ratkaisu-mallia?
Mod. huom: koodi ei ole lainaus!
Yksi mahdollisuus on poistaa tuosta taustakuvasta teksti "Moniväylä" ja tulostaa se taustakuvan päälle... joko kuvana, josta osa on läpinäkyvä tai tekstinä.
Miksi sivulla ylipaansa on leveys? Toimita sisalto, jonka selain saa sovittaa ruudulle niin kuin parhaaksi nakee.
Lahinna taulukoiden kanssa joudut tekemaan kompromisseja, joissa kaytettavyyden vuoksi kannattaa karsia kaikki ylimaaraista leveytta aiheuttava sisalto.
pistemies kirjoitti:
Yksi mahdollisuus on poistaa tuosta taustakuvasta teksti "Moniväylä" ja tulostaa se taustakuvan päälle... joko kuvana, josta osa on läpinäkyvä tai tekstinä.
Hyvä idea, mutta olen paloitellut kuvat siten erikoisesti, että se tekisi siitä hieman vaikeaa.
jcd3nton kirjoitti:
Miksi sivulla ylipaansa on leveys? Toimita sisalto, jonka selain saa sovittaa ruudulle niin kuin parhaaksi nakee.
Jos jätän leveyden pois niin jostain kumman syystä sivusto hajoaa.
Mod. huom: koodi ei ole lainaus!
Löysin tälläsen kivan ja teen sen nyt kai sitten tolla alkuperäisellä ehdotuksella, että omat stylesheetit.
Kiitos vastanneille. :)
<script type="text/JavaScript">
if(screen.width == 1024 && screen.height == 768){
document.write('<link href="menu.css" rel="stylesheet" type="text/css">');
}
if(screen.width == 1280 && screen.height == 800){
document.write('<link href="menu2.css" rel="stylesheet" type="text/css">');
}
if(screen.width == 1440 && screen.height == 900){
document.write('<link href="menu2.css" rel="stylesheet" type="text/css">');
}
if(screen.width == 1680 && screen.height == 1050){
document.write('<link href="monivayla.css" rel="stylesheet" type="text/css">');
}
</script>Tuo javascript ehdotelma taisi olla hiukan kieli poskella tehty ehdotus? Mulle esimerkiksi ei tullut mikään tyylisivu käyttöön. Kuitenkin alla olen muuntanut etusivusi koodin hiukan loogisemmaksi, jota voit tarpeen mukaan tyylitellä haluamallasi tavalla.
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" type="text/css" href="monivayla.css" /> <title>MoniVäylä</title> </head> <body> <h1>Tervetuloa MoniVäylään!</h1> <ul> <li><a href="/" title="etusivulle">Etusivulle</a></li> <li><a href="/uutiset" title="uutiset">Uutiset</a></li> <li><a href="/pelipalvelimet" title="pelipalvelut">Pelipalvelut</a></li> <li><a href="/palvelut" title="palvelut">Muut palvelut</a></li> <li><a href="/tietoa" title="lisätietoja">Lisätietoja</a></li> </ul> <p> Tarjoamme halpaa verkkosivu suunittelua ja pelaajille ilmaisia peli-palveleitamme. Lisätietoa <a href="/peli_palvelimet">peli-palvelimista</a> ja halvoista verkkosivun <a href="/palvelut">suunittelupalveluista</a>. Pyrimme luomaan jotakin pysyvää johon sitten voimme jättää oman kädenjälkemme. </p> <p> Jatkossa tarjoamme mahdollisesti teamspeak3-palvelimia ja sivutilaa. </p> </body> </html>
sweetone kirjoitti:
Löysin tälläsen kivan
Törkeen hieno skripti. Itsellä ei tulisi millään koneista mikään noista stylesheeteistä käyttöön ;D
(Ruutujen koot eri koneissa 1920x1080, 1920x1200 ja 2560x1600)
Sic! pointti ei oo että siitä tulis hyvä lisäämällä noi mun tarkkuudet.
:) niinpä niin. Pointti tais olla, että isomman näytön omaavat eivät nää koko sivua jos en lisää niitä. Asia korjattu.
Psst: näytön koolla ja selainikkunan koolla ei oo hirveästi mitään yhteistä. Ei sillä, en minä tuota viritystäs muutenkään näkis kun JS on oletuksena pois päältä.
Niin, ja onhan tuo nyt muutenki naurettavaa, että saitti, jolla on sen verran tekstiä, että se mahtuu kerralla kännykän näytölle ei muka mahdu mun miniläppärin näytölle.
jcd3nton kirjoitti:
Miksi sivulla ylipaansa on leveys? Toimita sisalto, jonka selain saa sovittaa ruudulle niin kuin parhaaksi nakee.
Sivuille tai niiden osille (kuten tekstikappaleille) kannattaa kuitenkin yleensä asettaa _maksimileveys_, koska monet yhä käyttävät selainta jopa koko ruudun kokoisena, koska eivät ole oppineet hyödyntämään nykyaikaisia näyttöjä.
lainaus:
Lahinna taulukoiden kanssa joudut tekemaan kompromisseja, joissa kaytettavyyden vuoksi kannattaa karsia kaikki ylimaaraista leveytta aiheuttava sisalto.
Tietojen taulukoinnissa on omat ongelmansa, mutta liiallinen leveys on kuitenkin melko harvinainen ongelma. Paljon tavallisempaa on, että mitään ongelmaa ei olisi, ellei sitä erikseen ja isolla vaivalla luotaisi rakentamalla sivu taulukolla (tai kömpelömmin ja yleensä epäluotettavammin CSS-asemoinnilla) niin, että sivulla on määrätty leveys ja vieläpä sarakkeidenkin leveydet on määrätty. Tästähän näimmekin jo rajun parodian.
Miten voi tehdä "huomaamattaan" sivun, jonka lähdekoodissa lukee tuollainen pikselimääräinen lukuarvo?
Elementtien asettelu kelluvina peräkkäin ei ole kovin skaalautuva ratkaisu, ja vielä suurempana ongelmana pitäisin, että koodissa on iso kasa sisällön kannalta täysin turhia palikoita – kuin taulukkotaitossa.
Helpoin ratkaisu ongelmaasi olisi varmaankin tehdä sivusta kapea versio keskelle ruutua ja asetella sitten reunoille tulevat lisäpalikat tähän ympärille (position: absolute tai fixed). Näin sama koodi toimisi kaikilla mutta vaadittu leveys olisi vain sisältöosan verran.
Pienenpieni plussa siitä, että et ole tämän sotkun keskellä mainostanut sivuillasi ammattitaitoista suunnittelua tai peräti huippuosaamista, kuten jotkut tekevät. :D
Sivu on täysin väärin tehty, ei touhon mitään javascript kikkaulua tarvi.
Tee sivu kokonaan uusiksi.
Moniväylä logo diviin:
width: 900px;
margin-left: auto;
magin-right: auto;
(Kiinteä leveys, mut elää selaimen kanssa(pysyy keskellä))
Sama sisalto - diville:
width: 900px;
margin-left: auto;
magin-right: auto;
Eli käytännössä ainut asia mikä elää on headeri tausta-kuva, josta teet suikaleen joka toistetaan vaakasuunnassa.. Eli => repeat:x
Yucca kirjoitti:
monet yhä käyttävät selainta jopa koko ruudun kokoisena, koska eivät ole oppineet hyödyntämään nykyaikaisia näyttöjä
Monet myös käyttävät selainta jopa samoissa mitoissa, kuin kymmenen vuotta sitten, koska eivät ole oppineet hyödyntämään useita työpöytiä tai alt-tabia. Trollolloo. Oiskohan tottumiskysymys? Toki se raja jossakin tulee vastaan, mutta kyllä vielä 1920x1080 näyttökoolla sivustot ovat toimineet kiitettävän hyvin.
Jos haluat käyttää tuota javascriptiä, älä (!) tutki näytön korkeutta lainkaan, koska leveydestähän nyt homma kiikastaa.
Minun näyttöni leveys on 1280 px ja korkeus 1024 px (vanha littu).
Ja suositeltavaa on näyttää jokin tyyli niillekin joilla ei ole javascript päällä. Sinulla on nyt koko ajan oletuksena tuo kaponen 640 width.
Ja jos minä olisin tuota javascriptiä tekemässä, käyttäisin ehtoja, että jos leveys on suurmpi kuin tämä ja pienempi kuin tämä toinen arvo, näytetään silloin tyyli3.css jne. Vähentää tyylien määrää.... bodylle kannattaa antaa jokin taustakuva, joka sopii hyvin yksiin sivusi kanssa, ei silloi haittaa jos sinun div ei ole täysin ruudun levyinen.
Mutta ehkäpä parempi olisi tehdä tuo leveyden vaihtelu eri tavalla kuin käyttämällä javascriptiä.
Älä käytä tässä javascriptiä!
Tee ensiksi sivusta esim. Teuron ohjeiden mukaisesti järkevä pohja. JavaScriptiä tarvitset vasta kun sivun css:llä luotu ulkoasu ei muuten taivu skaalautuvaksi.
Eli tee sivun runko ensiksi ei-päin-ahteria ja rupea sen jälkeen opettelemaan vasta "kikkoja".
Kuten sanoin jo aikaisemmin, paloittelin sivun yleisimmille leveyksille ja nyt sen pitäisi toimia kiitettävästi.
Sivun runko on ihan tarpeeksi toimiva... se on aivan sama minkälaista se koodi on, kuhan sivusto toimii.
Olen täysin itse opetellut nämä asiat ja jos joku huomauttaa koodista niin mielellään sit kertoo, et mitä oon tehny väärin eikä ruikuta jos siellä on jotain väärin.
Metabolix kirjoitti:
Pienenpieni plussa siitä, että et ole tämän sotkun keskellä mainostanut sivuillasi ammattitaitoista suunnittelua tai peräti huippuosaamista, kuten jotkut tekevät. :D
Ei minulla ammattitaitoa olekaan, mutta juuri siksi tarjoan palveluitani puoli-ilmaiseksi.
Mod. käskee lukea muotoiluohjeet ja käyttää Lainaa-nappia!
Ainaki se on aika huonosti tuossa sivustossa kun laittaa selaimen ikkunaksi eli ei koko näytölle niin sivu ei keskity automaattisesti. Margineita käyttämällä tuo onnistuisi kumminkin ja saisi pidettyä saman ulkoasun.
lainaus:
Ainaki se on aika huonosti tuossa sivustossa kun laittaa selaimen ikkunaksi eli ei koko näytölle niin sivu ei keskity automaattisesti. Margineita käyttämällä tuo onnistuisi kumminkin ja saisi pidettyä saman ulkoasun.
Huomasin kyllä tämän ongelman ja lisäsin sivusuunnassa olevan rullaus mahdollisuuden.
Mod. käskee lukea muotoiluohjeet ja käyttää Lainaa-nappia!
No jos aikoo pitää ton tollee erittäin leveänä niin varmaa voi laittaa sivun resize tapahtumaan jotain (jos jquery käytössä):
$(window).resize(function() {
scrollTo(document.width-1250, 0);
});Voi löytyy parempiki arvo tohon x:n kohalle mut tolla se näytti itellä ainaki toimivan.
Tämä aihe on jo loppuun käsitelty monta vastausta sitten.
http://weppipakki.com/css/esimrkt/layout-1.htm
Tee nestemäinen layout oikeilla CSS-määrityksillä.
Sivun HTML-merkintöjä kannattaa jäsennellä hyvin, jotta mm. virheiden paikantaminen ja lukeminen helpottuvat. Se on tärkeää myös, jos meinaat joskus tulevaisuudessa tehdä muille nettisivuja, sillä purkkaa saattaa olla vähän vaikea kaupitella. :)
sweetone kirjoitti:
Tämä aihe on jo loppuun käsitelty monta vastausta sitten.
sweetone kirjoitti:
jos joku huomauttaa koodista niin mielellään sit kertoo, et mitä oon tehny väärin....
Joopa joo...
Kuten sanoin, minun monitorini resoluutio on leveydeltään 1280px, mutta sinun sivusi ei näytä sitä minulle sellaisena. Koska turhan takia tutkit myös korkeuden... kannattaa tosiaan poistaa tuo korkeuden tarkistaminen.
pistemies kirjoitti:
sweetone kirjoitti:
Tämä aihe on jo loppuun käsitelty monta vastausta sitten.
sweetone kirjoitti:
jos joku huomauttaa koodista niin mielellään sit kertoo, et mitä oon tehny väärin....
Joopa joo...
Kuten sanoin, minun monitorini resoluutio on leveydeltään 1280px, mutta sinun sivusi ei näytä sitä minulle sellaisena. Koska turhan takia tutkit myös korkeuden... kannattaa tosiaan poistaa tuo korkeuden tarkistaminen.
Kiitän, korjaan asiaa.
pistemies kirjoitti:
sweetone kirjoitti:
Tämä aihe on jo loppuun käsitelty monta vastausta sitten.
sweetone kirjoitti:
jos joku huomauttaa koodista niin mielellään sit kertoo, et mitä oon tehny väärin....
Joopa joo...
Kuten sanoin, minun monitorini resoluutio on leveydeltään 1280px, mutta sinun sivusi ei näytä sitä minulle sellaisena. Koska turhan takia tutkit myös korkeuden... kannattaa tosiaan poistaa tuo korkeuden tarkistaminen.
:D joo tosiaan en oo kerenny siistii vielä koodia vaan kasasin sen nopeasti koodin siisteyttä katsomatta.
Loppujen lopuksi java oli kauhean vaikea ratkaisu, joten tein kuten joku jo tässä ehdotti, että laitan yläosan taustaksi ja laitan sen venymään. Nyt toimii hyvin ja ongelmitta.
Java se vasta oliskin ollu vaikia ratkaisu, JavaScriptistähän tässä puhuttiin ;). Keskustelussa ei ole vielä mainittu CSS3 Media Queryitä, joiden avulla saat määriteltyä sääntöjä näyttöalueen (? engl. viewport) koon ja orientaation mukaan.
sweetone kirjoitti:
Loppujen lopuksi java oli kauhean vaikea ratkaisu, joten tein kuten joku jo tässä ehdotti
Ai, minä luulin, että tämä aihe oli loppuunkäsitelty, etkä ottanut enää vastaan neuvoja ;)
Blaze kirjoitti:
sweetone kirjoitti:
Loppujen lopuksi java oli kauhean vaikea ratkaisu, joten tein kuten joku jo tässä ehdotti
Ai, minä luulin, että tämä aihe oli loppuunkäsitelty, etkä ottanut enää vastaan neuvoja ;)
Noh aattelin, että parempi tehä kunnolla jos lähtee tekemään. :Dd
kayttaja-1634 kirjoitti:
http://weppipakki.com/css/esimrkt/layout-1.htm
Tee nestemäinen layout oikeilla CSS-määrityksillä.
Ajattelin ensin ilman muuta, että önestemäinenö oli heittäytymistä tämän huuhaakeskustelun pyörteisiin, joihin osa on ilmeisesti trollautunut ihan vakavissaan. Mutta hieraisinpa sitten silmiäni kun huomasin, että Weppipakki todella kirjoittaa önestemäinen layoutö.
Jos englanninkielisiä ilmauksia (kuten öfluid layoutö) ei käytetä sellaisinaan, niin ne kannattaisi sentään kääntää kokonaan eikä niin, että vain ensimmäinen osa käännetään ja sekin väärin. öMukautuva taittoö olisi suomea. Fluid-sanan kääntäminen tässä nestemäiseksi on varmaan alkujaan ollut jonkun mielestä hyvä vitsi...
Mukautuvan taiton voi muuten tehdä ilman CSS:ääkin, yksinkertaisella taulukolla. Onnistuu varmaan aloittelijalta helpommin kuin CSS-taitto, vaikka toki siten saattaa saada päälleen kasan virtuaalisia kiviä ja anatematisointeja.
Miks sulla on "esilataus" divissä nuo samat kuvat, mitä normaalistikin ladattaisiin?
Eli sulta on varmaan unohtunut kuvien polusta tuo "hover" -hakemisto jostain välistä, joita siis käytät kun hiiren vie menulinkkien päälle.
Nythän menut, ainakin itselläni välähtivät, kun et niitä "hover" -kuvia ollutkaan esiladannut.
Yucca kirjoitti:
kayttaja-1634 kirjoitti:
http://weppipakki.com/css/esimrkt/layout-1.htm
Tee nestemäinen layout oikeilla CSS-määrityksillä.
Ajattelin ensin ilman muuta, että önestemäinenö oli heittäytymistä tämän huuhaakeskustelun pyörteisiin, joihin osa on ilmeisesti trollautunut ihan vakavissaan. Mutta hieraisinpa sitten silmiäni kun huomasin, että Weppipakki todella kirjoittaa önestemäinen layoutö.
Jos englanninkielisiä ilmauksia (kuten öfluid layoutö) ei käytetä sellaisinaan, niin ne kannattaisi sentään kääntää kokonaan eikä niin, että vain ensimmäinen osa käännetään ja sekin väärin. öMukautuva taittoö olisi suomea. Fluid-sanan kääntäminen tässä nestemäiseksi on varmaan alkujaan ollut jonkun mielestä hyvä vitsi...
Mukautuvan taiton voi muuten tehdä ilman CSS:ääkin, yksinkertaisella taulukolla. Onnistuu varmaan aloittelijalta helpommin kuin CSS-taitto, vaikka toki siten saattaa saada päälleen kasan virtuaalisia kiviä ja anatematisointeja.
Senkin saivartelija :p
Kyseessä ei ole minun luomukseni eikä terminologia nyt noin henkeen ja vereen voi olla tärkeää.
CSS ei ole juurikaan HTML:ää vaikeampaa. Perimmäinen ajatushan on, että HTML:llä kuvataan dokumentin rakenne ja CSS tuo visuaalisen tyylin. Tuolla ketjun aloittajan sivulla on muutenkin sen verran edistynyttä CSS:ää, että varmasti tajuaa helposti uusiakin asioita.
Lebe80 kirjoitti:
Miks sulla on "esilataus" divissä nuo samat kuvat, mitä normaalistikin ladattaisiin?
Eli sulta on varmaan unohtunut kuvien polusta tuo "hover" -hakemisto jostain välistä, joita siis käytät kun hiiren vie menulinkkien päälle.
Nythän menut, ainakin itselläni välähtivät, kun et niitä "hover" -kuvia ollutkaan esiladannut.
Tosiaan! Kiitos. :D
kayttaja-1634 kirjoitti:
Tuo osa ironiastasi saattaa jäädä huomaamatta, joten mainitsen varmuuden vuoksi, että asiantuntija-arvioissa w3schools on todettu erittäin huonosti varsinkin aloittelijalle sopivaksi. Kokeneempi voi saada hyviä nauruja. Asiaa ei mitenkään paranna, että w3schools ilmeisen tarkoituksellisesti on valinnut nimen, joka aiheuttaa luuloja, että se olisi jotenkin w3c:n sivusto.
kayttaja-1634 kirjoitti:
Tuolla ketjun aloittajan sivulla on muutenkin sen verran edistynyttä CSS:ää, että varmasti tajuaa helposti uusiakin asioita.
Voisitko osoittaa sivulta jonkin kohdan, jossa on "edistynyttä CSS:ää"? Minusta sivu on nimenomaan hyvin alkeellinen, CSS:ää on käytetty kömpelösti tai suorastaan väärin. Sivu noudattaa sitä kuuluisaa "div-taittoa", jota voi pitää vielä pahempana asiana kuin perinteistä taulukkotaittoa.
Metabolix kirjoitti:
kayttaja-1634 kirjoitti:
Tuolla ketjun aloittajan sivulla on muutenkin sen verran edistynyttä CSS:ää, että varmasti tajuaa helposti uusiakin asioita.
Voisitko osoittaa sivulta jonkin kohdan, jossa on "edistynyttä CSS:ää"? Minusta sivu on nimenomaan hyvin alkeellinen, CSS:ää on käytetty kömpelösti tai suorastaan väärin. Sivu noudattaa sitä kuuluisaa "div-taittoa", jota voi pitää vielä pahempana asiana kuin perinteistä taulukkotaittoa.
e-uskottavuuttaan kasvattava herra ehdotti tyylittelyä taulukoilla. Tähän totesin, että sivun tekijällä on kuitenkin jo sen verran edistynyttä CSS:ää, että voisi mahdollisesti katsoa taulukkopohjaisten ratkaisujen yli ja tutkia täysin CSS:llä toteutettavia vaihtoehtoja. En sanonut, että "edistynyttä CSS:ää" vaan "sen verran edistynyttä CSS:ää".
On se kumma, kun joidenkin on pakko keskittyä pätemiseen rakentavan keskustelun sijaan.
Metabolix kirjoitti:
kayttaja-1634 kirjoitti:
Tuolla ketjun aloittajan sivulla on muutenkin sen verran edistynyttä CSS:ää, että varmasti tajuaa helposti uusiakin asioita.
Voisitko osoittaa sivulta jonkin kohdan, jossa on "edistynyttä CSS:ää"? Minusta sivu on nimenomaan hyvin alkeellinen, CSS:ää on käytetty kömpelösti tai suorastaan väärin. Sivu noudattaa sitä kuuluisaa "div-taittoa", jota voi pitää vielä pahempana asiana kuin perinteistä taulukkotaittoa.
Miten CSS:ssää voi käyttää väärin? :Dd jos vaikka perustelisitte nää väitteet samalla, kun näitä lauotte ja kertoisitte miten se sitten tehdään oikein kerta niin osaavia ootte.
sweetone kirjoitti:
Miten CSS:ssää voi käyttää väärin? :Dd
Esimerkiksi siten, että laittaa kaikille elementeille pikselimääräisen leveyden ja kellutuksen vasemmalle. Se ei todellakaan kuvasta järkevällä tavalla sitä, miltä sivun kuuluu näyttää. Vastaavasti ne HTML:ssä olevat tyhjät elementit, joilla tämän saa toimimaan, eivät kuvasta millään tasolla sivun sisältöä. CSS-koodilla ei myöskään kuulu luoda sisältöä (kuten linkkien tekstejä), vaan tällaisten asioiden pitäisi olla HTML:ssä.
Nythän koodisi on jo vähän paremmalla mallilla, mutta edelleen siellä on esim. monta elementtiä samalla id:llä, joukko tyhjiä elementtejä ja joukko linkkejä, joilla ei ole nähtävästi mitään sisältöä (paitsi CSS:llä asetettu taustakuva). Lähtökohtaisesti sivun pitäisi olla käyttökelpoinen (vaikka sitten ruma) täysin ilman CSS-koodia. Tuo sivu ei ole käyttökelpoinen.
Lisäksi väität sivun alussa, että kyseessä olisi XHTML 1.1. Sitä ei kuitenkaan saa tarjota text/html-tyyppisenä, ja jos tarjoilisit sivun oikein (application/xhtml+xml-tyyppisenä), saisitkin selaimelta saman tien virheen (Firefoxissa "XML Parsing Error: not well-formed") etkä sivua lainkaan.
Korjailin hieman etusivuni koodia. Ottaisin taas vastaan rakentavaa kritiikkiä siitä.
Aihe on jo aika vanha, joten et voi enää vastata siihen.