Tyyli häviää

Kiitos avusta, koodi näyttää paljon siistimmältä, mutta alkuperäinen ongelma ei poistunut. Sen verran tapahtui muutosta, että nyt fontin koko on oikein kaikissa tilanteissa. Taustan väri on valkoinen vaikka pitäisi olla musta, fontin väri sininen valkoisen sijaan ja fontti on alleviivattu vaikka text decoration on none. Hover toimii oikein ei taustat ja kaikki on kunnossa.

Ympärillä on 5 muuta linkkiä jotka toimivat kunnolla mutta tuo missä on php setti ei pelaa.

Linkeissä on tyylikeino tuo niiden muuttumattomuus, mutta kiitos kuitenkin vinkistä.

Koodi näyttää nyt tältä:


TESTI

Koodia välissä...

TESTI


Alempi siis näkyy oikein ja ylempi ei.

avuton kirjoitti:

Kiitos avusta, koodi näyttää paljon siistimmältä, mutta alkuperäinen ongelma ei poistunut. Sen verran tapahtui muutosta, että nyt fontin koko on oikein kaikissa tilanteissa. Taustan väri on valkoinen vaikka pitäisi olla musta, fontin väri sininen valkoisen sijaan ja fontti on alleviivattu vaikka text decoration on none. Hover toimii oikein ei taustat ja kaikki on kunnossa.

Ympärillä on 5 muuta linkkiä jotka toimivat kunnolla mutta tuo missä on php setti ei pelaa.

Linkeissä on tyylikeino tuo niiden muuttumattomuus, mutta kiitos kuitenkin vinkistä.

Koodi näyttää nyt tältä:


TESTI

Koodia välissä...

TESTI


Alempi siis näkyy oikein ja ylempi ei.

Lue lisää

Jäi tuo css puuttumaan...

.valikko
{
text-align: right;
}

.valikko a:link, a:active, a:visited
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
text-decoration: none;
font-weight:bold;
background-color: #000000;
color: #FFFFFF;
}

.valikko a:hover
{
color: #AB0F08;
}

avuton kirjoitti:

Jäi tuo css puuttumaan...

.valikko
{
text-align: right;
}

.valikko a:link, a:active, a:visited
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
text-decoration: none;
font-weight:bold;
background-color: #000000;
color: #FFFFFF;
}

.valikko a:hover
{
color: #AB0F08;
}

Lue lisää

Tässä linkki: http://pastebin.com/661295

Sama heppu kirjoitti:

Tässä linkki: http://pastebin.com/661295

Juu... onko tossa sitten jotain eroa kun mulla on erillinen css tiedosto?

Avuton kirjoitti:

Juu... onko tossa sitten jotain eroa kun mulla on erillinen css tiedosto?

Erillinen sen ennemmin pitääkin olla - toimii molemmilla tavoilla aivan samalla tavalla.. Helpotti vain tuota esimerkin tekoa, kun tungin molemmat samaan tiedostoon..

... kirjoitti:

Erillinen sen ennemmin pitääkin olla - toimii molemmilla tavoilla aivan samalla tavalla.. Helpotti vain tuota esimerkin tekoa, kun tungin molemmat samaan tiedostoon..

Kokeilin tuota esimerkkiä... toimii se minullakin. Mutta kun lisään muita määrittelyjä menee tuo yksi kohta perseelleen. Ihme homma kun se muuten toimii paitsi tuollaisen linkin kanssa. Sama koskee kaikkia muitakin määrittelyä joissa on vastaava linkki. Minulla on siis css tiedostossa määrittelyt .leipis ja .valikko. Jos on pelkkä .valikko tuo linkki näkyy oikein, mutta kun lisään leipiksen se lakkaa näkymästä. Ja sama toisinpäin. Sama linkki on eri tyylisienä molemmissa paikoissa valikossa ja itse tekstissä.

Avuton kirjoitti:

Kokeilin tuota esimerkkiä... toimii se minullakin. Mutta kun lisään muita määrittelyjä menee tuo yksi kohta perseelleen. Ihme homma kun se muuten toimii paitsi tuollaisen linkin kanssa. Sama koskee kaikkia muitakin määrittelyä joissa on vastaava linkki. Minulla on siis css tiedostossa määrittelyt .leipis ja .valikko. Jos on pelkkä .valikko tuo linkki näkyy oikein, mutta kun lisään leipiksen se lakkaa näkymästä. Ja sama toisinpäin. Sama linkki on eri tyylisienä molemmissa paikoissa valikossa ja itse tekstissä.

