Probleme bizarre avec liens

par **bins007** » 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 !

par AB » 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

par AB » 18 janv. 2007, 23:41

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

Pour le reste il faut changer la structure

par **bins007** » 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 !

par AB » 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>

par **bins007** » 18 janv. 2007, 19:30

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

par **Ryle** » 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

par **bins007** » 18 janv. 2007, 07:58

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

Probleme bizarre avec liens

Répondre

Étendre la vue Revue du sujet : Probleme bizarre avec liens

Probleme bizarre avec liens