pieni taulukko-onkelma

Sillä ei ole mitään väliä millä rivillä lopettaa solun. TD-aloitustagin ja /TD-lopetustagin välissä voi olla vaikka 100 tyhjää riviä.

IMG-tagia ei myöskään lopeteta /img-päätöstagilla. Jos merkataan html:llä, niin sitä ei tarvitse lopettaa ollenkaan. Jos taas merkataan xhtml:llä, niin img-tagi lopetetaan laittamalla / merkki loppuun:

foxytin kirjoitti:

Sillä ei ole mitään väliä millä rivillä lopettaa solun. TD-aloitustagin ja /TD-lopetustagin välissä voi olla vaikka 100 tyhjää riviä.

IMG-tagia ei myöskään lopeteta /img-päätöstagilla. Jos merkataan html:llä, niin sitä ei tarvitse lopettaa ollenkaan. Jos taas merkataan xhtml:llä, niin img-tagi lopetetaan laittamalla / merkki loppuun:

Lue lisää

Eli kokeilit kun noinkin varmasti vastasit..?









Siinä koodi, 100px kanttiiltaan ja samankokoinen kuva, kas kummaa mikähän väli siellä kuvan alla on, häipyy kun heittää kuvan perään..!!

-Ridge- kirjoitti:

Eli kokeilit kun noinkin varmasti vastasit..?









Siinä koodi, 100px kanttiiltaan ja samankokoinen kuva, kas kummaa mikähän väli siellä kuvan alla on, häipyy kun heittää kuvan perään..!!

Lue lisää

Vika ei ole siinä, millä rivillä td lopetetaan.

Tässä tapauksessa vika on puhtaasti siinä, että taulukolle (table) on annettu attribuutti "width" ja sille arvo "100px". Ottamalla sen pois ei väliä pitäisi olla. En ainakaan itse IE:llä, tai Firefoxilal sitä nähnyt.

Samalla kannattaa unohtaa kaikki muutkin vanha merkkaus ja siirtyä css-taittoon.







Mutta kuten aikaisemmin sanoin, linkkejä ei tule laittaa taulukkoon, vaan lista-elementtiin.

foxytin kirjoitti:

Vika ei ole siinä, millä rivillä td lopetetaan.

Tässä tapauksessa vika on puhtaasti siinä, että taulukolle (table) on annettu attribuutti "width" ja sille arvo "100px". Ottamalla sen pois ei väliä pitäisi olla. En ainakaan itse IE:llä, tai Firefoxilal sitä nähnyt.

Samalla kannattaa unohtaa kaikki muutkin vanha merkkaus ja siirtyä css-taittoon.







Mutta kuten aikaisemmin sanoin, linkkejä ei tule laittaa taulukkoon, vaan lista-elementtiin.

Lue lisää

Eli et edes kokeillut, mutta koetetaan nyt vielä kerran jos vaikka tajuaisit, laitan oikein taustavärillä ja tuolla css:llä kun sitä niin yrität tyrkyttää, mutta ei sun mulle sitä tarvitse opettaa..









Alkuperäinen kysyjä valitti kun IE ei toimi oikein, keino joka tepsii on tuossa lopetuksessa, se onko koodi uutta vai vanhaa, se ei kiinnosta mua pätkääkään kun siitä ei ollut kyse..

-Ridge- kirjoitti:

Eli et edes kokeillut, mutta koetetaan nyt vielä kerran jos vaikka tajuaisit, laitan oikein taustavärillä ja tuolla css:llä kun sitä niin yrität tyrkyttää, mutta ei sun mulle sitä tarvitse opettaa..









Alkuperäinen kysyjä valitti kun IE ei toimi oikein, keino joka tepsii on tuossa lopetuksessa, se onko koodi uutta vai vanhaa, se ei kiinnosta mua pätkääkään kun siitä ei ollut kyse..

Lue lisää

Mitä jos unohdetaan koko img-tagi ja isketään kuva css:llä soluun?

IE:llä on ilmeisesti joku pakottava tarve lisätä img-tagiin oikealle ja alas tyhjää tilaa.

