Probleme a:hover

Sujet résolu

5 août 2006 à 16:02:46

Bonjour

J'ai fait un menu horizontal sur mon nouveau site, et j'ai un probleme avec le a:hover.

En faite dans le a:hover j'ai mis un background-color : blue. mais le probleme c'est que quand on survole ce lien, juste le texte a un background bleu, alors que je voudrais que ce soit tout le bloc...

Comment faire ?

Merci de votre aide

rmuffat

5 août 2006 à 16:07:03

Faut appliquer le a:hover à ton li de la liste à puces, comem ça ca prendra le bloc.

Themafia93

5 août 2006 à 16:18:05

tu pourrai me donner le code stp ?

rmuffat

5 août 2006 à 16:21:17

http://www.siteduzero.com/forum-83-63157-p1-image-cliquable-dans-des-li.html

Regarde ce topic, c'est quasiment pareil

Themafia93

5 août 2006 à 16:36:53

Meme avec le topic je n'arrive pas a comprendre, moi je n'ai pas mis de balise <li> ( pas besoin a moin que j'en ai besoin pour le hover que je demande)

Riko

5 août 2006 à 16:46:45

Salut, pour un menu en général on utilise les listes ,voila pourquoi on te parle de la balise <li>

Si tu as qu'une balise <a></a>, tu mets:

#menu {
width:60%;/*taille de ton menu*/
margin: auto;/*centre l'ensemble dans la page*/
text-align: center;/*centre le texte dans le "bouton"*/
}

#menu a {
background-color: #CCFFCC;
padding-left: 15px;/*marge interne qui permet de voir le background*/
padding-right: 15px;/*idem*/
border-right-width: thin; /*bordures*/
border-left-width: thin;/*idem*/
border-right-style: double;
border-left-style: double;
border-right-color: #FF3300;
border-left-color: #FF0033;
margin-left: 10px;/*marge externe qui sépare les "boutons"*/
margin-right: 10px;/*idem*/
}

#menu a:hover {
background-color: #0066FF;
color: #FFFF66;
}

rmuffat

5 août 2006 à 16:47:46

Alors si t'as pas mis de li:

Tu met en bloc ton a:

#lediv a.laclasse
{
display: block;
background-image: url("image");
}

Et dans ton code html:

Voila

Riko

5 août 2006 à 16:57:31

Par contre il vaut mieux utiliser des listes pour tes menus, c'est sémantiquement plus juste (enfin il me semble), si l'envie d'utiliser des listes te prends, ma méthode est encore valable:

* {margin:0;padding:0} /*supprime les marges par défaut de toutes les balises*/

#menu {
width:60%;/*taille de ton menu*/
margin: auto;/*centre l'ensemble dans la page*/
text-align: center;/*centre le texte dans le "bouton"*/
}

#menu li {
display: inline;/*affiche le <li> l'une a coté de l'autre au lieu de les mettre l'une en dessous de l'autre*/
list-style-type: none;/*supprime les puces*/
}

#menu li a {
background-color: #CCFFCC;
padding-left: 15px;/*marge interne qui permet de voir le background*/
padding-right: 15px;/*idem*/
border-right-width: thin; /*bordures*/
border-left-width: thin;/*idem*/
border-right-style: double;
border-left-style: double;
border-right-color: #FF3300;
border-left-color: #FF0033;
margin-left: 10px;/*marge externe qui sépare les "boutons"*/
margin-right: 10px;/*idem*/
}

#menu li a:hover {
background-color: #0066FF;
color: #FFFF66;
}

Themafia93

5 août 2006 à 17:18:59

Ok merci riko de ton aide
j'ai reussi a faire ce que je voulais en modifiant les ligne que tu m'a proposer :

#Acceuil a {
padding-left: 15px;/*marge interne qui permet de voir le background*/
padding-right: 15px;/*idem*/
border-right-color: black;
border-left-color: black;
margin-left: 0px;/*marge externe qui sépare les "boutons"*/
margin-right: 0px;/*idem*/
}

Voila probleme resolu

Probleme a:hover

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.

× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.

Probleme a:hover

Probleme a:hover

Supprimer

Modérer

Signaler le message aux modérateurs