Discussion :

[rocketter]

Bonjour,

voilà j'ai des liens <a> contenus dans des <li> ; pour les <li> j'ai un border solid de 2px ; les <a> sont en display:block afin qu'ils prennent toute la place de leur conteneur.
J'attribue un hover aux <a> avec comme propriété un border de 2px mais d'une couleur différente aux <li> ; le souci est que lorsque je suis sur un lien, tout s'applique comme il faut mais cela entraine un décalage avec les liens situés à côté. Pour être plus clair j'ai préparé 2 screens :

au repos :


Ici avec le hover sur le lien A, les liens B, C et D vont se rapprocher du lien A et se remettre ensuite à leurs positions initiales une fois le lien A au repos :


Mon code html :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<nav class="menu-top">
    <ul>
        <li class="items">
            <a href="#">A</a>
        </li>
        <li class="items">
            <a href="#">B</a>
                 <ul>
                    <li>
                        <a href="#">Sous-lien 1</a>
                    </li>
                    <li>
                        <a href="#">Sous-lien 2</a>
                    </li>
                </ul>
        </li>
        <li class="items">
            <a href="#">C</a>
        </li>
        <li class="items">
            <a href="#">D</a>
        </li>
    </ul>
</nav>

et le CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
nav li a{
    display: block; /*Afin que le a prenne toute la place dispo*/
}
nav li a:hover {   
 
    background: linear-gradient(to bottom, #3a3a3c 0%,#68696d 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3a3a3c', endColorstr='#68696d',GradientType=0 ); /* IE6-9 */
    border: 2px solid #56565b;
    color: white;
    border-radius: 10px;
}
nav li:hover {
    border:none;
}
.items{
    display: inline-block;  
    position: relative;
}
.items ul{
    display: none;
}
.menu-top li:hover ul{
    display: block;
}
.items ul {
    position: absolute;
    top: 48px;
}

Merci par avance de m'aider

[s0h3ck]

Bonjour rocketter,

J'ai regarder vos deux pièces jointes et il ne semble pas y avoir de différence outre les flèches rouges et le bouton A en mode « hover ». Bref, les fichiers sont comme inutiles pour l'instant.

Pensez à être un peu plus explicite dans les images la prochaine fois.
J'ai donc analyser un peu votre code et je crois que votre soucis s'explique grâce à cette propriété :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

border: 2px solid #56565b; 

Exactement, lorsque vous n'êtes pas en mode « hover », le contour du lien (ou anchor si on veut) est par défaut avec aucune bordure. Lorsque vous lui ajoutez 2px de bordure, ça affecte tous le tour de l'élément ce qui expliquerais pourquoi vous avez un léger décalage.
Je vous propose d'essayer de changer le 2px pour 10px par exemple afin de voir le réel changement.

Pour remédier à cette solution, vous pouvez

• définir une bordure à l'élément <a> de même dimension lorsqu'elle subira un changement avec « hover »
• jouer avec les marges extérieur ou intérieur
• jouer avec un ou deux côté d'une bordure de l'élément ... exemple border-bottom: 2px solid #56565b; (personnellement, je ne crois pas que ça soit la meilleure solution, mais garder à l'esprit que c'est une possibilité en dernier recours.)

J'espère que ça répond à vos doutes.
Bonne journée!

[rocketter]

Bonjour,

merci de votre réponse, désolé de la capture pas très pertinente en effet. Je m'en suis tiré grâce à vos idées : définir une bordure sur a ; et retoucher un peu le height du li ; maintenant on y voit que du feu. Merci