28172 sujets

CSS et mise en forme, CSS3

Problème background-color sur menu

Bonjour,

Je viens vers vous parce que j'ai un problème: En faite, j'aimerai mettre un background-color sur mon menu, (sur le hover) mais lorsque je le fait je vois uniquement la couleur de fond sur le texte or ce n'est pas ce que je veux.
C'est difficile d'expliquer ce que veux donc, je met le lien pour que vous voyez le résultat. (le couleur de fond quand on survole n'apparaît que sur le texte, mais je ne veux pas uniquement sur le texte) - (J'ai un menu déroulant mais le problème n'est pas le sous-menu)
http://www.cine-seriestv.tk
Voici mon code html:
<nav>
<ul id="menu">
    <li><a href="index.html">Accueil</a></li>
    <li> <a href="cinema.html">Cinéma</a>
        <ul>
            <li><a href="news-cinema.html">Actualités</a></li>
			<li><a href="box-office.html">Box-Office</a></li>
            <li><a href="videos-cinema.html">Vidéos</a></li>
        </ul>
    </li>
    <li><a href="tv.html">TV</a>
	    <ul>
		    <li><a href="#">Séries</a>
			    <ul>
				    <li><a href="news-series.html">Actualités</a></li>
					<li><a href="videos-series.html">Vidéos</a></li>
				</ul>
			</li>
	        <li><a href="audiences-tv.html">Audiences</a></li>
			<li><a href="festivals.html">Festivals</a></li>
	    </ul>
	</li>
        <li><a href="programmes.html">Programmes </a></li>
        <li><a href="contact.html">Contact</a></li>
</ul>
</nav>


et mon code menu css:
/* Element menu principal */
#menu{
    width: 970px;
    margin: 0px;
	margin-top: 10px;
	margin-left: -10px;
	padding: 10px 0 0 0;
    list-style: none;
	background: #111;
	background: -moz-linear-gradient(#444, #111);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
    background: -webkit-linear-gradient(#444, #111);
    background: -o-linear-gradient(#444, #111);
    background: -ms-linear-gradient(#444, #111);
    background: linear-gradient(#444, #111);
    -moz-box-shadow: 0 2px 1px #9c9c9c;
    -webkit-box-shadow: 0 2px 1px #9c9c9c;
    box-shadow: 0 2px 1px #9c9c9c;
}

#menu li{
        float: left;
        padding: 0 0 10px 0;
        position: relative;
}

#menu a{
        float: left;
        height: 25px;
        padding: 0 25px;
        color: #999;
        text-transform: uppercase;
        font: bold 15px/25px Arial, Helvetica;
        text-decoration: none;
        text-shadow: 0 1px 0 #000;
}

#menu li:hover > a{
        color: #fafafa;
}

*html #menu li a:hover{ /* IE6 */
        color: #fafafa;
}

#menu li:hover > ul{
        display: block;
}

