Sujet Précédent Sujet Suivant

[CSS] problème avec hover

Résolu/Fermé
mony84 Messages postés 68 Date d'inscription mercredi 19 juillet 2006 Statut Membre Dernière intervention 5 octobre 2010 - 31 juil. 2007 à 07:36
mony84 Messages postés 68 Date d'inscription mercredi 19 juillet 2006 Statut Membre Dernière intervention 5 octobre 2010 - 6 août 2007 à 11:12
salut,
j'ai un problème avec hover lors du sorvol d'un menu et le sous menu.
Le code html est le suivant (inspiré de celui d'alsacreations) 



<ul>

<div id="menu" >


	<dl>
		<dt onmouseover="javascript:montre();"><a href="" title="titre" style="border-left:0px;"><font color="#FFFFFF">titre</font></a></dt>

	</dl>

	
	
	
	
	
	<dl >			
		<dt onmouseover="javascript:montre('smenu1');" ><a href="#">menu1</a></dt>
			<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
				<ul  >
					<li ><a href="" >sous menu 1</a></li>

					<li ><a href="">sous menu  2</a></li>
					
					<li ><a href=""> sous menu 3</a></li>
					
					<li ><a href="">sous menu 4</a></li>

					
				</ul>

			</dd>
	</dl>
	
	
	
	
	
	
</div>
</ul>



et voila le code css correspondant: 


body {
margin: 0;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif;
}


dl, dt, dd, ul, li{
margin: 0;
padding: 0;
list-style-type: none;
}


#menu {
position: absolute; 
top: 0;
left: 0;
z-index:100;
width: 100%; 
}


#menu li  {
display: inline;
padding-left:10px;
padding-right:10px;
}

#menu dl {
float: left;
width: 10em;
}




#menu dt {
text-align: center;
font-weight: bold;
background: #000000;
border-left: 3px solid #B22222;
height: 30px;
line-height: 30px;
}



#menu li {
text-align: center;
background: #000000;
border-right:1px solid #FFFFFF;

}



#menu li a, #menu dt a {
color: #FFFFFF;
text-decoration: none;
height: 100%;
border: 0 none;
}






#smenu1 {
position: absolute;
left: 0;
top:35px;
font-size: 12px;
border-top: 1px solid gray;
width: 700px;
padding:8px;
background:#000000;
}








#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
background: #FFFFFF;
}


lorsque le curseur pointe par exemple sur 'titre' ou sur 'sous menu 1', j'ai une partie colorée en blanc et une partie colorée en noir.
J'ai enlevé les paddings mais ça ne change rien. Help !! please
A voir également:

6 réponses

Réponse 1 / 6
jcbetin Messages postés 339 Date d'inscription lundi 9 juillet 2007 Statut Membre Dernière intervention 9 août 2011 75
31 juil. 2007 à 11:53
re!

Bon j'ai tout changé et ça marche! lol
Le truc, c'est que la structure n'a plus rien à voir avec l'ancienne, en fait j'utilise des images (1.gif et 2.gif qui sont des rectangles de 100px*30px avec 1.gif tout blanc et 2.gif tout noir)
je te post mes codes html et css, fais attention, j'ai utilisé une feuille de style détachée.
je te laisse modifier les styles comme avant...

HTML:

<!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>
<link rel="stylesheet" type="text/css" href="css2.css" />


<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}


//-->
</script>
</head>
<body>


<div id="menu" >
<p class="bouton">
<span onmouseover="javascript:montre();"><a href="" class="bouton">Titre</a></span>
<span onmouseover="javascript:montre('smenu1');" ><a href="" class="bouton">Menu</a></span>
</p>
</div>
<div id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
<p class="bouton">
<a href="" class="bouton">sous menu 1</a>
<a href="" class="bouton">sous menu 2</a>
<a href="" class="bouton"> sous menu 3</a>
<a href="" class="bouton">sous menu 4</a></p>

</div>


</body>
</html>

CSS:body {
margin: 0;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif;
}


#menu {
position: absolute;
width: 700px;
height: 30px;
top: 0;
left: 0;
z-index:100;
background: #fff;
}


