Ongelmani on se, että tekemäni sivuston ulkoasu kärsii navigointilinkkien takia jos tekstin kokoa muuttaa suuremmaksi tai pienemmäksi selaimen asetuksista.
Kokeilin korjata ongelmaa tältä sivulta löytyvällä linkkikarttakikkailulla
http://www.alistapart.com/articles/imagemap/
koska se on auttanut ongelmaan ennenkin, mutta eipä se auttanutkaan, syyksi epäilen sitä etten sivujen keskittämisen vuoksi voi käyttää elementtien absoluuttista sijoittelua. Tavalliseen linkkikarttaan en haluaisi turvautua sen vuoksi ettei linkkeihin saa hover-ominaisuuksia.
Osaisiko joku auttaa? Esimerkkisivu tekemästäni sivustosta löytyy osoitteesta http://kotisivu.mtv3.fi/omenainen/ltg/paja.html
ja tyylitiedosto osoitteesta http://kotisivu.mtv3.fi/omenainen/ltg/tyylit.css
Kokeilin korjata ongelmaa tältä sivulta löytyvällä linkkikarttakikkailulla
http://www.alistapart.com/articles/imagemap/
koska se on auttanut ongelmaan ennenkin, mutta eipä se auttanutkaan, syyksi epäilen sitä etten sivujen keskittämisen vuoksi voi käyttää elementtien absoluuttista sijoittelua. Tavalliseen linkkikarttaan en haluaisi turvautua sen vuoksi ettei linkkeihin saa hover-ominaisuuksia.
Osaisiko joku auttaa? Esimerkkisivu tekemästäni sivustosta löytyy osoitteesta http://kotisivu.mtv3.fi/omenainen/ltg/paja.html
ja tyylitiedosto osoitteesta http://kotisivu.mtv3.fi/omenainen/ltg/tyylit.css
Vastaukset 15
Vanhimmat
" Tavalliseen linkkikarttaan en haluaisi turvautua sen vuoksi ettei linkkeihin saa hover-ominaisuuksia. "
Miten niin ei saa...?
Olisitko ystävällinen ja kertoisit miten?
.hooverin voi laittaa (melkein?) mihin elementtiin vaan. Tosin ie ei ymmärrä näinkään yksinkertaista asiaa.
OBJEKTI:hover { background-color: red }
..niiden linkkien huuvereissa pitää olla teksti siinä taustakuvassa, miksei siihen taustalle tule pelkästään sitä sinistä mömmöä?
Tai sitten mietit jotain muuta korostuskeinoa.
Minä en meinaan kehottais noin nätin koodin pilaamista millään imagemapeilla.
Css:ssä olis muutenkin vähän uudelleenmiettimistä kun ainakin mun Tuliketussani se layoutti hajoo muutenkin pikkasen - riippumatta käyttäjän valitsemasta fonttikoosta.
..aluksihan tein nuo linkit ihan tavallisiksi tekstilinkeiksi, mutta kun ne suuremman tekstikoon valitsemalla venyivät yli ulkoasun reunan yritin korjata ongelmaa tekemällä tuollaisen linkkikarttaviritelmän, jota varten liitin linkit osaksi taustalla olevaa kuvaa ja muutin itse linkit näkymättömiksi kuten tuossa ohjeessa neuvotaan. Ongelmani siis ei ole se kuinka korostaa linkkien aktivoitumista, vaan kuinka saada ne pysymään mitoissaan ja paikallaan.
..minun selaimillani ulkoasu pysyy kasassa, millä tavalla se sinulla hajoaa?
Määrittele navilinkkien fonttikoko pikseleinä eikä pt:nä, fontti pysyy samana vaikka asetuksia muuttaisi..
mutta ainakin minun firefoxillani tekstin koko muuttuu vaikka se olisi määritelty pikseleinä.
No ei varsinaisesti isommin hajoa mutta leipätekstin kohdalta se kehysviiva on pikselin enemmän vasemmalla kuin muissa kohdissa, ts koko ulkoasu on leipätekstin kohdalla pikselin väärässä kohtaa. Jos suurentaa fonttia riittävästi niin viiva hypähtää kunnolliseksi mutta sittenhän noiden linkkien hooverit on jo aivan persiillään.
Mulla Firefoxista versio 1.0 jos sillä on jotain merkitystä.
Jos vaikka huononäköinen käyttäjä haluaa suurentaa fonttikokoa niin ajattelitko ettei häntä haittaa vaikkei saakaan selvää mitä linkeissä lukee?
Anna linkkien fonttikoon muuttua rauhassa (anna vaikka rivittyä jos on tarvetta). Varaa linkeille sellainen tila että niillä on tilaa muuttaa kokoa.
Tämä pikselin heitto ei näköjään koko aikaa näykään. Se tulee esiin kun selainikkunan kokoa muuttaa leveyssuunnassa. Silloin tuo keskikohta alkaa hyppiä.
Kai niiden linkkien muuttuminen täytyy sitten vain hyväksyä (muilla selaimilla kuin IE:llä). Päivitin tuon ensimmäisessä viestissä olevan sivun jos haluatte vilkaista, muutin linkit tekstimuotoon kuten ne olivat alunperinkin.
hmm, niinpä hyppiikin pikselin verran ikkunan kokoa muuttaessa. Hassua, mutta ei haittaa ainakaan minua.
tekstilinkin hover lienee joku tällainen:
---------------
a:link {color: #0000ff;text-decoration: none}
a:visited {color: #008000;text-decoration: none}
a:hover {background: #00ffff;text-decoration: none}
------------------
vai? :)
tuohan on ihan peruskauraa, mutta jos lähdetään tekemään ihan perinteistä imagemappia html-dokumenttiin, niin saako sellaiseen jotenkin hoverin? Mieluummin kyllä pitäisin tekstilinkit tekstilinkkeinä, mutta jos niiden kokoa ei saa pysymään kurissa niin..
Koetin katsella miten tuo on hoidettu 'ammatti'-sivuilla. Muutamia sivuja katsottuani huomasin että ei tuo oikein toimi missään.
Esimerkiksi kun täällä suurentaa tekstikokoa, niin linkit alkavat vain kadota oikeasta laidasta:
http://www.alistapart.com/
Jos ongelmasi on tuo, niin kannattaa korjata sivut kuntoon eikä yrittää rikkoa selaimia.
Kunnossa olemiseen sisältyy, että sivut toimivat eri fonttikokoja käytettäessä. Esimerkiksi 9 pisteen fontilla ja 60 pisteen fontilla.
Vähätöisintä on todennäköisesti aloittaa sivuston teko alusta. Jos olisit kertonut nykyisten sivujen osoitteen, niin tämän olisi voinut vahvistaa tai ehkä joskus todeta, että vain puolet pitää tehdä uusiksi.