Problème de positionnement et de bouton de navigation glitchy

Je travaille sur un site Web et je souhaite que la barre de navigation soit placée dans le coin inférieur droit d'un DIV. Je l'ai mis en place, cependant, chaque fois que je passe la souris sur un bouton, il se produit un petit pépin bizarre qui place la crosse du hover'ed à la bonne position. Je n'arrive pas à trouver une solution à ce problème (quoi que je fasse doit être amical IE).Problème de positionnement et de bouton de navigation glitchy

Testé dans Chrome, FF et Safari. Tous les mêmes.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Untitled Document</title> 
<style> 

#head { 
    width: 80%; 
    height: 80px; 
    position:relative; 
    margin-left:auto; 
    margin-right:auto; 
    background: #56A0D3; 
    background-image:url(/image/bubblesTall.gif); 
    z-index: 5000; 
    padding-top:5px; 
    color: #FFFFFF; 
} 

.menu { 
    float:right; 
    width:80%; 

    position:absolute; 
    bottom:0px; 
    right:0px; 
    margin-right:0px; 
    text-decoration:none; 
    height:auto; 
} 
.menu li { 
    float:right; 
    text-decoration:none; 
    list-style-type:none; 
} 

#nav a:hover, 
#nav a:focus { 
    color:#ffffff; 
    background:#009999; 
    text-decoration:none; 
    font-size: 14px; 
    right: 0px; 
    bottom: 0px; 
    position: absolute; 
} 

.menu a { 
    float: left; 
    display:block; 
    text-align:center; 
    color: #5ccccc; 
    background: #006363; 
    font-size: 12px; 
    font-weight:200; 
    text-decoration:none; 
    font-size: 14px; 
    position:relative; 
    padding-left:5px; 
    padding-right:5px; 
} 

</style> 
</head> 

<body> 
<div id="head">logo 
<div class='menu'> 

     <ul id="nav"> 
      <li><a href="index.html">Home</a></li> 
      <li><a href="about.html">About Us</a></li> 
      <li><a href="gallery.html">Gallery</a></li> 
      <li><a href="programs.html">Programs</a></li> 
      <li><a href="prospective.html">Prospective Clients</a></li> 
      <li><a href="contact.html">Contact Us</a></li> 
     </ul> 

</div> 
</div> 



</body> 
</html>

Source

2011-02-24 khop

On dirait que votre CSS est le problème. Cela semble être un peu contradictoire.

les opérations suivantes:

HTML

<div id="head">logo 
<div class='menu'> 

     <ul id="nav"> 
      <li><a href="index.html">Home</a></li> 
      <li><a href="about.html">About Us</a></li> 
      <li><a href="gallery.html">Gallery</a></li> 
      <li><a href="programs.html">Programs</a></li> 
      <li><a href="prospective.html">Prospective Clients</a></li> 
      <li><a href="contact.html">Contact Us</a></li> 
     </ul> 

</div> 
</div>

CSS

#head { 
    width: 80%; 
    height: 80px; 
    position:relative; 
    margin-left:auto; 
    margin-right:auto; 
    background: #56A0D3; 
    background-image:url(/image/bubblesTall.gif); 
    padding-top:5px; 
    color: #FFFFFF; 
} 

.menu { 
    float:right; 
    position:absolute; 
    bottom:0px; 
    right:0px; 
    text-decoration:none; 
    height:auto; 
} 

ul#nav li{ 
    float:left; 
} 

ul#nav li a, 
ul#nav li a:visited{ 
    color:#ffffff; 
    background:#009999; 
    text-decoration:none; 
    display:block; 
    padding:5px; 
} 

ul#nav li a:hover, 
ul#nav li a:active{ 
    color:#ffffff; 
    background:#ff0000; 
    text-decoration:none; 
}

Voici un exemple de travail: http://jsfiddle.net/YmeKa/1/

Source

2011-02-24 00:59:58 Dan

Comme vous pouvez le deviner, il y a un problème lorsque vous passez la souris, il est donc dans: règle de vol stationnaire:

#nav a:hover, 
#nav a:focus { 
    color:#ffffff; 
    background:#009999; 
    text-decoration:none; 
    font-size: 14px; 
    right: 0px; 
    bottom: 0px; 
    position: absolute; 
}

Comme vous pouvez le voir, le lien (la balise) est réglé sur droite: 0. Vous le déplacez tout le chemin vers le bord droit.

Je ne sais pas exactement ce que vous essayiez de faire ici, mais je ne pense pas que vous vouliez que le lien soit soudainement positionné de manière absolue. Si votre objectif est de faire une fenêtre flottante que c'est ce que vous voulez absolument positionner, pas le lien.

Source

2011-02-24 00:46:23

Problème de positionnement et de bouton de navigation glitchy

Répondre

Questions connexes