Kaikkein helpoin, paras ja oikeellisin tapa on kuitenkin se lista-elementti. En näe syytä, miksei sitä voisi siis käyttää. Ja kyllä, tiedän kyllä, että ketjun aloittaja taisteli taulukon kanssa, mutta tokihan saa opastaa parempien tapojen käyttöön?

Tein nyt esimerkkisivunkin samalla.
http://www.zoorweb.net/foxytin/solusta_listaan.html

Kolme esimerkkiä, kussakin kaksi kuvaa selventämässä asiaa. Ensimmäisessä esimerkissä kuva on laitettu taustakuvaksi ja td-tagi on lopetettu seuraavalla rivillä.
Toisessa esimerkissä kuva on laitettu td-tagiin img-tagilla ja solu on päätetty samalla rivillä.
Kolmas esimerkki on toteutettu listalla ja kuva on laitettu taustakuvaksi.

Sitten voidaan alkaa käymään läpi. IE:llä (itsellä edelleen 6.0) Ensimmäinen ja toinen esimerkki näyttävät samalta. Lista-elementillä toteutettu esimerkki ei tulosta mitään muuta kuin kuvat, joten siinä ei ole ollenkaan mitään välejä, vaan kuvat ovat toisissaan täysin kiinni (tarvittaessa välit tietysti saa tehtyä padding-attribuutilla).
Firefoxilla (itsellä 2.0) ensimmäinen esimerkki ei tulosta välejä, mutta toinen (img-tagilla tehty) tulostaa (vaikka se td on samalla rivillä). Listalla toteutettu näyttää samalta kuin IE:llä

Eli tästä voidaan tulla siihen tulokseen, että laittamalla solun taustakuvaksi halutun kuvan, saadaan välit pois sekä IE:llä, että Firefoxilla.

Koska kyseessähän on navigaatio (ainakin ketjun aloittajan mukaan), niin oletan, että kuvia pitäisi voida klikata. Tällöin järkevintä on tehdä lista ja määrittää linkeille kuvat. Näin saadaan myös tyhjät välit pois ja kuvia voi klikata.
Toki voi olla, että kuvia ei ole tarkoitettu klikattavaksi, vaan pikemminkin taustakuvaksi, jonka päälle tulee tekstilinkki. Tällöin tulisi ainakin laittaa taustakuvaksi, ei img-tagilla, sillä img-tagin päälle ei voida kirjoittaa. Tai voidaan, kun säädetään (absoluuttisella paikalla, tai esim z-indexillä).

foxytin kirjoitti:

Mitä jos unohdetaan koko img-tagi ja isketään kuva css:llä soluun?

IE:llä on ilmeisesti joku pakottava tarve lisätä img-tagiin oikealle ja alas tyhjää tilaa.

Kaikkein helpoin, paras ja oikeellisin tapa on kuitenkin se lista-elementti. En näe syytä, miksei sitä voisi siis käyttää. Ja kyllä, tiedän kyllä, että ketjun aloittaja taisteli taulukon kanssa, mutta tokihan saa opastaa parempien tapojen käyttöön?

Tein nyt esimerkkisivunkin samalla.
http://www.zoorweb.net/foxytin/solusta_listaan.html

Kolme esimerkkiä, kussakin kaksi kuvaa selventämässä asiaa. Ensimmäisessä esimerkissä kuva on laitettu taustakuvaksi ja td-tagi on lopetettu seuraavalla rivillä.
Toisessa esimerkissä kuva on laitettu td-tagiin img-tagilla ja solu on päätetty samalla rivillä.
Kolmas esimerkki on toteutettu listalla ja kuva on laitettu taustakuvaksi.

Sitten voidaan alkaa käymään läpi. IE:llä (itsellä edelleen 6.0) Ensimmäinen ja toinen esimerkki näyttävät samalta. Lista-elementillä toteutettu esimerkki ei tulosta mitään muuta kuin kuvat, joten siinä ei ole ollenkaan mitään välejä, vaan kuvat ovat toisissaan täysin kiinni (tarvittaessa välit tietysti saa tehtyä padding-attribuutilla).
Firefoxilla (itsellä 2.0) ensimmäinen esimerkki ei tulosta välejä, mutta toinen (img-tagilla tehty) tulostaa (vaikka se td on samalla rivillä). Listalla toteutettu näyttää samalta kuin IE:llä

