Elikkä mistä johtuu että jos mulla on tablessa solu, jonka koko on " width=1230px ja height=202px" niin kuva, jonka koko on täsmälleen sama ei menekkään kokonaan kyseisen solun taustakuvaksi vaan siihen jää reunoja ym. ja kuva sopii soluun vasta kun solun kokoa muutetaan pienemmäksi kuin kuvan.
Johtuisiko täytteestä (padding)? Aseta CSS-tyylillä solun padding nollaksi. Myös solun koko pitää asettaa CSS-koodissa eikä HTML-koodissa.
okei...eikös css koodin voi laittaa suoraan html koodin sisälle? Miksi koko pitää alittaa css eikä html?
CSS-määreitä voi toki laittaa style-attribuutin arvoksi. Yleensä se ei ole järkevää ylläpidon kannalta, joskus kuitenkin saattaa olla.
HTML-attribuutit width ja height ovat vanhentuneita (obsolete) eikä niitä siis tule käyttää. Koon asettaminen HTML:ssä on myös periaatteellisesti väärin: HTML-koodilla kuuluu kertoa vain, mitä sivulla on, ja CSS-koodilla sitten voi kertoa, miltä sivun pitää näyttää. Aluksi HTML ei edes sisältänyt juurikaan ulkoasuun liittyviä toimintoja. Sitten niitä alettiin lisätä, kunnes tajuttiin, että kannattaa tehdä siihen ihan erillinen kieli. CSS:n keksimisestä asti suuntana on taas ollut noiden HTML:n ominaisuuksien käytön vähentäminen; äkillinen käytöstä poistaminen ei oikein tule kyseeseen, koska monella vanhalla sivulla niitä joka tapauksessa on vielä.
Jos yrität askarrella taulukolla jotain sivun ulkoasua (reunoja ja taustoja), olet myös harhateillä: ulkoasun tekemiseen on parempia tapoja, ja taulukot ovat lähinnä taulukkomuotoisen tiedon esittämistä varten.
okei, kiitos tiedosta...elikkäs mikä on parempi tapa kuin taulukointi koska yritän tässä askallerra yhden sivun ulkonäköä taulukolla.
Paras ratkaisu riippuu siitä, millainen ulkoasusta pitäisi tulla ja millä selaimilla sen pitää toimia. Muista myös huomioida erikokoiset päätelaitteet suunnittelussa.
Eräs lähtökohta kuvallisiin reunoihin on CSS3:n border-image. Jos kuitenkin tuki vanhoilla selaimilla ja IE:llä on tärkeä, pitää usein tehdä ylimääräisiä elementtejä ja asettaa niille taustakuvat. Joka tapauksessa on viisainta suunnitella kuvat niin, että niitä voi tarvittaessa venyttää tai leikata, jotta sivun saa mahtumaan pienellekin ruudulle ilman, että reunat vievät kaiken tilan.
Jos et tarvitse kuvia joka puolelle vaan ainoastaan logon yläreunaan, voit vain laittaa alkuun yhden elementin sille, kuten tälläkin sivustolla on.
tsk955 kirjoitti:
Elikkä mistä johtuu että jos mulla on tablessa solu, jonka koko on " width=1230px ja height=202px" niin kuva, jonka koko on täsmälleen sama ei menekkään kokonaan kyseisen solun taustakuvaksi vaan siihen jää reunoja ym. ja kuva sopii soluun vasta kun solun kokoa muutetaan pienemmäksi kuin kuvan.
Kertoisitko, mistä tarkemmin on kyse, eli keskeistä koodia. Onko kuva solun sisältönä (siis img-elementti td-elementin sisällä) vai taustakuvaksi asetettuna?
Yucca kirjoitti:
tsk955 kirjoitti:
Elikkä mistä johtuu että jos mulla on tablessa solu, jonka koko on " width=1230px ja height=202px" niin kuva, jonka koko on täsmälleen sama ei menekkään kokonaan kyseisen solun taustakuvaksi vaan siihen jää reunoja ym. ja kuva sopii soluun vasta kun solun kokoa muutetaan pienemmäksi kuin kuvan.
Kertoisitko, mistä tarkemmin on kyse, eli keskeistä koodia. Onko kuva solun sisältönä (siis img-elementti td-elementin sisällä) vai taustakuvaksi asetettuna?
kuva on td elemientin sisällä taustakuvaksi asetettu ja silloin saan sen sopimaan jos hieman mutuan itse td:n kokoa....mutta, jos laitan sen img src:nä niin se ei sovi mitenkään soluun, vaikka solun reso on sama kuin kuvan.
EDIT: kuva siis on paljon pienempi kuin mitä pitäisi olla
tsk955 kirjoitti:
kuva on td elemientin sisällä taustakuvaksi asetettu ja silloin saan sen sopimaan jos hieman mutuan itse td:n kokoa....mutta, jos laitan sen img src:nä niin se ei sovi mitenkään soluun, vaikka solun reso on sama kuin kuvan.
EDIT: kuva siis on paljon pienempi kuin mitä pitäisi olla
Ei tuosta kyllä ota selvää, mitä oikeastaan olet tehnyt ja millä tavoin muutat kuvan ulottuvuuksia. Koodi olis kiva, tai URL, mieluiten molemmat. Ja mieluiten minimaalinen koodi, jolla ongelman voi tuottaa.
Mutta ensin kannattaisi päättää, haluatko taustakuvan vai sisältökuvan. Muuten saatetaan ratkoa väärää ongelmaa. Taustakuvaksi kannattaa yleensä asettaa vain sellainen koriste- tms. kuva, joka ei ole mitenkään välttämätön – sillehän ei voi määritellä tekstivaihtoehtoa, se ei yleensä tulostu paperitulostuksessa jne. Esimerkiksi jos sivun yläosassa on banner, jossa on sivuston nimi ja sillä taustana vaikka maisema, niin on kaksi fiksua vaihtoehtoa: kokonaisuus yhdeksi sisältökuvaksi ja sille oikea alt-määrite, tai pelkkä maisema taustakuvaksi ja nimi ihan tekstinä, sopivasti muotoiltuna tietysti.
Jos laitat kuvan soluun sisältökuvana, niin kyllähän
<table><tr><td><img src=foo.png alt=haa></table>
esittää kuvan tasan sen kokoisena kuin se on. (Eri asia on, että solussa on oletusarvoisesti hiukan tyhjää sen ympärillä.) Kysymys kuuluu: Mitä olet tehnyt sellaista, mikä rikkoo tämän? Pelkkä solun width- ja height-ominaisuuden asettaminen ei saa tätä aikaan, koska selain tekee solusta todellisuudessa isomman, jos sen sisältö (+ täytteet) vaatii.
Ongelma ratkesi divin avulla...eli korvasin tablen divillä.
Nyt kumminkin divissä se ongelma että en tiedä miten saan tekstin sijaintia muutettua pixeli arvolla...esim jos tekti on "text-align: left;" niin miten saan määritettyä että kuinka monta pixeliä teksti on poispäin vasemmasta reunasta.
tsk955 kirjoitti:
Miten saan määritettyä että kuinka monta pixeliä teksti on poispäin vasemmasta reunasta.
Lisäämällä paddingia ja vähentämällä vastaavan verran widthiä. Toinen mahdollisuus on laittaa divin sisään toinen div, jolla on sopiva margin tai padding; tällöin ei tarvitse säätää ensimmäisen divin kokoa uudestaan. Kolmas mahdollisuus on box-sizing (ks. alla), mutta silloin taas täytyy huomioida leveydessä mahdollinen reunaviiva tai käyttää arvoa padding-box, jota ei vielä tue kuin Firefox.
Muistetaan nyt myös se box-sizing-ominaisuus css3:ssa.
-moz-box-sizing: border-box; box-sizing: border-box;
Aihe on jo aika vanha, joten et voi enää vastata siihen.