Salut,
J'ai différents petits problèmes concernant un menu que je refais actuellement. Au lieu d'ouvrir plusieurs fil j'ai préféré réunir mes questions en un seul et traiter le menu dans la globalité.
Mon menu pourra peut-être servir à quelqu'un plus tard.
Je pense que mes questions ne vous paraîtrons claires qu'après avoir lu le code et vu le menu. Je vous expose mes problèmes mais reste ouvert à toute optimisation, conformisation, clarification, etc. du code
Maintenant les différents problèmes :
1) Depuis que j'ai refait le menu j'ai des problèmes de placement de mes listes. Elles ne se calent pas précisément au bon endroit. De plus, cela dépend de la taille de la police, on remarque bien la différence quand on joue avec la roulette de la souris (et le comportement est différent sous IE & FF). Quand j'étais atteint de classite aiguë (bon bouquin soit dit en passant) je n'avais jamais eu ce problème.
Je ne pense donc pas que ce soit inévitable, alors par quel moyen peut-on palier ce problème?
2) Vous allez voir dans le menu, il y a des séparateurs (<hr />) placés dans mes listes. Ce qui n'est pas valide. Savez-vous comment puis-je afficher une séparation dans une liste? Une séparation qui ne ferait pas toute la ligne.
3) J'ai un sous-menu avec des listes imbriquées. Or le comprtement de IE & FF diffèrent sur la taille du texte :
- si je ne spécifie pas de taille dans ma liste imbriquée, le texte du sous-menu est plus petit que celui du menu. Or je souhaite qu'il garde la même taille que le menu.
- si je spécifie la même taille dans le sous-menu que dans le menu, FF l'interprête comme je le souhaite mais IE agrandi le texte.
Comment puis-je faire un sous-menu avec une taille de texte identique au menu?
4) La hauteur des listes sous IE ne veut pas diminuer. Avec des marges internes et externes pourtant définies à 0. Je crois savoir que le problème est connu et le seul moyen que j'ai trouvé est un hack. Mais je n'ai pas envie de faire d'exception.
Savez-vous comment régler ce problème?
Merci par avance pour votre lecteur et votre aide éventuelle.
Modifié par bbp (28 Oct 2005 - 18:48)
J'ai différents petits problèmes concernant un menu que je refais actuellement. Au lieu d'ouvrir plusieurs fil j'ai préféré réunir mes questions en un seul et traiter le menu dans la globalité.
Mon menu pourra peut-être servir à quelqu'un plus tard.
Je pense que mes questions ne vous paraîtrons claires qu'après avoir lu le code et vu le menu. Je vous expose mes problèmes mais reste ouvert à toute optimisation, conformisation, clarification, etc. du code
Maintenant les différents problèmes :
1) Depuis que j'ai refait le menu j'ai des problèmes de placement de mes listes. Elles ne se calent pas précisément au bon endroit. De plus, cela dépend de la taille de la police, on remarque bien la différence quand on joue avec la roulette de la souris (et le comportement est différent sous IE & FF). Quand j'étais atteint de classite aiguë (bon bouquin soit dit en passant) je n'avais jamais eu ce problème.
Je ne pense donc pas que ce soit inévitable, alors par quel moyen peut-on palier ce problème?
2) Vous allez voir dans le menu, il y a des séparateurs (<hr />) placés dans mes listes. Ce qui n'est pas valide. Savez-vous comment puis-je afficher une séparation dans une liste? Une séparation qui ne ferait pas toute la ligne.
3) J'ai un sous-menu avec des listes imbriquées. Or le comprtement de IE & FF diffèrent sur la taille du texte :
- si je ne spécifie pas de taille dans ma liste imbriquée, le texte du sous-menu est plus petit que celui du menu. Or je souhaite qu'il garde la même taille que le menu.
- si je spécifie la même taille dans le sous-menu que dans le menu, FF l'interprête comme je le souhaite mais IE agrandi le texte.
Comment puis-je faire un sous-menu avec une taille de texte identique au menu?
4) La hauteur des listes sous IE ne veut pas diminuer. Avec des marges internes et externes pourtant définies à 0. Je crois savoir que le problème est connu et le seul moyen que j'ai trouvé est un hack. Mais je n'ai pas envie de faire d'exception.
Savez-vous comment régler ce problème?
Merci par avance pour votre lecteur et votre aide éventuelle.
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="menu">
<h3 id="Titre1" onclick="switchMenu('Menu1');">Menu 1</h3>
<ul id="Menu1">
<li><a href="#">Lien 10</a></li>
<li><a href="#">Lien 11</a></li>
<li><a href="#">Lien 12</a></li>
<li><a href="#">Lien 13</a></li>
</ul>
<h3 id="Titre2" onclick="switchMenu('Menu2');">Menu 2</h3>
<ul id="Menu2">
<li><a href="#">Lien 20</a></li>
<li><a href="#">Lien 21</a></li>
<li class="sousMenu"><a href="#" onclick="switchMenu('SousMenu1');">Lien 22</a>
<ul id="SousMenu1" class="hiddenMenu">
<li><a href="#">Lien 220</a></li>
<li><a href="#">Lien 221</a></li>
<li><a href="#">Lien 222</a></li>
</ul>
</li>
</ul>
<h3 id="Titre3" onclick="switchMenu('Menu3');">Menu 3</h3>
<ul id="Menu3">
<li><a href="#">Lien 30</a></li>
<li><a href="#">Lien 31</a></li>
<hr class="separateur" />
<li><a href="#">Lien 32</a></li>
<li><a href="#">Lien 33</a></li>
<li><a href="#">Lien 34</a></li>
<li><a href="#">Lien 35</a></li>
<hr class="separateur" />
<li><a href="#">Lien 36</a></li>
</ul>
<a id="deconnexion" href="#">Lien 4</a>
</div>
</body>
</html>body {
margin: 0em;
padding: 0em;
background-color: white;
color: black;
font-family: Georgia, "Bitstream Vera Serif", serif;
}
/*************************************/
/************* MENUS **************/
/*************************************/
/************** GENERAL ***********/
#menu {
margin: 0em;
padding: 0em;
width: 10.6em;
font-family: Verdana, "Bitstream Vera Sans", Helvetica, Arial, sans-serif;
}
#menu ul {
padding: 0em;
margin: 0em 0em 0em 0.5em;
background-color: #D8E2EF;
border: 1px solid #82A1CD;
/*-moz-border-radius: 1em 1em;*/
}
#menu li {
margin: 0em;
padding: 0em;
background-color: #D8E2EF;
font-size: 0.75em;
list-style: none;
/*-moz-border-radius: 1em 1em;*/
border-bottom: 0.1em solid #D8E2EF; /* Hack pour la hauteur des li dans IE */
}
/** Note : le sélecteur #menu li > a ne fonctionne pas sous IE **/
#menu ul li a {
display: block;
padding: 0.1em 0em 0.2em 0.4em;
color: #2E62AA;
text-decoration: none;
}
#menu ul li a:visited {
color:#2E62AA;
}
#menu ul li a:hover {
background-color: #82A1CD;
color: white;
}
.hiddenMenu {
display: none;
}
.separateur {
border: 1px solid #82a1cd;
width: 120px;
}
/************** GENERAL ***********/
/************* RUBRIQUE ***********/
#menu h3 {
margin: 0.5em 0em 0em 0.5em;
padding: 0.2em;
background-color: #82A1CD;
color: white;
text-align: center;
font-size: 0.9em;
font-style: italic;
cursor: pointer;
border-width: 0px;
-moz-border-radius: 1em 1em 0em 0em;
}
/************* RUBRIQUE ***********/
/********* SOUS-RUBRIQUE ********/
#menu ul * ul {
margin: 0em;
border-width: 0px;
}
#menu li * li {
padding: 0em;
/*font-size: 1em;*/ /* Taille du texte du sous-menu difficile à manipuler */
background-color: #EDF1F7;
border-bottom: 0.1em solid #EDF1F7; /* Hack pour la hauteur des li dans IE */
}
#menu li.sousMenu {
background-color: #EDF1F7;
}
/********* SOUS-RUBRIQUE ********/
/********* DECONNEXION *********/
#deconnexion {
display: block;
margin: 0.5em 0em 0em 0.5em;
padding: 0em;
background-color: #D8E2EF;
border: 1px solid #82A1CD;
text-align: center;
font-weight: bold;
text-decoration: none;
color: #2E62AA;
-moz-border-radius: 1em 1em;
}
#deconnexion:visited {
color:#2e62aa;
}
#deconnexion:hover {
background-color: #82a1cd;
color: white;
}
/********* DECONNEXION **********/
/*************************************/
/************* MENUS **************/
/*************************************/Modifié par bbp (28 Oct 2005 - 18:48)
(même si ce n'est pas directement lié à mes problèmes)