Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [XHTML] style linkow...
Forum PHP.pl > Forum > Po stronie przeglądarki > HTML \ XHTML
slash^
Witam. Zaczalem budowac wlasnie sobie strone (pierwszy raz) w XHTML, po przeczytaniu kilku web-kursow wiem juz troche ale dopadl mnie taki oto problem:

Ponizszy fragment jest w pliku ze stylami (css), gdy biore go do strony jako <a class="menuh" .. > czcionka wyswietla sie OK, ale po "najechaniu" na nia pozostaja nadal styl z "link" - nie zmieniajac sie na styl z "hover", czemu?

Oto kod:

[xml:1:ffbc8382fd]a.menuh:link {
font-family: Tahoma, Verdana, Arial;
font-size: 11px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
padding-right: 4px;
padding-left: 4px;
letter-spacing: px;
}
a.menuh:hover {
font-family: Tahoma, Verdana, Arial;
font-size: 11px;
font-weight: bold;
color: #FF0000;
text-decoration: underline;
padding-right: 4px;
padding-left: 4px;
letter-spacing: 1px;
}
a.menuh:visited {
font-family: Tahoma, Verdana, Arial;
font-size: 11px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
padding-right: 4px;
padding-left: 4px;
letter-spacing: 1px;
}[/xml:1:ffbc8382fd]
Vir
Powinno działać (przetestowano na IE 6.0, validacja XHTML zakończona pozytywnie, validacja CSS2 też - z drobnymi uwagami - czytaj na końcu).
Poniżej zamieszczam kompletny kod strony, na której użyłem stworzonych przez Ciebie styli:
[xml:1:509e7e1dac]<?xml version="1.0" encoding="iso-8859-2"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
a.menuh:link {
font-family: Tahoma, Verdana, Arial, sans-serif;
font-size: 11px;
font-weight: bold;
color: #000000;
text-decoration: none;
padding-right: 4px;
padding-left: 4px;
letter-spacing: 1px;
}
a.menuh:hover {
font-family: Tahoma, Verdana, Arial, sans-serif;
font-size: 11px;
font-weight: bold;
color: #FF0000;
text-decoration: underline;
padding-right: 4px;
padding-left: 4px;
letter-spacing: 1px;
}
a.menuh:visited {
font-family: Tahoma, Verdana, Arial, sans-serif;
font-size: 11px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
padding-right: 4px;
padding-left: 4px;
letter-spacing: 1px;
}
</style>
<title></title>
</head>

<body>

<a href="" class="menuh">xxx</a>

</body>
</html>[/xml:1:509e7e1dac]

Uwagi końcowe - zmieniono:
Przy a.menuh:link letter-spacing: px; nie jest wskazane ile powinno być pixeli - ustawiłem na 1px. Font-family - powinna być podana rodzina czcionki - wpisałem sans-serif.

W pracy nad XHTML mogą Ci się przydać parsery, którymi sprawdzisz poprawność kodu:
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/
slash^
Pomoglo dopiero odwrocenie kolejnosci w CSS:
:arrow: najpierw visited
:arrow: potem hover

... tongue.gif
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.