28220 sujets

CSS et mise en forme, CSS3

[résolu] Pbl Letter-spacing et line-height sur mon menu

Bonsoir,

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

J'ai utiliser le letter-sapcing: 0.2em pour le menu du haut et le menu de gauche.

Là ou je ne comprends pas, c'est pour le menu de gauche sous ie:
1. j'ai l'impression que le letter-spacing est 2x trop grand
2. j'ai comme le pressentiment que la taille du bloc menugauche est trop grand versus ff

*** Par ailleurs, les liens du menu de gauche sont plus espacés sur ie que sur ff, à peu près le double ***

Si qq un a une idée ??

Voici mes codes


<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>
	<p id="couleurs">Découvrez aussi nos bijoux en couleurs</p>
	</div>
	</div>
	<div id="photo_eve">
	<a href="http://www.princessedunjour.com"> <img src="/Evetest.jpg" title="Perles de rocaille" alt="Perles de rocaille"/></a>
	<p id="perles_de_rocaille">Perles de rocaille</p>
    </div>
	<div id="photo_cristal">
	<a href="http://www.princessedunjour.com"> <img src="/Cristaltest.jpg" title="Cristal Swarovski" alt="Cristal Swarovski"/></a>
	<p id="cristal_swarovski">Cristal Swarovski</p>
    </div>
	<div id="photo_cleopatre">
	<a href="http://www.princessedunjour.com"> <img src="/cleopatre-blanc-test.jpg" title="Perles de Bohème" alt="Perles de Bohème"/></a>
	<p id="perles_boheme">Perles de Bohème</p>
    </div>
	<div id="photo_camelia_tissu">
	<a href="http://www.princessedunjour.com"> <img src="/camelia-tissu-test.jpg" title="Fleurs de soie" alt="Fleurs de soie"/></a>
	<p id="fleurs_de_soie">Fleurs de soie</p>
    </div>
	<div id="photo_estella">
	<a href="http://www.princessedunjour.com"> <img src="/estella-test.jpg" title="Perles nacrées" alt="Perles nacrées"/></a>
	<p id="perles_nacrees">Perles nacrées</p>
    </div>
	<div id="photo_guipure">
	<a href="http://www.princessedunjour.com"> <img src="/Guipure-blanc-test.jpg" title="Guipure brodée" alt="Guipure brodée"/></a>
	<p id="guipure_brodee">Guipure brodée</p>
    </div>
</div>	                           
</body>




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: 160px;
padding: 0;
margin: 0;
}
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;
padding: 0;
}
#menu_gauche a {
display: block;
color: #999999;
text-decoration: none;
text-align: left;
padding: 0;
margin: 0;
}
#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;
}
p#couleurs {
color: #999999;
}
div#photo_eve {
padding: 0;
float: left;
width: 150px;
height: 180px;
margin-left: 30px;
margin-top: 40px;
}
p#perles_de_rocaille {
font-family: Arial, Times, serif;
color: #999999;
font-size: 75%;
text-align: left;
margin-top: 5px;
margin-bottom: 0;
padding: 0px;
}
div#photo_cristal {
padding: 0;
float: left;
width: 150px;
height: 180px;
margin-left: 40px;
margin-top: 40px;
}
p#cristal_swarovski {
font-family: Arial, Times, serif;
color: #999999;
font-size: 75%;
text-align: left;
margin-top: 5px;
margin-bottom: 0;
padding: 0px;
}
div#photo_cleopatre {
padding: 0;
float: left;
width: 150px;
height: 180px;
margin-left: 40px;
margin-top: 40px;
}
p#perles_boheme {
font-family: Arial, Times, serif;
color: #999999;
font-size: 75%;
text-align: left;
margin-top: 5px;
margin-bottom: 0;
padding: 0px;
}
div#photo_camelia_tissu {
float: left;
margin-left: 30px;
padding: 0;
width: 150px;
height: 180px;
}
p#fleurs_de_soie {
font-family: Arial, Times, serif;
color: #999999;
font-size: 75%;
text-align: left;
margin-top: 5px;
margin-bottom: 0;
padding: 0px;
}
div#photo_estella {
float: left;
margin-left: 40px;
padding: 0;
width: 150px;
height: 180px;
}
p#perles_nacrees {
font-family: Arial, Times, serif;
color: #999999;
font-size: 75%;
text-align: left;
margin-top: 5px;
margin-bottom: 0;
padding: 0px;
}
div#photo_guipure {
float: left;
margin-left: 40px;
padding: 0;
width: 150px;
height: 180px;
}
p#guipure_brodee {
font-family: Arial, Times, serif;
color: #999999;
font-size: 75%;
text-align: left;
margin-top: 5px;
margin-bottom: 0;
padding: 0px;
}


PS: J'ai consience que ma css est bcp trop compliquée, mais comme je débute je préfère l'avoir en "développé" Smiley cligne
Modifié par pp51 (14 Dec 2005 - 18:19)
Modérateur
bonjour,
oui c'est etrange et je ne comprend pas (encore un bug d'IE ou .. ?), il faut donner 0.2em a Ie et 0.3 em a ff pour avoir le même espacement !?.

En donnant une taille en pixel ( 5px par exemple) alors l'affichage devient identique.

(ou bien, s'agit dun probleme de syntaxe ou d"'orthographe" dans l'appel des polices ?, ... elles me semblent pourtant bien identique sous IE et FF).

edit .. et pour l'espace entre tes liste de lien a gauche surcharge le css de cette façon
a plus 
#menu_gauche li {line-height:0;}


Je n'ai pas encore compris pourquoi, mais il arrive que IE dissocie/les <li> et les <a> qu'elle contiennent ,et une surcharge ou appliquer le meme css a ces 2 balises devient necessaire pour les positionné correctement aussi sous IE.
Modifié par gcyrillus (13 Dec 2005 - 00:58)
Bonjour,

Personne pour m'aider à résoudre le pbl sur le menu de gauche ?

=> Double espacement vertical des liens sur ie alors que c bon sous ff...

Merci d'avance
Modérateur
le double espacement du menu de gauche, ?? et le line-height:0; ... il sert a quoi ?
....... il sert a empecher le doublage de l'interligne sous IE.
a plus
Sujet clos
Aller à