rss
Ils ont besoin de votre aide Tous les messages sans réponse
Rechercher : dans
Par : Pertinence Date Nom d'utilisateur
Statut : Résolu

[CSS] problème avec hover

Posté par mony84, le mardi 31 juillet 2007 à 07:36:25
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
Configuration: Windows XP
Firefox 2.0.0.5
Répondre à mony84  Signaler ce message aux modérateurs Aller au dernier message

1


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
jcbetin, le mardi 31 juillet 2007 à 09:32:11
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!
Etudiant en stage... Adieu le bon temps où les vacances exis­taient encore...
   
Répondre à jcbetin

2


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
mony84, le mardi 31 juillet 2007 à 09:52:16
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.dt­d">
<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/cssme­nu3.htm


(moi aussi je suis en stage mais j'ai encore 6 mois pour dire adieu au bon temps où les vacances exsitaient encore ;-) )
   
Répondre à mony84

3


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
jcbetin, le mardi 31 juillet 2007 à 10:01:06
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
Etudiant en stage... Adieu le bon temps où les vacances exis­taient encore...
   
Répondre à jcbetin

4


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
mony84, le mardi 31 juillet 2007 à 10:07:58
même chose, rien n'a changé lorsque j'ai déplacé l'emplacement de la partie<style>...</style>.
   
Répondre à mony84

5


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
jcbetin, le mardi 31 juillet 2007 à 10:15:34
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!
Etudiant en stage... Adieu le bon temps où les vacances exis­taient encore...
   
Répondre à jcbetin

6


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
jcbetin, le mardi 31 juillet 2007 à 11:53:10
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.dt­d">
<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;
}

Etudiant en stage... Adieu le bon temps où les vacances exis­taient encore...
   
Répondre à jcbetin

7


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
 mony84, le lundi 6 août 2007 à 11:12:16
merci pour la solution
   
Répondre à mony84
Posez votre question Répondre
Logiciels pertinents trouvés dans les téléchargements
Télécharger HoverSnap 0.8HoverSnap - HoverSnap est tout simplement un programme de capture d'écran. Il est très intuitif et supporte les formats jpg, bmp, png,...Catégorie: Capture
Licence: Freeware/gratuit
Télécharger Web Developer Toolbar 1.1.6Web Developer Toolbar - WebDeveloper est une extension firefox représentant une formidable boîte à outils pour examiner et manipuler les pages...Catégorie: Extensions Firefox
Licence: Freeware/gratuit
Télécharger Amaya 9.54Amaya - Amaya est un éditeur Web, développé conjointement par l'INRIA et le W3C, pour éditer et publier très simplement des pages...Catégorie: Editeurs HTML
Licence: Open Source
Télécharger Firstpage 2006Firstpage - First Page 2006 est un éditeur html gratuit et excellent. Il permet de travailler un code HTML en couleur, ainsi que de...Catégorie: Editeurs HTML
Licence: Freeware/gratuit
Plus de logiciels gratuits sur « [CSS] problème avec hover »