Vähän vaikea selittää tämä ongelma, mutta eiköhän tämä tavoitteeni tule selville alla olevasta koodista. Alla oleva koodi toimii siis muuten oikein, mutta sinisen alueen pitäisi olla "hallitseva" eli linkki pitää olla aktiivisena koko sinisellä alueella ja siirtyessä sinisen alueen ylä- tai alapuolelle, tulee aktiiviseksi siinä ylä- tai alapuolella oleva linkki. Siniset alueet ovat siis kiinni toisissaan. Lisäksi jos tulee tilanne, että samassa kohtaa pitäsi olla sekä sinistä, että punaista aktiiviväriä (ne menevät siis päällekkäin), niin sininen olisi aina se päällimmäinen. Sinisen alueen ylä- ja alapuolella olevan punaisen alueen päälle ei siis pääse hiirellä, sillä tällöin aktiivi siirtyy ja hiiri on taas sinisen päällä. Tosi huonosti selitetty, joten toivottavasti joku tajuaa viimeistään sen jälkeen kun testaa tuota koodia..
Itse olen jo yrittänyt kaikenlaista viritelmää. Oikeastaan tiedän mistä ongelma johtuu, mutten vain ole keksinyt siihen toimivaa ratkaisua.
css-tiedosto
ul {
width: 100%;
margin-top: 30px;
padding: 0;
list-style: none;
}
ul li {
width: 250px;
height: 60px;
padding: 30px 0 30px 0;
margin-top: -60px;
list-style: none;
z-index: 5;
}
ul li a span {
width: 200px;
height: 60px;
padding: 0 20px 0 0;
margin-left: 30px;
line-height: 60px;
z-index: 10;
display: block;
}
ul li a {
text-align: right;
text-decoration: none;
text-transform: uppercase;
}
ul li.current, ul li:hover {
background-color: red;
}
ul li.current a span, ul li a span:hover {
background-color: blue;
}html-tiedosto
<ul> <li><a href="#" title="Linkki 1"><span>Linkki 1</span></a></li> <li><a href="#" title="Linkki 2"><span>Linkki 2</span></a></li> <li><a href="#" title="Linkki 3"><span>Linkki 3</span></a></li> <li><a href="#" title="Linkki 4"><span>Linkki 4</span></a></li> <li class="current"><a href="#" title="Linkki 5"><span>Linkki 5</span></a></li> <li><a href="#" title="Linkki 6"><span>Linkki 6</span></a></li> </ul>
Ei tuo toimi millään käsitettävällä tavalla, vaan värilliset alueet menevät ihan kummasti.
Kerropa, mitä oikeastaan haluat saada aikaan. Siis unohdetaan nyt ensin tuo koodi, joka on aika oudosti rakennettu (mm. asetetaan pikselimääräisiä ulottuvuuksia elementeille, joiden sisällä olevan tekstin fonttikoko voi olla ihan mitä tahansa, ja asetetaan taustan väri asettamatta sisällön väriä, jolloin saadaan aikaan sinistä sinisellä -efektejä). Sinulla on lista linkkejä, ja siinä yksi linkki viittaa sivuun itseensä, joten sen ulkoasu varmaan halutaan erilaiseksi. (Parasta olisi, ettei se ole linkki lainkaan, vain tekstiä.) Millaisina haluaisit linkkien näkyvän eri tiloissa? Ottaen huomioon, että linkillä on tilat "visited" ja "unvisited" (jotka sulkevat toisensa pois) ja lisäksi tilat "active" ja "hover" ja näihin liittyy yleensä selainten oletusasetuksia värien suhteen.
Vähän arvelinkin, ettei selittelyistäni saa mitään selvää ja muutenkin teen asiat ihan päin puuta. Tein jokusen kuvan selkeyttämään sitä mitä haluan ja mikä menee väärin.
Ensimmäinen rivi sisältää kuvat siitä miten valikon kuuluisi toimia. Tuolla yläpuolella olevalla koodinpätkällä sainkin melkein tuollaista aikaiseksi.
Ne väärin menevät asiat on sitten tuossa toisella rivillä.
Ensimmäinen kuva toisella rivillä:
Hiiren kuuluisi olla sinisen aktiivin päällä niin kuin ylempi kuva osoittaa. Hiiren ollessa tekstin alla, aktiivisena on kuitenkin alemman kuvan punainen alue.
Toinen kuva toisella rivillä:
"Linkki 3":n ollessa aktiivisena sinisten alueiden välissä on punainen alue, koska "Linkki 4":n punainen alue menee "Linkki 3":n sinisen päälle. Tämä taitaa olla selitys myös tuon ensimmäisen ongelman esiintymiselle..
Noista ensimmäisen rivin kolmesta kuvasta pitäisi kuitenkin selvitä se mitä tässä yritän saada aikaiseksi. Varmaan ratkaisu on hyvin yksinkertainen, mutta kun en sitä keksi niin pakko epätoivoisesti täällä selitellä jotain..
Muoks! Esimerkkisivu hieman eri värein
Karsin HTML:ää ja korjasin logiikkaa.
<!DOCTYPE html>
<html>
<title>AkeMaken valikko korjattuna</title>
<style type="text/css">
ul {
list-style: none;
line-height: 60px;
margin: 30px;
padding: 0;
text-align: right;
text-transform: uppercase;
width: 250px;
}
ul li {
display: block;
position: relative;
z-index: 1;
}
ul li a {
display: block;
padding-right: 20px;
text-decoration: none;
}
ul li.current,ul li:hover {
background-color: #CBD6BC;
margin-bottom: -60px;
padding: 30px 0;
top: -30px;
z-index: 0;
}
ul li.current {
z-index: -1;
}
ul li.current a,ul li:hover a {
background-color: #A1B49E;
}
</style>
<ul>
<li><a href="">Linkki yksi</a></li>
<li><a href="">Linkki kaksi</a></li>
<li><a href="">Linkki kolme</a></li>
<li class="current"><a href="">Valittu linkki</a></li>
<li><a href="">Linkki 5</a></li>
</ul>
</html>Jos haluat, että "valittu linkki" on samaan tapaan valittavissa, niin voit ottaa negatiivisen z-indexin siltä pois.
Tuo Merrin antama css on muuten täsmälleen sellainen mitä haen (ja paljon simppelimmän näköinen kuin oma viritelmäni), kiitos siitä, mutta tuossa on edelleen se sama ongelma minkä kanssa pääasiassa olen paininutkin (antamassani osoitteessa toisen rivin viimeinen kuva). Eli kun "linkki kolme" on aktiivisena niin "Valittu linkki" osan vaaleampi väri on linkki kolmen tumman värin päällä, vaikka tuon tummemman värin kuuluisi olla se hallitseva päällä oleva väri. En onnistunut korjaamaan ongelmaa myöskään noilla z-indexeillä. Mistähän tähän löytäisi ratkaisun?
Edit. Jaa, sitä muokattiin jälkikäteen.. Kokeilenpa toimiiko tuo halutulla tavalla.
Edit2. Jaa, et muokannutkaan itse koodia. Eli ongelma on edelleen tuo sama minkä mainitsin.
Edit3. Tuohon vastaukseen, joka kerkesi käydä, mutta näköjään poistit sen:
Minun olisi kai pitänyt heti alussa sanoa, että nuo valikon värit tulevat oikeasti olemaan taustakuvia. Se varmaan vähän muuttaa asiaa.. Haluaisin siis, että se taustalla oleva vaaleampi "väri" oli kaikkien tummempien "värien" alla. Eli ei vain osaksi läpinäkyvä, vaan kokonaan niiden toisten taustakuvien alla.
Noniin, nyt sitten vihdoin.
http://merri.net/xhtml/akemaken_valikko3.html
Piti muuttaa hieman enemmän logiikkaa kuin aluksi ajattelin. Eli nyt pseudoelementit sijoittuvat taustalle, jolloin ne eivät ole klikattavia eivätkä :hoverin vaikutuspiirissä. Ainakin on luksusta, kun on kahdet eri elementit käytettävissä.
Linkkielementti, joka määrää :hover-alueen, on läpinäkyvä.
Jos siis tahtoo tämän toimimaan IE:lle ja mahdollisesti karsimaan muistakin selaimista ongelmia pois (mobiiliselaimet), niin sitten kannattaa vaihtaa tilalle oikeita HTML-elementtejä, jotka ovat samalla tasalla linkkielementin kanssa (esim. tyhjänpäiväiset b ja i -tagit).
<!DOCTYPE html>
<html>
<title>AkeMaken valikko korjattuna</title>
<style type="text/css">
ul {
list-style: none;
line-height: 60px;
margin: 30px;
padding: 0;
text-align: right;
text-transform: uppercase;
width: 250px;
}
ul li {
display: block;
margin-left: 30px;
position: relative;
}
ul li a {
display: block;
padding-right: 20px;
position: relative;
text-decoration: none;
z-index: 1;
}
ul li.current:before,ul li:hover:before {
background-color: rgba(203, 214, 188, .75);
content: '';
display: block;
height: 100%;
left: -30px;
padding: 30px 0 30px 30px;
position: absolute;
top: -30px;
width: 100%;
z-index: -2;
}
ul li.current:before {
background-color: rgba(214, 203, 188, .75);
z-index: -4;
}
ul li.current:after,ul li:hover:after {
background-color: #A1B49E;
content: '';
display: block;
height: 60px;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: -1;
}
ul li.current:after {
background-color: rgba(180, 161, 158, .85);
z-index: -3;
}
</style>
<ul>
<li><a href="">Linkki yksi</a></li>
<li><a href="">Linkki kaksi</a></li>
<li><a href="">Linkki kolme</a></li>
<li class="current"><a href="">Valittu linkki</a></li>
<li><a href="">Linkki 5</a></li>
</ul>
</html>Aihe on jo aika vanha, joten et voi enää vastata siihen.