Bonjour!
Mon code est basé sur un menu de koala64 montré ici
Et j'ai des soucis à l'adapter horizontalement.
J'ai bien sur rajouter la l'option float:left mais j'ai de grosses différences d'affichage entre IE et firefox.
La plus grave est le décalage des <li> de premier niveau sous IE. Elle se pousse malgré des propriétés de positionnement.
Sous firefox le probleme apparait sur les border qui s'arretent à la taille de la <li> de 1er niveau.
Mon but est de réaliser un menu horizontal avec des sous-menu plus large que les menu, sans décalage de ces derniers.
Un 2eme objectif était d'implementer des balises de titre au niveau des menus de niveau 1 mais pas moyen de leur définir des propriétés. A l'affichage les titres de menu apparaissent "null". comprends pas
(#menus h2 {} par ex.)
Plzzz help! C'est pas faute d'avoir batailler!
Mon code :
HTML
CSS
Mon code est basé sur un menu de koala64 montré ici
Et j'ai des soucis à l'adapter horizontalement.
J'ai bien sur rajouter la l'option float:left mais j'ai de grosses différences d'affichage entre IE et firefox.
La plus grave est le décalage des <li> de premier niveau sous IE. Elle se pousse malgré des propriétés de positionnement.
Sous firefox le probleme apparait sur les border qui s'arretent à la taille de la <li> de 1er niveau.
Mon but est de réaliser un menu horizontal avec des sous-menu plus large que les menu, sans décalage de ces derniers.
Un 2eme objectif était d'implementer des balises de titre au niveau des menus de niveau 1 mais pas moyen de leur définir des propriétés. A l'affichage les titres de menu apparaissent "null". comprends pas
(#menus h2 {} par ex.)
Plzzz help! C'est pas faute d'avoir batailler!
Mon code :
HTML
a écrit :
<body>
<div id="page">
<ul id="menus">
<li>
menu1
<ul>
<li><a href="#">lien1</a></li>
<li><a href="#">lien2</a></li>
<li><a href="#">lien3</a></li>
<li><a href="#">lien4</a></li>
</ul>
</li>
<li>menu2
<ul>
<li><a href="#">lien1</a></li>
<li><a href="#">lien2</a></li>
<li><a href="#">lien3</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
CSS
a écrit :
#page
{
position: relative;
width: 750px;
padding: 0;
margin: 0;
}
#menus
{ position:absolute;
float:left;
padding: 0;
margin: 0;
}
#menus *
{
float:left;
padding: 0;
margin: 0;
list-style-type: none;
}
#menus li
{
display: list-item;
width: 100px;
position:relative;
border: 1px solid #000;
margin: 1px;
font-size: 100%;
text-indent: 5px;
background: #CCC;
}
#menus li ul
{
border-top: 1px solid #000;
}
#menus li ul li
{
border-top: 1px solid #000;
clear: both;
width: 160px;
border: 0;
margin: 0;
text-align: center;
}
#menus li a
{
text-decoration: none;
color:#FFFFFF;
background-color: #CCC;
display: block;
cursor: pointer;
}
#menus li ul a
{
display:block;
height: 1.6em;
text-indent: 5px;
cursor: pointer;
}
#menus li ul a:hover
{
background-color: #333333;
}
/* Classes nécessaires au code Javascript */
.Cache
{
display: none;
}
.Montre
{
display: list-item;
}