28173 sujets

CSS et mise en forme, CSS3

[résolu] Positionnement de menu

Bonjour,
mon problème est le suivant : j'ai un bloc flottant à gauche dans ma page (#fondmenu), dans lequel j'imbrique un menu, à 20px du bord gauche de ce bloc. Sous IE pas de problème, je positionne avec un margin-left. Mais sous Firefox, si je met le margin-left, ça me décale le menu vers la droite, comme si à la base le menu avait déjà une marge de gauche, d'ailleurs impossible de le coller complètement à gauche. (j'ai essayé pour tester, on dirait vraiment qu'il se donne une marge automatiquement?)

Voici le code CSS: (j'ai remplacé les images de fond des blocs par des background-color)

body {
     margin: 0; 
     text-align: center;
     background-color:#ffffff; 
     }

#global {
     border: 4px solid black;
     margin-left: auto;
     margin-right: auto;
     width: 915px;
     height: 630px;
     text-align: left; 
     }
	 
#header {
	background-color: #000;
	width: 915px;
	height:163px;
	border:none;
	}
		
#contenu {
	background-color:#CCCCCC;
	float:left;
	width:757px;
	height:500px;
	}
		
/*menu*/

#fondmenu {
	background-color:#CC0000;
	width:158px;
	height:279px;
	float:left;
	}

ul {list-style-type: none; margin-top:50px; margin-left:20px;} 

li {margin-bottom: 5px;}

.menu a {
     width:80px; 
     height: 20px;
     display: block;
     text-align: center;
     border: 1px solid gray;
     text-decoration: none;
     color: #000;
     background: #fff;
	 }
	 
.menu a:hover {
     background: #ccc;
     border: 1px solid gray; 
     }

.menu a:active {
     background: gray;
     border: 1px solid gray; 
     color: #fff;
     }


et le html :

<body>
	<div id="global">
		<div id="header"></div>
		<div id="fondmenu">
			<ul class="menu">
			<li><a href="">Menu 1</a></li>
			<li><a href="">Menu 2</a></li>
			<li><a href="">Menu 3</a></li>
			<li><a href="">Menu 4</a></li>
			</ul>
		</div>
		<div id="contenu"></div>		
	</div>
</body>


Y'a-t-il un moyen d'adapter ça pour que le rendu soit le même sous Firefox?
Modifié par pixie (04 Mar 2006 - 11:36)
il faut que tu joues sur le padding du <ul>.
De mémoire c'est ca qui manque.

ul {list-style-type: none; margin-top:50px; margin-left:20px;padding:0;}

Modifié par Zeke (02 Mar 2006 - 11:59)
Sujet clos
Aller à