Page 1 sur 1
Probleme bizarre avec liens
Posté : 18 janv. 2007, 07:58
par bins007
Tout d'abord voilà le code :
Code : Tout sélectionner
<head>
<style>
.link {
text-decoration:none;
display: block;
width: 95px;
}
.link:hover {
font-weight:bold;
background-color:#FF0000;
}
</style>
</head>
<body>
<div style="float: left;">
<a href="#" class="link">Lien 1</a>
<a href="#" class="link">Lien 2</a>
</div><div align="center">
<p>Texte 1</p>
<p>Texte 2</p>
<p>Texte 3</p>
<p>Texte 4</p>
<p>Texte 5</p>
</div>
</body>
Donc j'affiche un menu à gauche avec des liens et à droite le contenu.
Je veux qu'au survol des liens, le fond change de couleurs mais aussi au survol de l'espace pour les liens (les 95px).
Sous IE, quand il y'a du texte aligné avec un lien lors du passage de la souris sur l'espace du lien (95px), le hover ne se fait pas.
Comment résoudre ça ?
PS : c'est assez compliqué à expliquer, j'espère que vous avez compris
Posté : 18 janv. 2007, 16:37
par Ryle
A priori, si tu enlèves l'attribut "display: block", ca fonctionne très bien sous IE (le passage de la souris dans la zone et pas juste sur le lien)
Reste plus qu'à mettre des retours à la ligne ou à englober tes liens dans des <div> ou des <li> pour leur rendre le style block
Posté : 18 janv. 2007, 19:30
par bins007
Oui mais dans ce cas c'est avec firefox que ça ne fonctionne plus !
Posté : 18 janv. 2007, 23:11
par AB
Bonjour,
Cela marche avec IE et Firefox
Code : Tout sélectionner
<head>
<style>
.link a {
text-decoration:none;
display:block;
width:95px;
}
.link a:hover {
font-weight:bold;
background-color:#FF0000;
}
</style>
</head>
<body>
<div class="link">
<a href="#">Lien 1</a>
<a href="#">Lien 2</a>
</div>
<div align="center">
<p>Texte 1</p>
<p>Texte 2</p>
<p>Texte 3</p>
<p>Texte 4</p>
<p>Texte 5</p>
</div>
</body>
Posté : 18 janv. 2007, 23:21
par bins007
Oui mais tu as oublié le "float:left" qui est le plus important
si on rajoute ça dans le CSS :
ça ne marche plus !
Posté : 18 janv. 2007, 23:41
par AB
Oui, c'était juste pour régler les a:hover
Pour le reste il faut changer la structure
Posté : 19 janv. 2007, 00:16
par AB
Si tu es pressé tu peux faire ça
Code : Tout sélectionner
<head>
<style>
.link {
vertical-align:top;
}
.link a {
text-decoration:none;
display:block;
width:95px;
}
.link a:hover {
font-weight:bold;
background-color:#FF0000;
}
</style>
</head>
<body>
<table>
<tr>
<td class="link">
<a href="#">Lien 1</a>
<a href="#">Lien 2</a>
</td>
<td align="center">
<p>Texte 1</p>
<p>Texte 2</p>
<p>Texte 3</p>
<p>Texte 4</p>
<p>Texte 5</p>
</td>
</tr>
</table>
</body>
c'est pas hi tech mais ça fonctionnera partout (le plus robuste) et valide XHTML.
Si tu trouves une solution facile sans la "vilaine" table qui va faire hurler les puristes parce que non conforme à l'esprit, merci de l'indiquer
Posté : 19 janv. 2007, 00:59
par bins007
J'avais pensé à cette solution au départ mais justement c'est moyen, pour le moment je garde ça
Mais si quelqu'un trouve mieux, merci de m'indiquer !