Probleme bizarre avec liens

18 janv. 2007, 07:58

Tout d'abord voilà le code :

<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

18 janv. 2007, 16:37

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

18 janv. 2007, 19:30

Oui mais dans ce cas c'est avec firefox que ça ne fonctionne plus !

18 janv. 2007, 23:11

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>

18 janv. 2007, 23:21

Oui mais tu as oublié le "float:left" qui est le plus important

si on rajoute ça dans le CSS :

Code : Tout sélectionner

.link
{
float: left;
}

ça ne marche plus !

18 janv. 2007, 23:41

Oui, c'était juste pour régler les a:hover

Pour le reste il faut changer la structure

19 janv. 2007, 00:16

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

19 janv. 2007, 00:59

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 !

Probleme bizarre avec liens

Qui est en ligne