Eli tästä voidaan tulla siihen tulokseen, että laittamalla solun taustakuvaksi halutun kuvan, saadaan välit pois sekä IE:llä, että Firefoxilla.

Koska kyseessähän on navigaatio (ainakin ketjun aloittajan mukaan), niin oletan, että kuvia pitäisi voida klikata. Tällöin järkevintä on tehdä lista ja määrittää linkeille kuvat. Näin saadaan myös tyhjät välit pois ja kuvia voi klikata.
Toki voi olla, että kuvia ei ole tarkoitettu klikattavaksi, vaan pikemminkin taustakuvaksi, jonka päälle tulee tekstilinkki. Tällöin tulisi ainakin laittaa taustakuvaksi, ei img-tagilla, sillä img-tagin päälle ei voida kirjoittaa. Tai voidaan, kun säädetään (absoluuttisella paikalla, tai esim z-indexillä).

Lue lisää

"isketään kuva css:llä soluun?"

Mihin soluun, lista esimerkissäsi ei ollut tablea, miksi..? Olisko ehkä siksi et homma kusee ja miten kusee, minäpä kerron..!!

Laitappa se lista soluun ja tuolla Strictin doctypellä, huomaatko miten käyttäytyy..?

Kokeile sitten HTML 4.01 Transitional, homma toimii eikä tarvi td:lle määritellä mitään juttuja.

Mutta kuten itsekin mainitsit niin aina ei ole kyse navigaatiokuvista, ne voi olla pelkkiä layoutin kuvia, mikä sitten on yksinkertaisin tapa kenelläkin niin käyttäköön sitä..

Tässä vielä koodi joka näyttää väärin:




         







    
    







Tämä oikein:




         







    
    







Tai sitten yksinkertaisesti:

-Ridge- kirjoitti:

"isketään kuva css:llä soluun?"

Mihin soluun, lista esimerkissäsi ei ollut tablea, miksi..? Olisko ehkä siksi et homma kusee ja miten kusee, minäpä kerron..!!

Laitappa se lista soluun ja tuolla Strictin doctypellä, huomaatko miten käyttäytyy..?

Kokeile sitten HTML 4.01 Transitional, homma toimii eikä tarvi td:lle määritellä mitään juttuja.

Mutta kuten itsekin mainitsit niin aina ei ole kyse navigaatiokuvista, ne voi olla pelkkiä layoutin kuvia, mikä sitten on yksinkertaisin tapa kenelläkin niin käyttäköön sitä..

Tässä vielä koodi joka näyttää väärin:




         







    
    







Tämä oikein:




         







    
    







Tai sitten yksinkertaisesti:

Lue lisää

"Mihin soluun, lista esimerkissäsi ei ollut tablea, miksi..? Olisko ehkä siksi et homma kusee ja miten kusee, minäpä kerron..!!"
Eihän siinä ollut tablea, koska on väärin (tai siis semantiikaltaan väärin) käyttää taulukkotaittoa sivuston ulkoasun tekemiseen. Tarkoitin siis, että, jos välttämättä halutaan käyttää taulukkoa, niin sitten siihen taulukon soluun :]

"Laitappa se lista soluun ja tuolla Strictin doctypellä, huomaatko miten käyttäytyy..?"
Totta. Xhtml strict on tarkka pienestäkin asiasta, koska se ei sisällä lainkaan vanhoja ja ulkoasullisia tageja.

"Kokeile sitten HTML 4.01 Transitional, homma toimii eikä tarvi td:lle määritellä mitään juttuja."
Html transitional taas sisältää kaikki (ainakin lähes) vanhatkin tagit, joten homam toimii sillä.

"Mutta kuten itsekin mainitsit niin aina ei ole kyse navigaatiokuvista, ne voi olla pelkkiä layoutin kuvia, mikä sitten on yksinkertaisin tapa kenelläkin niin käyttäköön sitä.. "
Totta. Jokainen tietenkin saa tehdä ja tuleekin tehdä niin, kun itsestä tuntuu. Itse käytän css-taittoa ja rakenteellista merkkausta, pyrin pitämään merkkauksen oikeellisena, sekä semantiikaltaan oikeaoppiselta. Ihan vain sentakia, että sivut toimisivat mahdollisimman monella.