.bouton:link{
float: left;
width: 100px;
height: 30px;
background-image:url(2.gif);
text-align: center;
color: #fff;
text-decoration:none;
font-weight: bold;
padding: 5px 5px 0px 5px;
border-right: 2px solid #B22222;
}

.bouton:visited{
float: left;
width: 100px;
height: 30px;
background-image:url(2.gif);
text-align: center;
color: #fff;
top: 50%;
text-decoration:none;
font-weight: bold;
padding: 5px 5px 0px 5px;
border-right: 2px #B22222;
}


.bouton:hover{
color: #000;
background-image:url(1.gif);
}



#smenu1 {
position: absolute;
left: 0;
top:40px;
font-size: 12px;
width: 700px;
height: 30px;
}

1
Réponse 2 / 6
jcbetin Messages postés 339 Date d'inscription lundi 9 juillet 2007 Statut Membre Dernière intervention 9 août 2011 75
31 juil. 2007 à 09:32
slt!!

Juste pour information: tu n'as posté qu'une partie du code html? ou tu as oublié de faire le début?
Sinon, donne moi le lien de ton inspiration chez alsa pour que je vois mieux ce que ça doit donner en réel...
Bon courage!
0
mony84 Messages postés 68 Date d'inscription mercredi 19 juillet 2006 Statut Membre Dernière intervention 5 octobre 2010 11
31 juil. 2007 à 09:52
salut jcbetin,
je n'ai posté que la partie relative à mon menu. le scriptjava marche très bien, le problème provient de la définition de style. Si tu veux, voila la 1ère partie de mon code html 
<!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=iso-8859-1" />
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}


//-->
</script>
</head>
<body>


<style type="text/css" >
<!-- 
.
.     // le css posté ds mon 1er message          
.
.
.
-->
</style>



et puis le menu

</body>
</html>


l'exemple que j'ai initialement pris est le suivant : http://css.alsacreations.com/xmedia/exemples/deroulant/cssmenu3.htm


(moi aussi je suis en stage mais j'ai encore 6 mois pour dire adieu au bon temps où les vacances exsitaient encore ;-) )
0
Réponse 3 / 6
jcbetin Messages postés 339 Date d'inscription lundi 9 juillet 2007 Statut Membre Dernière intervention 9 août 2011 75
31 juil. 2007 à 10:01
Essaye de mettre ta partie <style>...</style> entre <head>...</head> car normalement la balise <style> doit être placée à cet endroit et ici elle est placée dans le body.
je regarde ton lien vers alsa! tiens moi o courant
0
Réponse 4 / 6
mony84 Messages postés 68 Date d'inscription mercredi 19 juillet 2006 Statut Membre Dernière intervention 5 octobre 2010 11
31 juil. 2007 à 10:07
même chose, rien n'a changé lorsque j'ai déplacé l'emplacement de la partie<style>...</style>.
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 6
jcbetin Messages postés 339 Date d'inscription lundi 9 juillet 2007 Statut Membre Dernière intervention 9 août 2011 75
31 juil. 2007 à 10:15
re!

j'ai vu ce qui t'arrive, le problème c'est que ton hover ce fais sur le texte du lien donc il change uniquement sur cette zone alors que toi tu veux qu'il change sur toute la partie...
J'vais voir ce que je peux faire!
0
Réponse 6 / 6
mony84 Messages postés 68 Date d'inscription mercredi 19 juillet 2006 Statut Membre Dernière intervention 5 octobre 2010 11
6 août 2007 à 11:12
merci pour la solution
0

Discussions similaires

trait horizontal avec du css
tipi75 -
tipi75 -

8 réponses
Enlever le soulignement sous les liens en HTML/CSS
baissaoui -
baissaoui -

0 réponse
HTML - définir taille bouton
Diva -
Utilisateur anonyme -

14 réponses
[CSS] Forcé retour à la ligne
aKuma59 -
zigoss -

33 réponses
indice et exposant en css ?
yiv -
Kitkatryne -

19 réponses