[b]#menu li a:hover{
        background: #0186ba;
        background: -moz-linear-gradient(#04acec,  #0186ba);
        background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
        background: -webkit-linear-gradient(#04acec,  #0186ba);
        background: -o-linear-gradient(#04acec,  #0186ba);
        background: -ms-linear-gradient(#04acec,  #0186ba);
        background: linear-gradient(#04acec,  #0186ba);
}[/b]

/* Sous-menu */

#menu ul{
    list-style: none;
    margin: 0;
    padding: 0;
    display: none;
    position: absolute;
    top: 35px;
    left: 0;
    z-index: 99999;
    background: #444;
    background: -moz-linear-gradient(#444, #111);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
    background: -webkit-linear-gradient(#444, #111);
    background: -o-linear-gradient(#444, #111);
    background: -ms-linear-gradient(#444, #111);
    background: linear-gradient(#444, #111);
    -moz-border-radius: 5px;
    border-radius: 5px;
}

#menu ul li{
    float: none;
    margin: 0;
    padding: 0;
    display: block;
    -moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    -webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}

#menu ul li:last-child{
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

#menu ul a { 
display: block; 
float: none; 
height: auto; 
line-height: 1; 
padding: 10px 30px; 
text-transform: none; 
white-space: nowrap; 
font-size: 13px;
} 

*html #menu ul a{ /* IE6 */
        height: 10px;
        width: 150px;
}

*:first-child+html #menu ul a{ /* IE7 */
        height: 10px;
        width: 150px;
}

#menu ul a:hover{
        background: #0186ba;
        background: -moz-linear-gradient(#04acec,  #0186ba);
        background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
        background: -webkit-linear-gradient(#04acec,  #0186ba);
        background: -o-linear-gradient(#04acec,  #0186ba);
        background: -ms-linear-gradient(#04acec,  #0186ba);
        background: linear-gradient(#04acec,  #0186ba);
}

#menu ul li:first-child a{
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
}

#menu ul li:first-child a:after{
    content: '';
    position: absolute;
    left: 30px;
    top: -8px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid #444;
}

#menu ul li:first-child a:hover:after{
    border-bottom-color: #04acec;
}

#menu ul li:last-child a{
    -moz-border-radius: 0 0 5px 5px;
    -webkit-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
}

/* Rétablissement du flottement */
#menu:after{
        visibility: hidden;
        display: block;
        font-size: 0;
        content: " ";
        clear: both;
        height: 0;
}

* html #menu             { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */

#menu ul li:first-child a:after{
    content: '';
    position: absolute;
    left: 30px;
    top: -8px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid #444;
}

#menu ul li:first-child a:hover:after{
    border-bottom-color: #04acec;
}
#menu li ul li:hover ul li a:before , #menu li ul li:hover ul li a:after { 
visibility: hidden; 
} 
#menu li ul li:hover ul { 
height: auto; 
margin: -35px 0 0 120px; 
position: absolute; 
padding: 0; 
}


J'ai essayé de rajouter le couleur de fond sur le menu li a:hover (voir en gras).

J'espère que vous comprenez ce que je veux.

Merci d'avance pour votre aide,
Bonjour,

J'ai essayé mais ca ne marche pas. Cette fois l'haut du texte reste sans couleur et le texte et le bas texte, on voit la couleur... le résultat est visible sur le site http://www.cine-seriestv.tk

Merci d'avance pour votre aide...
Modifié par david22 (11 May 2014 - 03:02)
Bonjour,

Je ne suis pas sûr d'avoir compris "la problématique"...
S'il s'agit de recouvrir entièrement le conteneur des liens lors du survol, j’enlèverai le padding-top de ul et le rajouterai au list item :
#menu{
  width: 970px;
  margin: 10px 0 0 -10px;
  padding: 0;
la suite...
}
#menu li{
  float: left;
  padding: 10px 0 10px 0;
la suite...
}

Penser à régler la position top du sous-menu en conséquence.

Si ce n'est pas de cela dont il est question, merci de repréciser votre demande ou de fournir une image de ce que vous voulez obtenir.

Bon courage.
david22 a écrit :
Bonjour,

J'ai essayé mais ca ne marche pas. Cette fois l'haut du texte reste sans couleur et le texte et le bas texte, on voit la couleur... le résultat est visible sur le site http://www.cine-seriestv.tk

Merci d'avance pour votre aide...


cela semble être bon, mais maintenant il faut bien positionner li avec #menu
6l20 a écrit :
Bonjour,

Je ne suis pas sûr d'avoir compris &quot;la problématique&quot;...
S'il s'agit de recouvrir entièrement le conteneur des liens lors du survol, j’enlèverai le padding-top de ul et le rajouterai au list item :
#menu{
  width: 970px;
  margin: 10px 0 0 -10px;
  padding: 0;
la suite...
}
#menu li{
  float: left;
  padding: 10px 0 10px 0;
la suite...
}

Penser à régler la position top du sous-menu en conséquence.

Si ce n'est pas de cela dont il est question, merci de repréciser votre demande ou de fournir une image de ce que vous voulez obtenir.

Bon courage.


Bonjour,

Merci de m'avoir répondu. Je viens d'essayer et c'est exactement ce que je voulais. Merci!

Je vais pouvoir m'avancer...

Et j'en profite pour demander: si je laisse la couleur de fond du menu, noir et je met bleu au survole, (Comme maintenant), est-ce qu'ils vont ensemble et est-ce qu'ils vont avec le contenu?

Merci d'avance,
Sujet clos
Aller à