Lue lisää

Laita linkki sivulle, niin pystyy katsomaan asiaa kokonaisuutena.

Avuton kirjoitti:

Kokeilin tuota esimerkkiä... toimii se minullakin. Mutta kun lisään muita määrittelyjä menee tuo yksi kohta perseelleen. Ihme homma kun se muuten toimii paitsi tuollaisen linkin kanssa. Sama koskee kaikkia muitakin määrittelyä joissa on vastaava linkki. Minulla on siis css tiedostossa määrittelyt .leipis ja .valikko. Jos on pelkkä .valikko tuo linkki näkyy oikein, mutta kun lisään leipiksen se lakkaa näkymästä. Ja sama toisinpäin. Sama linkki on eri tyylisienä molemmissa paikoissa valikossa ja itse tekstissä.

Lue lisää

Kyllähän se piste siellä näyttää haittaavan jotenkin, mutta kun laittaa pelkän:

.valikko a

tämän tilalle niin toimii..

.valikko a:link, a:active, a:visited

Kokeilin myös leipiksellä ja valikkoa id:nä, mutta sama homma, linkki ei toimi jollei ota pois noita active ja visited..!

... kirjoitti:

Laita linkki sivulle, niin pystyy katsomaan asiaa kokonaisuutena.

Sivut on omalla koneella... Ei ole palvelinta mihin niitä pistäisi.

Mutta tuo Ridgen vinkki auttoi. Poistin .valikko a:link, a:visited, a:active ja korvasin pelkällä .valikko a ja sama homma leipiksessä niin alkoi toimia.

Kiitoksia molemmille avusta ja vaivannäöstä.

Ridge kirjoitti:

Kyllähän se piste siellä näyttää haittaavan jotenkin, mutta kun laittaa pelkän:

.valikko a

tämän tilalle niin toimii..

.valikko a:link, a:active, a:visited

Kokeilin myös leipiksellä ja valikkoa id:nä, mutta sama homma, linkki ei toimi jollei ota pois noita active ja visited..!

Lue lisää

Nyt pelittää. Kiitos Ridge.

Avuton kirjoitti:

Nyt pelittää. Kiitos Ridge.

Köhöm. Juuri noinhan siinä (PasteBin) esimerkissäni oli.

..... kirjoitti:

Köhöm. Juuri noinhan siinä (PasteBin) esimerkissäni oli.

Niinpäs olikin... Mutta se ei kuitenkaan toimi ihan noin. Olin hiukan hätäinen. Ridgen viestin jälkeen innoissaan kokeilin ja se näkyi oikein. Kunnes klikkasin jotain linkkiä nyt myöhemmin kun jatkoin sivujen työstöä... visited tila ei näkynyt oikein. Vaan meni saman näköiseksi kuin linkki normaalisti aiemmin.

Sain sen kuitenkin lopulta toimimaan... Erotin jokaisen omaksi kohdaksensa.

Eli näin:

.valikko
{
text-align: right;
}

.valikko a:link
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
text-decoration: none;
font-weight:bold;
background-color: #000000;
color: #FFFFFF;
}

.valikko a:visited
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
text-decoration: none;
font-weight:bold;
background-color: #000000;
color: #FFFFFF;
}

.valikko a:hover
{
color: #AB0F08;
}

.valikko a:active
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
text-decoration: none;
font-weight:bold;
background-color: #000000;
color: #FFFFFF;
}

ja sama leipiksen kanssa. Nyt toimii kaikki oikein. Jostain syystä niitä ei sitten voi yhdistää.

Kiitos molemmille kuitenkin tuhannesti avusta.

Avuton kirjoitti:

Niinpäs olikin... Mutta se ei kuitenkaan toimi ihan noin. Olin hiukan hätäinen. Ridgen viestin jälkeen innoissaan kokeilin ja se näkyi oikein. Kunnes klikkasin jotain linkkiä nyt myöhemmin kun jatkoin sivujen työstöä... visited tila ei näkynyt oikein. Vaan meni saman näköiseksi kuin linkki normaalisti aiemmin.

