Keskustelu: Nettisivujen teko: CSS ongelma kuvan ja linkin kanssa

Terve! Olisi hienoinen ongelmantynkä tässä; minulla on kuva ja tekstiä linkin sisällä kas näin:

<a href="?"><img src="kuva.png" alt=":O" /><br />tekstiä</a>

kuva.png:ssä on läpinäkyvyys, ja linkille on määritetty seuraava CSS-koodi:

a:link {
	color: #0294E0;
	text-decoration: none;
}

a:visited {
	color: #0294E0;
	text-decoration: none;
}

a:hover {
	background-color: #1694CE;
	color: #FFFFFF;
	text-decoration: underline;
}

Nyt tuolle linkin tekstille määritelty taustaväri tulee myös tuolle kuvalle, eli läpinäkyvyyden alta tulee tuo taustaväri. Lisätään vielä loppuun selventävä kuva: http://peanut.dy.fi/materiaali/random/linkkiprobleema.png

Olisiko Herroilla muita ratkaisuja kuin "poista se läpinäkyvyys", arvostaisin suuresti!

EDIT korjailtu kirjoitusvirheitä

Lisää tekstin ympärille ylimääräiset <span> -tägit.

Sitten vain css-tyyliin esimerkiksi tämän tapainen lisäys:

a:hover span {
	background-color: #1694CE;
	color: #FFFFFF;
	text-decoration: underline;
}

Mod. lisäsi kooditagit!

Vähän taas ihmetyttää, mikä siinä loogisessa ajattelussa kiikastaa. Olet määritellyt linkille taustavärin ja linkin sisään kuvan, joten tietenkin tulos on tuo. Jos et halua taustaväriä koko linkille vaan vain osalle siitä, älä laita sitä linkille vaan tee uusi elementti (kuten <span>) ja laita taustaväri vain sille.

Lebe80 kirjoitti:

Lisää tekstin ympärille ylimääräiset <span> -tägit.

Sitten vain css-tyyliin esimerkiksi tämän tapainen lisäys:

a:hover span {
	background-color: #1694CE;
	color: #FFFFFF;
	text-decoration: underline;
}

Mod. lisäsi kooditagit!

Teenkö sen väärin:

<a href=\"?kategoria=$id\"><img src=\"$thumbkansio/$paakuva\" alt=\"kuva\" /><br /><span>$nimi</span></a>

ei toimi ihan noin :$

Miten ei toimi? Millä selaimella ei toimi? Minulla ainakin toimii aivan hyvin, tosin Lebe80:n ohjeesta poiketen tuota koko koodia ei tietenkään kuulu lisätä, vaan lisäys oli tuo yksi span-sana. (Jos lisäsit koko koodin, mieti vähän: eihän se mitenkään kumoa aiempaa määrittelyäsi, jossa asetat sen väärän taustavärin.)

Metabolix kirjoitti:

Miten ei toimi? Millä selaimella ei toimi? Minulla ainakin toimii aivan hyvin, tosin Lebe80:n ohjeesta poiketen tuota koko koodia ei tietenkään kuulu lisätä, vaan lisäys oli tuo yksi span-sana. (Jos lisäsit koko koodin, mieti vähän: eihän se mitenkään kumoa aiempaa määrittelyäsi, jossa asetat sen väärän taustavärin.)

tuon yhden pienen span-sanan lisäsin, niinkuin tuossa edellisessä viestissäkin varsin hyvin näet. Linkki-kuva-teksti-härdelli näkyy samalla tavalla kuin ennenkin, selaimina sekä FF6.0.2 & IE 9.0.8112.16421

Onko toi kokonaisuus kuvineen kaikkineen jossain katsottavissa?

Grez kirjoitti:

Onko toi kokonaisuus kuvineen kaikkineen jossain katsottavissa?

http://peanut.dy.fi/~lotto/

Aivan kuten sanoin, et ole poistanut sitä edellistä a:hover-määrittelyä, josta väärä taustaväri tulee. Toisin sanoen et ole lisännyt vain yhtä pientä span-sanaa, vaan olet kopioinut koko Lebe80:n koodin sellaisenaan.

Metabolix kirjoitti:

Aivan kuten sanoin, et ole poistanut sitä edellistä a:hover-määrittelyä, josta väärä taustaväri tulee. Toisin sanoen et ole lisännyt vain yhtä pientä span-sanaa, vaan olet kopioinut koko Lebe80:n koodin sellaisenaan.

kertoisitko ystävällisesti, oi kunnioitettu Metabolix, millä saan sitten tuon määrittelyn sitten kaikille muille linkeille?

EDIT: poistin Lebe80:n koodin

Ehkäpä sitten kannattaisi lisätä kuvalliselle a-elementille luokka ja luokalle CSS-tyyli, joka kumoaa tuon tavallisilla a-elementeillä olevan taustavärin. Jos laitat lisäksi kuvan ja tekstin eri a-elementteihin, et tarvitse span-kikkailuja ollenkaan.

Metabolix kirjoitti:

Ehkäpä sitten kannattaisi lisätä kuvalliselle a-elementille luokka ja luokalle CSS-tyyli, joka kumoaa tuon tavallisilla a-elementeillä olevan taustavärin. Jos laitat lisäksi kuvan ja tekstin eri a-elementteihin, et tarvitse span-kikkailuja ollenkaan.

