Miten saisin aikaa kommentoidun kuvan pelkällä html-koodilla, koska haluaisin selain riippumattomattoman ratkaisun asiasta?
Tein itse ensin näin. Lisäsin html-sivulle monisoluisen taulukon ja taulukon taustakuvaksi kuvan, jota haluaisin kommentoida. Muuttelemalla taulukon solujen sijaintia sain aina sijoitettua kommentin haluamaani kohtaan kuvassa. Kokeilin alt=" kommentoimista, mutta se ei toiminut niin kuin halusin. Altin käyttäminen jätti ikävät kuvalle varatut reunukset kommentin kohdalle.
Kuvakarttaakaan en haluaisi käyttää vaan voisiko asian ratkaista pelkällä html-koodilla?
Tein itse ensin näin. Lisäsin html-sivulle monisoluisen taulukon ja taulukon taustakuvaksi kuvan, jota haluaisin kommentoida. Muuttelemalla taulukon solujen sijaintia sain aina sijoitettua kommentin haluamaani kohtaan kuvassa. Kokeilin alt=" kommentoimista, mutta se ei toiminut niin kuin halusin. Altin käyttäminen jätti ikävät kuvalle varatut reunukset kommentin kohdalle.
Kuvakarttaakaan en haluaisi käyttää vaan voisiko asian ratkaista pelkällä html-koodilla?
Vastaukset 6
Vanhimmat
En ole ollenkaan varma mitä ajoit takaa. Tarkoitatko kuvatekstiä?
Joka tapauksessa esimerkkini EI ole PELKKÄÄ html-koodia vaan css:llä on tärkeä vaikutus. Silti kyseessä on sikäli selainriippumaton koodi että mikäli selain ei ymmärrä tuota css:ää niin teksti näkyy siististi kuvan alapuolella.
top- ja left-arvoilla voit määritellä tekstin paikan. Voit käyttää myös bottom- ja right-määrityksiä jos niin haluat.
Kuvateksti
#kuvablokki {
border : 1px ridge Black;
padding : 10px;
width : 480px;
height : 270px;
}
#kuvablokki .kuvateksti {
font-family : Arial, Helvetica, sans-serif;
color : #ffebcd;
display : block;
position : relative;
top : -60px;
left : 15px;
padding : 0px 5px 0px 5px;
}
asdf
Vaatisihan tuo vielä vähän säätöä..
Css kannattaa tietenkin laittaa ulkoiseen tiedostoon mutta jo nyt saat helposti muillekin samalla sivulla oleville kuville vastaavan. Lisäät vaan koodiin uuden blokin:
qwerty
Esimerkin #kuvablokki on 44px kapeampi Winternet Explorerilla kuin esim Mozillalla, Operalla tai Safarilla.
Sanoinkin että tuo kaipaisi vähän säätöä, oli vähän niinku hatustavedetty juttu enkä siis tarkastellut eri selaimilla enkä paljon muutenkaan:)
"enkä siis tarkastellut eri selaimilla enkä paljon muutenkaan:)"
Juu, emminä pahalla. Kunhan totesin koska pisti silmään DTD:n puute, jolloin IE6 siirtyy simuloimaan vanhempien versioiden väärää laatikkomallin laskentatapaa.
Oisko sulla jotain linkkiä jossa kerrottaisiin tarkemmin noista dtd:n vaikutuksista siihen miten selaimet tulkitsevat koodin?
Ja sit, keksisitköhän sinä tuohon jotain järkevää ratkaisua: http://keskustelu.suomi24.fi/show.fcgi?category=108&conference=4500000000000145&posting=22000000003962630
Mulla vähän jumittaa:(
"Oisko sulla jotain linkkiä jossa kerrottaisiin tarkemmin noista dtd:n vaikutuksista siihen miten selaimet tulkitsevat koodin? "
IE6: http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnie60/html/cssenhancements.asp
Mozilla: http://www.mozilla.org/docs/web-developer/quirks/quirklist.html
Opera 7: http://www.opera.com/docs/specs/doctype/
Ja loppuun: http://www.hut.fi/u/hsivonen/doctype
"Ja sit, keksisitköhän sinä tuohon jotain järkevää ratkaisua:"
Huhhuh, johan oli viritystä :) Vaikuttaa siltä että ongelmat ovat ihan muualla kuin JavaScriptissa. Takaisin suunnittelupöydälle?