Ei tarkoitukseni ole haukkua ketään, tai pakottaa merkkaamaan w3c:n laatimien standardien perusteella, vaan tuoda esille erilaisia mahdollisuuksia toteuttaa jokin asia.

-Ridge- kirjoitti:

"isketään kuva css:llä soluun?"

Mihin soluun, lista esimerkissäsi ei ollut tablea, miksi..? Olisko ehkä siksi et homma kusee ja miten kusee, minäpä kerron..!!

Laitappa se lista soluun ja tuolla Strictin doctypellä, huomaatko miten käyttäytyy..?

Kokeile sitten HTML 4.01 Transitional, homma toimii eikä tarvi td:lle määritellä mitään juttuja.

Mutta kuten itsekin mainitsit niin aina ei ole kyse navigaatiokuvista, ne voi olla pelkkiä layoutin kuvia, mikä sitten on yksinkertaisin tapa kenelläkin niin käyttäköön sitä..

Tässä vielä koodi joka näyttää väärin:




         







    
    







Tämä oikein:




         







    
    







Tai sitten yksinkertaisesti:

Lue lisää

Ahaa. Selvisipäs sekin. Kyllä se toimii aivan normaalisti xhtml strictissä (tottakait, ku nvalidia on).

Sinulla oli vain sattunut pieni virhe, eli puolipiste doctype-elementin jälkeen:
;

Otappas puolipiste pois, niin pitäisi toimia :]

foxytin kirjoitti:

Mitä jos unohdetaan koko img-tagi ja isketään kuva css:llä soluun?

IE:llä on ilmeisesti joku pakottava tarve lisätä img-tagiin oikealle ja alas tyhjää tilaa.

Kaikkein helpoin, paras ja oikeellisin tapa on kuitenkin se lista-elementti. En näe syytä, miksei sitä voisi siis käyttää. Ja kyllä, tiedän kyllä, että ketjun aloittaja taisteli taulukon kanssa, mutta tokihan saa opastaa parempien tapojen käyttöön?

Tein nyt esimerkkisivunkin samalla.
http://www.zoorweb.net/foxytin/solusta_listaan.html

Kolme esimerkkiä, kussakin kaksi kuvaa selventämässä asiaa. Ensimmäisessä esimerkissä kuva on laitettu taustakuvaksi ja td-tagi on lopetettu seuraavalla rivillä.
Toisessa esimerkissä kuva on laitettu td-tagiin img-tagilla ja solu on päätetty samalla rivillä.
Kolmas esimerkki on toteutettu listalla ja kuva on laitettu taustakuvaksi.

Sitten voidaan alkaa käymään läpi. IE:llä (itsellä edelleen 6.0) Ensimmäinen ja toinen esimerkki näyttävät samalta. Lista-elementillä toteutettu esimerkki ei tulosta mitään muuta kuin kuvat, joten siinä ei ole ollenkaan mitään välejä, vaan kuvat ovat toisissaan täysin kiinni (tarvittaessa välit tietysti saa tehtyä padding-attribuutilla).
Firefoxilla (itsellä 2.0) ensimmäinen esimerkki ei tulosta välejä, mutta toinen (img-tagilla tehty) tulostaa (vaikka se td on samalla rivillä). Listalla toteutettu näyttää samalta kuin IE:llä

Eli tästä voidaan tulla siihen tulokseen, että laittamalla solun taustakuvaksi halutun kuvan, saadaan välit pois sekä IE:llä, että Firefoxilla.

Koska kyseessähän on navigaatio (ainakin ketjun aloittajan mukaan), niin oletan, että kuvia pitäisi voida klikata. Tällöin järkevintä on tehdä lista ja määrittää linkeille kuvat. Näin saadaan myös tyhjät välit pois ja kuvia voi klikata.
Toki voi olla, että kuvia ei ole tarkoitettu klikattavaksi, vaan pikemminkin taustakuvaksi, jonka päälle tulee tekstilinkki. Tällöin tulisi ainakin laittaa taustakuvaksi, ei img-tagilla, sillä img-tagin päälle ei voida kirjoittaa. Tai voidaan, kun säädetään (absoluuttisella paikalla, tai esim z-indexillä).

