[CSS] problème avec hover
Résolu
mony84
Messages postés
68
Date d'inscription
Statut
Membre
Dernière intervention
-
mony84 Messages postés 68 Date d'inscription Statut Membre Dernière intervention -
mony84 Messages postés 68 Date d'inscription Statut Membre Dernière intervention -
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
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;
}
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!
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 ;-) )
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
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question