Sain sen kuitenkin lopulta toimimaan... Erotin jokaisen omaksi kohdaksensa.

Eli näin:

.valikko
{
text-align: right;
}

.valikko a:link
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
text-decoration: none;
font-weight:bold;
background-color: #000000;
color: #FFFFFF;
}

.valikko a:visited
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
text-decoration: none;
font-weight:bold;
background-color: #000000;
color: #FFFFFF;
}

.valikko a:hover
{
color: #AB0F08;
}

.valikko a:active
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
text-decoration: none;
font-weight:bold;
background-color: #000000;
color: #FFFFFF;
}

ja sama leipiksen kanssa. Nyt toimii kaikki oikein. Jostain syystä niitä ei sitten voi yhdistää.

Kiitos molemmille kuitenkin tuhannesti avusta.

Lue lisää

Edelleen painota sitä, että käyttäjän tulee erottaa jo vierailtu linkki vierailemattomasti! Käytä siis eri väriä a:visited linkille!

.... kirjoitti:

Edelleen painota sitä, että käyttäjän tulee erottaa jo vierailtu linkki vierailemattomasti! Käytä siis eri väriä a:visited linkille!

Kyseessä on tässä tapauksessa valikko sivun vasemmassa reunassa. Tehty näyttämään siltä kuin kyseessä olisi kuvat roll over efektillä. Muualla on kyllä linkit niin että erottaa.

Avuton kirjoitti:

Niinpäs olikin... Mutta se ei kuitenkaan toimi ihan noin. Olin hiukan hätäinen. Ridgen viestin jälkeen innoissaan kokeilin ja se näkyi oikein. Kunnes klikkasin jotain linkkiä nyt myöhemmin kun jatkoin sivujen työstöä... visited tila ei näkynyt oikein. Vaan meni saman näköiseksi kuin linkki normaalisti aiemmin.

Sain sen kuitenkin lopulta toimimaan... Erotin jokaisen omaksi kohdaksensa.

Eli näin:

.valikko
{
text-align: right;
}

.valikko a:link
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
text-decoration: none;
font-weight:bold;
background-color: #000000;
color: #FFFFFF;
}

.valikko a:visited
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
text-decoration: none;
font-weight:bold;
background-color: #000000;
color: #FFFFFF;
}

.valikko a:hover
{
color: #AB0F08;
}

.valikko a:active
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
text-decoration: none;
font-weight:bold;
background-color: #000000;
color: #FFFFFF;
}

ja sama leipiksen kanssa. Nyt toimii kaikki oikein. Jostain syystä niitä ei sitten voi yhdistää.

Kiitos molemmille kuitenkin tuhannesti avusta.

Lue lisää

En ole erityisen tarkkaan perehtynyt tähän ongelmaan, mutta ajattelin kuitenkin huomauttaa parista asiasta. Aikaisemmissa viesteissä käytit tyylisääntöjä

.valikko a:link, a:active, a:visited { /* Jotain. */ }
.valikko a:hover { /* Muuta. */ }

jotka itse asiassa tarkoittavat samaa kuin

.valikko a:link { /* Jotain. */ }
a:active { /* Jotain. */ }
a:visited { /* Jotain. */ }
.valikko a:hover { /* Muuta. */ }

Veikkaanpa, että yllä olevien määrittelyjen sijaan tarkoitit sääntöjä

.valikko a:link { /* Jotain. */ }
.valikko a:active { /* Jotain. */ }
.valikko a:visited { /* Jotain. */ }
.valikko a:hover { /* Muuta. */ }

jotka puolestaan täytyy esittää lyhennetyssä muodossa näin:

.valikko a:link, .valikko a:active, .valikko a:visited { /* Jotain. */ }
.valikko a:hover { /* Muuta. */ }

Toinen asia on se, että a:hover täytyy määritellä a:link- ja a:visited-kohtien jälkeen. Lisäksi a:active täytyy määritellä a:hover-kohdan jälkeen. Muussa tapauksessa linkkien muotoilu ei toimi odotetulla tavalla.

http://www.w3.org/TR/CSS21/selector.html#x35

En sitten tiedä, auttoiko tämä varsinaisen ongelman ratkaisussa ollenkaan. Kaikki näyttäisi olevan kunnossa ainakin siinä viestissä, johon nyt vastasin.