28220 sujets

CSS et mise en forme, CSS3

Bonjour !

Je commence un site persohttp://perso.wanadoo.fr/ralfdotcom/, et je rencontre ce problème : j'aimerai avoir un menu réactif en css : lorsque la souris survole un lien, la couleur de l'arriere plan de ce lien devrait changer sur toute la largeur du div,or ce qui se passe est que la couleur change, mais uniquement selon la largeur du texte qui est dessous !
J'ai beau bidouiller, rien n'y fait ! Je rajoute des "position :absolute",des "text-align" mais cela ne fait qu'empirer le pb...Voilà mes CSS:
body {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 0.8em;margin: 0;padding: 0;}
#header {border:2px  solid #AAC;height: 128px;background: url(pics/logos/banniere19.png) no-repeat;}
#conteneur {border:2px  solid #AAC;position: absolute;height: 512px;width: 768px;left: 50%;margin-left: -375px;top:8px;}
#centre {border:2px solid #AAC;background: url(pics/bernus01.JPG) no-repeat;height: 384px;margin-left: 150px;margin-right: 150px;}
#gauche {position: absolute;left:0;width: 150px;}
#droite {position: absolute;right:0;width: 150px;}
#pied {font-size:0.7em;position: absolute;height: 30px;width: 768px;top:528px;left:33%;color:#559;}
.menugauche {list-style-type: none;margin: 0;padding: 0;text-align:center;width:26;}
.menugauche li {margin-bottom: 10px;margin-top: 10px;}
.menudroite {list-style-type: none;margin: 0;padding: 0;text-align:center;}
.menudroite li {margin-bottom: 10px;margin-top: 10px;}
a{color:blue;}
a:visited{color:#559;text-decoration:none;}
a:hover{color:#7AC;text-decoration:none;background-color:#DDF}
a:active{color:#DDF;}

Merci!
Merci de ta réponse si rapide, je confirme, ça fonctionne très bien...
Une remarque : sous Firefox tout se déroule bien, contrairement à IE : l'espace entre deux lignes de ma liste est doublé, voire triplé : mon menu déborde !
L'ajout de "line-height" par-ci par-là, ou la suppression des "margin" et des "padding" ne change rien...
Modifié par Ralfman68 (04 Aug 2005 - 20:18)