probleme de dimension... - Forum HTML / CSS / XHTML

La Communauté Webmaster

  Forum-webmaster
  Technique - programmation
  HTML / CSS / XHTML (Modérateurs: Shain, Netah, Lilian, lauryv, ToToMaStEr)
  probleme de dimension...

« Précédent Suivant »

Pages: [1]

Auteur

Sujet: probleme de dimension... (Lu 710 fois)

probleme de dimension...
« sur: le 27-04-2005 a 21:11:21 »

quaresma
Membre récent

Hors-Ligne

Messages: 11

Je suis un lama!

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:

et le HTML:
<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 type="text/javascript" src="dynMenu.js"></script>

<script type="text/javascript" src="browserdetect.js"></script>


<style type="text/css">
@import "menuv.css";
@import "base.css";
</style>

</head><body>


<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