Page 1 sur 1

pseudo-classes

Publié : 20 juin 2010, 19:13
par FlorenceC
Bonjour - encore!

Sur les conseils d'un des internautes de Geckozone je me suis mise aux feuilles de style et autres...

J'ai créé des pseudo-classes pour les liens et j'ai pls problemes:

1. J'ai créé ces pseudos-classes sur ma page index. a:link et a:visited ont été appliquées automatiquement aux liens de ma page index.

Mais a:hover n'est appliqué qu'à une adresse email et à un lien du site mais pas aux liens du menu à gauche.

J'ai refait la procédure plusieurs fois mais ca ne marche pas.....si quelqu'un peut m'aider......

2.Est-ce possible d'appliquer ces pseudos-classes aux autres pages du site sans avoir à créer une pseudo-classe à chaque fois?

Merci pour vos conseils....

FC.

Re: pseudo-classes

Publié : 20 juin 2010, 20:05
par chinon37
Bonsoir,

Il nous faudrait l'adresse du site, ou le code de la page ainsi que le css. Sans cela, point de salut!! :wink:

Re: pseudo-classes

Publié : 21 juin 2010, 12:15
par FlorenceC
Le site est encore uniquement sur mon disque dur.

J'ai suivi - enfin je crois - la procédure expliquée dans l'aide de Kompozer pour styliser les liens avec le CSS de Kompozer donc.

J'ai créé d'abord le a:link (ça marche sur tous mes liens), puis le a:visited (ça marche aussi sur tous mes liens) et enfin le a:hover (qui ne marche pas sur tous les liens - j'ai demandé à ce que les liens passent au bleu en gras quand on les survole avec la souris).

Le lien (English Café) suivant a bien toutes les propriétés du a:link et du a:visited mais pas du a:hover (c'est un lien vers une autre page du site et ce lien est situé dans une cellule à gauche):
<a href="englishcafe.html" style="color: black;">English Café</a>

Ce lien (English Café) apparaît une autre fois sur la page page mais dans une cellule de droite et cette fois il contient les caractéristiques du a:hover
<a href="englishcafe.html">English Café</a>

Je vois bien que ce n'est pas le même code mais je ne vois pas où j'ai fait l'erreur...

Pour résumer, mes liens de la cellule de droite ont bien les caractéristiques du a:hover mais pas ceux de la cellule de gauche donc j'ai dû faire une erreur mais je ne comprends pas où....

Voici tout le code de la page (les mots qui sont des liens et pour qui le hover ne marchent pas sont: home, history, english café, conferences and outings, public speaking competition, membership, contact et enfin links):

Code : Tout sélectionner

<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>pagesaccueil</title>
<style type="text/css">
a:link {
font-family: Arial,Helvetica,sans-serif;
text-decoration: none;
font-size: medium;
font-weight: bold;
color: black;
}
a:visited {
font-weight: bolder;
font-style: italic;
text-decoration: none;
}
a:hover {
font-weight: bold;
color: #000099;
text-decoration: none;
font-family: Arial,Helvetica,sans-serif;
}

</style>
</head>
<body style="height: 1273px;">
<table style="text-align: left; width: 100%; height: 500px;" border="0"
cellpadding="5" cellspacing="0">
<tbody>
<tr>
<td colspan="3" rowspan="1"
style="vertical-align: top; width: 451px; text-align: center; background-color: rgb(153, 0, 0); height: 178px;"><small>&nbsp;<a
name="TOP"></a></small><br>
<br>
<big style="font-weight: bold; color: white;"><big><big><span
style="font-family: Arial;">&nbsp;<font size="+3"><big>THE ENGLISH
SPEAKING UNION BORDEAUX</big> </font><br>
<br>
Association Loi 1901</span></big></big></big><br>
<br>
</td>
</tr>
<tr>
<td colspan="1" rowspan="2"
style="vertical-align: top; width: 263px; background-color: rgb(204, 204, 204); height: 176px;"><font
style="font-family: Arial;" size="+1"><a href="index.html"
style="color: black;">Home</a></font><br
style="color: black; text-decoration: underline;">
<font style="font-family: Arial;" size="+1"> <span
style="color: black; text-decoration: underline;"></span><br>
<a href="history.html" style="color: black;">History</a><br
style="color: black;">
<br style="color: black;">
<span style="color: black;"></span><a href="englishcafe.html"
style="color: black;">English Café</a><br>
<br>
<a href="conferences.html" style="color: black;">Conferences and
Outings</a><br style="color: black;">
<br style="color: black;">
<a href="publicspeaking.html" style="color: black;">Public
Speaking Competition</a><br>
<br>
<a href="membership.html" style="color: black;">Membership</a><br
style="color: black;">
<span style="color: black;">&nbsp;</span><br style="color: black;">
<a href="contact.html" style="color: black;">Contact</a><br
style="color: black;">
<span style="color: black;">&nbsp;</span><br style="color: black;">
</font><font style="font-family: Arial;" size="+1"><a
href="links.html" style="color: black;">Links</a></font><a
style="color: black;" href="links.html"> </a><small><br>
&nbsp;<br>
</small><small><br>
</small></td>
<td
style="vertical-align: top; width: 569px; height: 200px; text-align: center;"><small><br>
</small>
<div style="text-align: left;"><img
style="width: 510px; height: 276px;" alt="Map of ESU"
src="images/cartes%20esu.jpg" hspace="20" vspace="20"><br>
</div>
</td>
<td
style="vertical-align: top; width: 313px; background-color: rgb(255, 255, 204);"><big><span
style="font-family: Arial; font-weight: bold;">&nbsp;<br>
<br>
</span></big>
<div style="text-align: center;"><big><span
style="font-family: Arial; font-weight: bold;">&nbsp; Latest news</span></big><br>
<big><span style="font-family: Arial; font-weight: bold;"></span></big></div>
<big><span style="font-family: Arial; font-weight: bold;"> <br>
</span><span style="font-family: Arial;">The next English Café
will take place on Wednesday, September </span><span
style="font-family: Arial;">15th.<br>
<br>
If you want to attend, please send us an email before September 10th: <a
target="_blank" href="--------------">--------------</a><br>
<br>
For more information: <a href="englishcafe.html">English Café</a><br>
<br>
<br>
</span></big><br>
</td>
</tr>
<tr>
</tr>
</tbody>
</table>
<br>
</body>
</html>
Merci d'avance!

FC
[modo]Restructuré pour la lisibilité[/modo]

Re: pseudo-classes

Publié : 21 juin 2010, 18:31
par Ymai
Bonjour
Les directives de style appliquées directement sur une balise html ont priorité sur les directives qui figurent dans la feuille de style.
Les liens dans le cadre de gauche sont du type:

Code : Tout sélectionner

<a href="englishcafe.html" style="color: black;">English Café</a
Conclusion: quoique dise la feuille de style, le texte "English Café" sera en noir.