Titre: probleme de dimension...
Posté par: quaresma le le 27-04-2005 a 21:11:21
Code:
salut a tous,
j'ai fait un menu, mais il y a un problème de dimension lorsque un mot du menu est trop long...jugez par vous même:
http://tosweb.free.fr/Nouveau%20dossier2/menuVertical.html
lorsque vous allez sur "Imprimantes">>"Deskjet">>vous pouvez constater que en allant sur tous les liens, le fond bleu n'est pas a la bonne dimension, je voudrai qu'il prenne tout l'espace disponible et ce quel que soit la taille de la cellule.
voici mon CSS:
|
|
/* CSS du menu vertical*/
.menur{
position:relative;
/* solve a Opera7/IE display bug */
width:100px;
width/**/:100px;
margin:0;
padding:0;
}
.menur span{
display:none;
}
.menur li ul{ /*encadre second menu*/
border: 1px dotted #386289;
margin:0;
padding:0;
position:absolute; /* important */
width:100px;
width/**/:100px;
margin-left:100px; /* be careful */
margin-top:-18px;
}
.menur li ul{
visibility:hidden;
}
.menur li ul ul{ /*encadre troisieme menu*/
border: 1px dotted #386289;
margin-left: 100px;
padding:0;
position:absolute; /* important */
width:100px;
width/**/:100px;
}
.menur li ul ul{
visibility:hidden;
}
.menur a{ /*tout premier menu*/
display:block;
width:100px;
margin:0;
padding:1px 0 1px 20px; /* em units can creat little graphic bug in mozilla */
font-family: Arial;
font-size: 8pt;
color: #386289;
font-weight: bold;
text-decoration: none;
}
.menur a:hover{
text-decoration: underline;
}
/* for a mozilla better display with key nav */
.menur a:focus{
background-color: white;
}
.menur span{
/* hide some accessibility stuff */
display:none;
}
.menur li{ /*contenu premier menu*/
width:100px;
display:block;
float:left;
margin: 0;
padding:0;
background-image: url(fleche2.gif);
background-repeat: no-repeat;
background-position: 2% 65%;
background-color: white;
}
.menur li:hover{
}
.menur li li{ /*contenu second et troisième menu*/
width:100px;
width/**/:100%;
display:block;
float:left;
list-style: none;
background: white;
}
.menur li li a:hover {
background: #DBE4F1;
background-image: url(fleche3.gif);
background-repeat: no-repeat;
background-position: 5% 65%;
}
/* IE PC selector */
* html .menur li {
display:inline; /* solve a IE PC list bug */
float:none; /* solve a IE5 clav nav bug */
}
Code:
<html>
<head>
<title>Menu déroulant vertical à plusieurs niveaux en DHTML</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
<meta name="Robots" content="follow" />
<meta name="MSSmartTagsPreventParsing" content="TRUE" />
<!-- script du menu -->
<script type="text/javascript" src="dynMenu.js"></script>
<!-- détéction du navigateur -->
<script type="text/javascript" src="browserdetect.js"></script>
<!-- important pour que les vieux navigateurs ne comprennent pas le CSS -->
<style type="text/css">
@import "menuv.css";
@import "base.css";
</style>
</head><body>
<!-- liste imbriquée de liens qui fera office de menu -->
<ul id="menur">
<li><a href="#menu1">Ecrans</a>
<ul>
<li><a href="#">LCD</a><ul>
<li><a href="#">17 pouces</a></li>
<li><a href="#">19 pouces</a></li>
<li><a href="#">20 pouces</a></li>
</ul>
</li>
<li><a href="#">CRT</a>
<ul>
<li><a href="#">17 pouces</a></li>
<li><a href="#">19 pouces</a></li>
<li><a href="#">20 pouces</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#menu1">Imprimantes</a>
<ul>
<li><a href="#">Laser</a><ul>
<li><a href="#">Sony</a></li>
<li><a href="#">Toshiba</a></li>
<li><a href="#">IIYama</a></li>
</ul>
</li>
<li><a href="#">Deskjet</a>
<ul>
<li><a href="#">HP</a></li>
<li><a href="#">Canon</a></li>
<li><a href="#">philipssssssssssssssssssssssssss</a></li>
<li><a href="#">HP</a></li>
<li><a href="#">Canon</a></li>
<li><a href="#">philips</a></li>
<li><a href="#">HP</a></li>
<li><a href="#">Canon</a></li>
<li><a href="#">philips</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<script type="text/javascript">
initMenu();
</script>
</body></html>
Code:
MERCI BCP POUR VOTRE AIDE!
ps: si vous voyez d'autres problèmes n'hesitez pas en m'en faire part |
|
|
Titre: Re:probleme de dimension...
Posté par: dhjapan le le 28-04-2005 a 14:19:45
Rajoute :
width: auto;
à ton style : .menur li li a:hover {}
:) |
Forum-webmaster | Actionné par YaBB SE
© 2001-2003, YaBB SE Dev Team. Tous droits réservés.
|