Lue lisää

Miksi laitoit kuviin/soluihin 1px borderit, laittaisit myös listaukseen niin oltaisin samalla viivalla, you know..?

Lisäämällä table-tagiin määritykset ja poistamalla nuo borderit kaikki pelaa kunnolla, siis nuo muut, listaus kusee jos strictin sinne jättää ja ne soluun laittaa:

foxytin kirjoitti:

Ahaa. Selvisipäs sekin. Kyllä se toimii aivan normaalisti xhtml strictissä (tottakait, ku nvalidia on).

Sinulla oli vain sattunut pieni virhe, eli puolipiste doctype-elementin jälkeen:
;

Otappas puolipiste pois, niin pitäisi toimia :]

Lue lisää

Molemmat doctypelliset koodit oli validaattorin kautta vedettyjä ja täysin ilman virheitä, en voi sille mitään jos foorumin softa niitä puolipisteitä heittää minne sattuu, luulin sun sen tietävän..=)

-Ridge- kirjoitti:

Miksi laitoit kuviin/soluihin 1px borderit, laittaisit myös listaukseen niin oltaisin samalla viivalla, you know..?

Lisäämällä table-tagiin määritykset ja poistamalla nuo borderit kaikki pelaa kunnolla, siis nuo muut, listaus kusee jos strictin sinne jättää ja ne soluun laittaa:

Lue lisää

Voihan ne reunukset laittaa, jos haluaa. Itsellä taisi unohtua kiireessä :)

Jos merkataan strictillä (varsinkin xhtml, html strictistä en muista mitä se sallii), niin ei voida laittaa taulukkoon cellpadding, ja cellspacing-attribuutteja, koska xhtml strict ei niitä tunne (eikä myöskään border-attribuuttia saa käyttää). Toki jotkut selaimet sen näyttävät oikein, mutta kun viilataan pilkkua, niin niitä ei laiteta :)

foxytin kirjoitti:

Voihan ne reunukset laittaa, jos haluaa. Itsellä taisi unohtua kiireessä :)

Jos merkataan strictillä (varsinkin xhtml, html strictistä en muista mitä se sallii), niin ei voida laittaa taulukkoon cellpadding, ja cellspacing-attribuutteja, koska xhtml strict ei niitä tunne (eikä myöskään border-attribuuttia saa käyttää). Toki jotkut selaimet sen näyttävät oikein, mutta kun viilataan pilkkua, niin niitä ei laiteta :)

Lue lisää

Kyllä tuo strict koodi menee läpi myös noilla antamillani table määrityksillä, kannattaisi kokeilla ennen kuin sanoo mitään, on parempi ja varsinkin helpompi puolustella kantaansa kun tietää asioista eikä luule, mut niihän sä profiilissasi jo kerroit..=)

En mä tässä pahuuttani kättä väännä, ihan vaan piruuttani..=)

foxytin kirjoitti:

Sillä ei ole mitään väliä millä rivillä lopettaa solun. TD-aloitustagin ja /TD-lopetustagin välissä voi olla vaikka 100 tyhjää riviä.

IMG-tagia ei myöskään lopeteta /img-päätöstagilla. Jos merkataan html:llä, niin sitä ei tarvitse lopettaa ollenkaan. Jos taas merkataan xhtml:llä, niin img-tagi lopetetaan laittamalla / merkki loppuun:

Lue lisää

"Perfektionisti"
ja
"Uskoo osaavansa lähes kaiken mikä liittyy (x)html:ään/css:ään"

Todella harvahan osaa kaiken. Että siinä mielessä ei ole ihme, jos näin harvinaista asiaa kuin rivinvaihdon merkitystä ei tiedä. Siis sitä kuinka html-parserit tulkitsee html-koodissa olevan rivinvaihdon.

Mutta pikkusen nöyryyttä kyllä peräänkuuluttaisin. Ei pidä esittää suureen ääneen 'totuuksia', jos ei osaa asiaa.