28172 sujets

CSS et mise en forme, CSS3

Alignement verticale d'éléments

Bonjour,
Dans mon menu nav, j’ai une liste composée de deux titres et d’une bullet devant chacun de ces titres.
Mon problème, un décalage vertical de 1 px de mes bullets par rapport aux deux titres dans IE 9 et Firefox…. du coup, ce n’est pas très esthétique.
Je ne vois pas de solution mis à part sortir mes bullets de mon menu nav et de les placer en position absolute ….mais ce n’est pas trop recommandé.

Donc si quelqu’un à une idée, je suis preneur.

L’url de mon site
http://gillesn.perso.sfr.fr/main/

Mon code html :
<nav id="menu_main">
	
<ul>
<li ><img src="images/bullet.png" width="13" height="13" alt="bullet_menu" /></li>
<li><a href="#body_content" class="nav_jquery">VENENATIS JUSTO ID</a></li>
<li><img src="images/bullet.png" width="13" height="13" alt="bullet_menu" /></li>
<li><a  href="#section_en_savoir_plus" class="nav_jquery">DUIS FACILISIS </a></li>
</ul>
                
</nav>


Ma css :



#menu_main{
	float:left;
	padding-top:0px;
	padding-left:20px;
	
}

#menu_main ul{
	z-index:1000;
	margin-top:0;
	margin-right:auto;
	margin-bottom:0;
	margin-left:auto;
	padding:0;
	list-style-type:none;
}
#menu_main ul li{
	position:relative;
	display:inline;
	float:left;
	padding-left:5px;
	margin-top:15px;
	font-family:GeometricSlabserif703Bold, Georgia, serif;
	font-size: 12px; 
	font-color:#e1e1e1;
	font-weight:bold;
}



Merci d’avance pour votre aide.
Hello.

Tes puces n'ont aucun intérêt à figurer dans le code HTML (images de décorations). Tu peux supprimer ton premier et troisième <li>, et les passer en background de tes li (en rajoutant un peu de padding-left pour leur réserver la place).
Pas mieux que le post du dessus.

Tu places tes éléments image en background sur ton éléments liste et tu décales ton élément texte à l'aide de padding-left !
Les éléments background tu peux faire comme ceci :

#menu_main ul li{
background-image:url(../images/bullet.png);
background-position:0 50%;/* 0 pour la gauche et 50% pour aligner au milieu verticalement*/
line-height:40px;
display:block;
float:left;
padding-left:25px;/*mets la valeur nécessaire pour que ça soit propre*/
margin-top:15px;
font-family:GeometricSlabserif703Bold, Georgia, serif;
font-size: 12px; 
font-color:#e1e1e1;
font-weight:bold;
}
Merci, ça marche nickel.......j'ai ajouté un background no repeat et une margin left.
Mais du coup dans IE et firefox , j'ai un décalage horizontal entre mes deux menus, celui de gauche et celui de droite....
Je ne vois pas quoi faire !
Sujet clos
Aller à