28172 sujets

CSS et mise en forme, CSS3

Probleme avec un menu à un niveau

Bonjour,
j'ai crée un menu à & niveau pour mon site, je vous le joins.



   <ul id="menu">

        <li >
                <a>home</a>
				<ul>
                        <li><a href="">L'Art de la cuisine</a></li>
                        <li><a href="">Les instruments</a></li>
	           <li><a href="">L'Art du bien-manger</a></li>
                </ul>
        </li>
        
        <li>
                <a href="">Ligne de cuisine</a>
                
        </li>
        
        <li>
                <a>Recette</a>
                <ul>
                        <li><a href="">Nos habitudes</a></li>
                        <li><a href="">Ingrédients</a></li>
	           <li><a href="">Labels</a></li>
                </ul>
        </li>
        
        <li>
                <a href="">Points de table</a>
                
        </li>
        
        <li>
                <a>Guide cuisine</a>
                <ul>
                        <li><a href="">La presse</a></li>
	            <li><a href="">recette-cuisine</a></li>
                        <li><a href="">Liens</a></li>
                        
                </ul>
        </li>
		<li>
		        <a>Nouvelles</a> 
                <ul>
                        <li><a href="">Inscription</a></li>
                </ul> 						
		</li>		
        
</ul>






#menu 
{
float: left;;
margin-top: 150px;
margin-left: 430px;
font-weight : bold; 
font-family : Arial;
font-size : 12px; 
}


#menu a 
{
        display : block;
        padding : 0; 
        background : #bdae82;        
        color : #fff; 
        text-decoration : none; 
        width : 125px;
        height: 25px;
}


#menu li     
{ 
        float : left; 
        border-right : 1px solid #fff; /* je mets une bordure blanche à droite de chaque élément */
}


/* IE ne reconnaissant pas le sélecteur ">" */
html>body #menu li
{
        border-right: 1px solid transparent ; /* on met une bordure transparente à droite de chaque élément */
}


#menu li ul 
{ 
        position: absolute; 
        width: 144px; 
        left: -999em; 
}



#menu li ul li 
{
        
        border-top : 1px solid #fff;/* je mets une bordure blanche en haut de chaque élément d'une sous liste */
}


/* IE ne reconnaissant pas le sélecteur ">" */
html>body #menu li ul li                
{
        border-top : 1px solid transparent; /* on met une bordure transparente en haut de chaque élément */
}


#menu a:hover    
{
        color: #f9e5fc; 
        background: #000000;
}

#menu li:hover ul ul, #menu li.sfhover ul ul
{
        left: -999em; 
}

#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul  
{
        left: auto; 
        min-height: 0; /* Corrige un bug sous IE */
}


Avec le code javascript pour IE:


<!--[if lte IE 6]>
<!--sfHover = function() {
        var sfEls = document.getElementById("menu").getElementsByTagName("LI");
        for (var i=0; i<sfEls.length; i++) {
                sfEls[i].onmouseover=function() {
                        this.className+=" sfhover";
                }
                sfEls[i].onmouseout=function() {
                        this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
                }
        }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);-->
<![endif]-->



Je pense que mon menu est correct,mais je n'arrive pas à régler un souci, lorsque je zoom ma page, le menu se déforme completement, il devient vertical et je ne peux plus acceder aux sous-menus;
Comment puis-je résoudre ce probleme, merci.[/i][/i]
Modifié par felita (22 Aug 2011 - 11:17)
Bonjour et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien "Aide" qui apparaît tout en haut du forum est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.


Serait-il également possible de modifier le titre du message et d'utiliser les majuscules à bon escient.


Bonne continuation Smiley smile

upload/1-code.gif
Bonjour,

Tes liens (#menu a) sont fixés en largeur (width:125px;), ils ne peuvent donc aller au delà de cette limite quand surviens le zoom. Il en est de même avec la hauteur.
Il est plus convenable d'appliquer des padding afin d'espacer le texte de son conteneur, sans pour autant le contraindre à une taille définie.

#menu a {
    background: none repeat scroll 0 0 #BDAE82;
    color: #FFFFFF;
    display: block;
    /* height: 25px; */
    [#darkred]padding: 5px 11px;[/#]
    text-decoration: none;
    /* width: 125px; */
}


EDIT : Je n'étais pas très bien éveillé hier soir. Si tu as appliqué une largeur, c'est, je suppose, que tu désirais appliquer une même taille à chaque élément de ton menu. En ce cas, il intéressant d'employer une largeur minimale, en supplément : 

#menu a {
    background: none repeat scroll 0 0 #BDAE82;
    color: #FFFFFF;
    display: block;
    [#darkred]padding: 5px 11px;[/#]
    [#darkred][b]min-width: 125px;[/b][/#]
    text-decoration: none;
}


Min-width ne fonctionne pas sur IE6, s'il y a malgré tout besoin d'une compatibilité pour ce navigateur obsolète : Appliquer un "width" uniquement pour lui, via les commentaires conditionnels.
Modifié par Nigel (23 Aug 2011 - 20:58)
Bonsoir nigel,
merci pour ta réponse, j'ai le meme souci aussi avec mes autres blocks, je vais montrer mon code pour qu'on m'aide à voir d'ou vient le probleme.

Mon header a aussi ce probleme la quand je zoom
Sujet clos
Aller à