[CSS] problème avec hover
Résolu
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 -
mony84 Messages postés 68 Date d'inscription mercredi 19 juillet 2006 Statut Membre Dernière intervention 5 octobre 2010 -
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)
et voila le code css correspondant:
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
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:
- [CSS] problème avec hover
- Css download - Télécharger - HTML
- Enlever le soulignement d'un lien css ✓ - Forum Réseaux sociaux
- Css ligne horizontale ✓ - Forum CSS
- Enlever le soulignage des lien. - Forum CSS
- Enlever soulignement lien css ✓ - Forum CSS
6 réponses
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
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;
}
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;
}
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
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!
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!
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
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
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 ;-) )
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 ;-) )
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
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
je regarde ton lien vers alsa! tiens moi o courant
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
31 juil. 2007 à 10:07
même chose, rien n'a changé lorsque j'ai déplacé l'emplacement de la partie<style>...</style>.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
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
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!
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!
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
6 août 2007 à 11:12
merci pour la solution