kiitän ensimmäisestä ei-ylimielisestä vastauksesta sinulta nöyrimmin. Toteutan homman tuolla Teidän jälkimmäisenä mainitsemastanne vaihtoehdosta.

Kiittäen nöyrimmin: Lotto Demokratia *kumartaa syvään*

Lotto kirjoitti:

Metabolix kirjoitti:

Ehkäpä sitten kannattaisi lisätä kuvalliselle a-elementille luokka ja luokalle CSS-tyyli, joka kumoaa tuon tavallisilla a-elementeillä olevan taustavärin. Jos laitat lisäksi kuvan ja tekstin eri a-elementteihin, et tarvitse span-kikkailuja ollenkaan.

– – Toteutan homman tuolla Teidän jälkimmäisenä mainitsemastanne vaihtoehdosta.

Tuo vaihtoehto kuitenkin luo toiminnallisen ongelman, joka on melko kova hinta ulkoasun viilauksesta, etenkään jos viilaus ei toimi.

Toiminnallinen ongelma on se, että yhden linkin sijasta on kaksi linkkiä samaan kohteeseen. Tämä on yleensä huono juttu monestakin syystä, mm. siksi, että se vaikeuttaa käyttöä silloin, kun linkkien välillä liikutaan tab−näppäimellä.

Jos http://peanut.dy.fi/~lotto/ sisältää toteutuksesi, kuten oletan (ainakin siellä on jaettu linkki kahdeksi linkiksi), niin IE 9:ssä näkyy sininen kehys kuvan ympärillä, ja kun osoitin viedään kuvan päälle, kehys poistuu mutta ilmestyy kaksi erilevyistä pientä sinistä vaakapalkkia. Firefoxissa taas tulee sininen palkki, kun osoitin viedään kuvan päälle. Minulle on epäselvää, mitä varsinaisesti haluat, mutta tuskin noita kaikkia ilmiöitä. :-)

Ongelma johtuu siitä, että kuva on tekstitason elementti ja siksi käyttäytyy kuten teksti. Kuva on ikään kuin kirjain, joka vain sattuu olemaan kuva ja ehkä ulottumaan tekstirivin alueen ulkopuolelle – se vie silti palan rivistä ja tällä palasella on ominaisuutena mm. taustaväri.

Ongelma ratkennee parhaiten purkamalla tehdyt purkkaviritykset ja käyttämällä linkkiä, jonka sisällä on kuva ja teksti ilman br-tägiä välissä ja asettamalla kuva lohkoelementiksi CSS:n kannalta. Merkkaus:

<li class="kuva"><a href="?kategoria=2"><img src="thumb/oletus.jpg" alt="kuva" />Kategoria 2</a></li>

CSS (olettaen, että _et_ halua kehystä, siis reunaviivaa, kuvan ympärille – joka tapauksessa syytä asettaa border-ominaisuus jotenkin, jotta asia ei jää sen varaan, mitä selaimen asetuksista sattuu johtumaan):

li.kuva img { display: block; border: none; }

Yucca kirjoitti:

Ongelma ratkennee parhaiten purkamalla tehdyt purkkaviritykset ja käyttämällä linkkiä, jonka sisällä on kuva ja teksti ilman br-tägiä välissä ja asettamalla kuva lohkoelementiksi CSS:n kannalta.

Kiitän. Toteutukseni ei vielä ollut tuola valmis, mutta tuo sinun vinkkisi korjasi myös käytettävyytee - ja koodin siisteyteen sekä myöhempään paremmin hallittavuuteen liittyviä ongelmia. Arvostan apuasi suuresti.

Mod. huom: älä lainaa tekstiä, johon et viittaa.

Tässä on muutama pieni leikittely, joita voi opiskella omillaan:

li.kuva img {
    border: none;
    border-radius: 17px;
    display: block;
    margin-bottom: 5px;
}
li.kuva a {
    border-radius: 7px;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, .2);
    display: block;
    padding: 5px;
    text-align: center;
    text-decoration: none;
}

Nämä vaikuttavat lähinnä visuaaliseen ilmeeseen/näyttävyyteen. Kaikki ei toimi edes kaikilla selaimilla, mutta kaiken ei edes tarvitse näkyä ihan samalla tavalla kaikilla selaimilla.

Mun mielestä on silti hauskaa, että tuon näköisellä saitilla tuommoisen pienen "yksityiskohdan" fiilaus on noinkin tärkeää :D

Myöhäinen vastaus, mutta nämä pienet mielioikut, kun haluaa jonkin toimivan juuri tietyllä tavalla, ovat sitä elämäniloa, jota ei kannata tukahduttaa. Yksityiskohtia viilaamalla oppii yllättävän paljon asioita. Toki siinä voi mennä liiallisuuksiin, mutta parempi se on kuin toinen ääripää, jossa kaikki lätkitään vaan paikalleen sen kummemmin miettimättä mitä tekee ja miten tekee. Oppia ei voi jos ei tee, eikä hyvää jälkeä saa aikaan ilman kokemusta.