28173 sujets

CSS et mise en forme, CSS3

[Résolu] Pbl positionnement d'un menu de gauche

Bonjour,

J'essaye de positionner mon menu de gauche à 40px de haut du logo et à 0px sur la gauche (pour que le menu se positionne bien à gauche, comme le logo)

Voici ma page:
http://www.princessedunjour.com/collections-bijoux-mariage.htm

Sous ff, le menu est "décalé" vers la droite et n'est plus du tout aligné par rapport au logo.
Sous ie, et pour une fois, le résultat est celui que j'attendais.

Savez-vous comment faire pour que ff aligne le menu sur la gauche comme sous ie ?

NB: Opera positionne bien le menu comme ie... est ce un bug de ff ?

Merci à tous et voici mon code

<body>
<div id="page">
        <h1 id="titre">
        <a href="http://www.princessedunjour.com">
        <img src="logo222.gif" title="Princesse d'un Jour" alt="Princesse d'un Jour" style="vertical-align: middle; margin-right: 50px;" /></a>
        BIJOUX ET ACCESSOIRES POUR LE MARIAGE
        </h1>
		
		<ul id="menu_haut">
        <li><a id="menu1" title="Accueil" href="accessoires-colliers-mariage.htm">ACCUEIL</a></li>
		<li><a id="menu2" title="Collections" href="accessoires-mariage-bracelets.htm">COLLECTIONS</a></li>
		<li><a id="menu3" title="Design" href="accessoires-boucles-doreilles.htm">DESIGN</a></li>
		<li><a id="menu4" title="Points de vente" href="accessoires-mariage-pics-a-cheveux">POINTS DE VENTE</a></li>
		<li><a id="menu5" title="A propos" href="accessoires-mariage-tiares.htm">A PROPOS</a></li>
		<li><a id="menu6" title="Contact" href="#">CONTACT</a></li>
		</ul> 
	<div id="blocmenugauche">	
	<ul id="menu_gauche">
	<li><a id="menug1" title="Toute la collection" href="#">TOUTE LA COLLECTION</a></li>
	<li><a id="menug2" title="Perles de rocaille" href="#">PERLES DE ROCAILLE</a></li>
	<li><a id="menug4" title="Cristal Swarovki" href="#">CRISTAL SWAROVSKI</a></li>
	<li><a id="menug5" title="Perles de Bohème" href="#">PERLES DE BOHEME</a></li>
	<li><a id="menug6" title="Fleurs de soie" href="#">FLEURS DE SOIE</a></li>
	<li><a id="menug7" title="Perles nacrées" href="#">PERLES NACREES</a></li>
	<li><a id="menug8" title="Guipure brodée" href="#">GUIPURE BRODEE</a></li>
	</ul>
	</div>
</div>	                           
</body>


et ma css

body {
margin: 0;
text-align: center;
background: url(/Baggrund_flosset.gif) repeat-y center top;
}
img {
border-width: 0;
border-style: none;
}
#page {
margin-left: auto;
margin-right: auto;
width: 800px;
text-align: left;
}
h1 { 
font-family: Arial, Times, serif;
letter-spacing: 0.3em;
font-size: 65%;
color: #990099;
margin: 0 0 0 0;
}
h2 { 
font-family: Tahoma, Times, serif;
font-size: 0.7em;
letter-spacing: 0.05em;
color: #990099;
margin-top: 20px;
margin-left: 40px;
margin-bottom: 0px;
margin-right: 0px;
padding: 0px;
width: 700px;
}
ul#menu_haut {
padding: 0px;
letter-spacing: 0.2em;
list-style-type: none;
font-family: Arial, Times, serif;
font-size: 60%;
margin-top: 20px;
margin-left: 115px;
margin-bottom: 0px;
margin-right: 0px;
text-align: left;
width: 700px;
}
#menu_haut li {
float: left;
}
#menu_haut a {
display: block;
color: #999999;
text-decoration: none;
text-align: center;
}
#menu1 {
border-right: 1px solid #999999;
width: 85px;
}
a#menu1:hover {
background: url(menu1.gif) no-repeat 0 0;
}
#menu2 {
border-right: 1px solid #999999;
width: 125px;
background: url(menu2.gif) no-repeat 0 0;
}
a#menu2:hover {
background: url(menu2.gif) no-repeat 0 0;
}
#menu3 {
border-right: 1px solid #999999;
width: 85px;
}
a#menu3:hover {
background: url(menu1.gif) no-repeat 0 0;
}
#menu4 {
border-right: 1px solid #999999;
width: 150px;
}
a#menu4:hover {
background: url(menu4.gif) no-repeat 0 0;
}
#menu5 {
border-right: 1px solid #999999;
width: 95px;
}
a#menu5:hover {
background: url(menu5.gif) no-repeat 0 0;
}
#menu6 {
width: 85px;
}
a#menu6:hover {
background: url(menu1.gif) no-repeat 0 0;
}
#menu_haut a:hover {
color: #000000;
}
div#blocmenugauche {
float: left;
width: 200px;
}
ul#menu_gauche {
margin-top: 40px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
letter-spacing: 0.2em;
list-style-type: none;
font-family: Arial, Times, serif;
font-size: 60%;
text-align: left;
}
#menu_gauche a {
color: #999999;
text-decoration: none;
text-align: left;
}
#menug1 {
line-height: 30px;
}
#menug2 {
line-height: 30px;
}
#menug3 {
line-height: 30px;
}
#menug4 {
line-height: 30px;
}
#menug5 {
line-height: 30px;
}
#menug6 {
line-height: 30px;
}
#menug7 {
line-height: 30px;
}
#menug8 {
line-height: 30px;
}
#menu_gauche a:hover {
color: #000000;
}

Modifié par pp51 (12 Dec 2005 - 20:13)
Sujet clos
Aller à