28172 sujets

CSS et mise en forme, CSS3

[Résolu] Alignement vertical d'images dans une liste

Bonjour à tous,

J'ai créé un menu grâce à une liste, ce menu contient plusieurs images de formes différentes et je souhaiterais aligner ces images verticalement. A titre indicatif, ce menu est dans une div.

J'ai trouvé un sujet similaire ici mais je ne parviens pas à appliquer la propriété vertical-align.
Je ne la place peut-être pas au bon endroit...

Voilà mon code html:

<div id="fixed_bar_content">

<ul id="fixed_bar_menu">
	<li>
		<a href="page1.html">
				<img src="logo2.png" width="160px" />
		</a>
	</li>
	
    <li>
    	<a href="page2.html">
			<img src="icone1.gif" width="28px" height="28px" />
		</a>
	</li>
	
    <li>
    	<a href="page3.html>
				<img src="icone2.gif" width="28px" height="28px" />
		</a>
	</li>
	
    <li>
    	<a href="page4.html">
			<img src="icone3.gif" width="28px" height="28px" />
		</a>
	</li>
</ul>

</div>



Et voilà mon code css:

div#fixed_bar_content{
	margin-left: auto;
	margin-right: auto;
	width: 850px;
	}

ul#fixed_bar_menu{	
	padding-left:0;
}
	
ul#fixed_bar_menu li{
	float: left;
	margin: 0 5px 0 0;
	}


Quelles sont les solutions?

Merci d'avance pour votre aide Smiley biggrin
Modifié par SuperPickle (23 Oct 2011 - 20:09)
Salut,

Déjà, ne mets pas les width et les height dans le HTML,
passe par le CSS, pas besoin de rajouter de class en plus puisque les dimensions sont toujours les mêmes.

Il faut que tu précises:

tu veux des images en colonne ou des images en ligne toutes au même niveau?
jmlapam a écrit :
Salut,

Déjà, ne mets pas les width et les height dans le HTML,
passe par le CSS, pas besoin de rajouter de class en plus puisque les dimensions sont toujours les mêmes.

Les 3 dernières images sont effectivement de taille identique (dimension d'affichage: 28x28), mais la 1ère image a des dimensions différentes (dimension d'affichage: 160x20).

jmlapam a écrit :
Il faut que tu précises:

tu veux des images en colonne ou des images en ligne toutes au même niveau?

Je souhaite que les images soient affichées en ligne au même niveau. Les <li> sont bien affichées en ligne (float: left) mais les images sont alignées en haut.
Modifié par SuperPickle (23 Oct 2011 - 16:14)
OK,


C'est pas grave, tu peux passer par le first-child du ul (j'insiste là-dessus parce séparation de la forme et du contenu=bonne pratique)
Sinon concernant spécifiquement ton souci, un display approprié: lis cet article
jmlapam a écrit :
OK,


C'est pas grave, tu peux passer par le first-child du ul (j'insiste là-dessus parce séparation de la forme et du contenu=bonne pratique)
Sinon concernant spécifiquement ton souci, un display approprié: lis cet article

J'ai donc viré le float:left; et j'ai appliqué la propriété display: inline; aux <li>, et mon vertical-align: middle; fonctionne enfin!
Merci pour ton aide Smiley smile

Dernière petite question: je souhaiterais que les 2 dernières images soient alignées à gauche mais le align: right; me "désactive" la propriété vertical-align: middle;...
Que puis-je faire?
Modifié par SuperPickle (23 Oct 2011 - 16:59)
SuperPickle a écrit :

fonctionne enfin!
Merci pour ton aide Smiley smile

Yw (you're welcome)

SuperPickle a écrit :

Dernière petite question: je souhaiterais que les 2 dernières images soient alignées à gauche mais le align: right; me &quot;désactive&quot; la propriété vertical-align: middle;...
Que puis-je faire?


le align: right? fais voir le code
Modifié par jmlapam (23 Oct 2011 - 17:23)
jmlapam a écrit :

le align: right? fais voir le code

Voilà mon code actuel (sans la propriété align:right;)

Le code html n'a pas changé:

<div id="fixed_bar_content">

<ul id="fixed_bar_menu">
	<li>
		<a href="page1.html">
				<img src="logo2.png" width="160px" />
		</a>
	</li>
	
    <li>
    	<a href="page2.html">
			<img src="icone1.gif" width="28px" height="28px" />
		</a>
	</li>
	
    <li>
    	<a href="page3.html>
				<img src="icone2.gif" width="28px" height="28px" />
		</a>
	</li>
	
    <li>
    	<a href="page4.html">
			<img src="icone3.gif" width="28px" height="28px" />
		</a>
	</li>
</ul>

</div>



Et voilà le css modifié:

div#fixed_bar_content{
	margin-left: auto;
	margin-right: auto;
	width: 850px;
	}

ul#fixed_bar_menu{	
	padding-left:0;
	margin-top:3px;
}

ul#fixed_bar_menu li{
	display: inline;
	margin: 0 5px 0 0;
	}
	
ul#fixed_bar_menu li img{
	vertical-align: middle;
	}


Et j'ai essayé d'intégrer la propriété align: right pour les 2 dernières images. Conséquence: elles s'aligne bien à gauche mais l'alignement vertical n'est plus actif.
Ah oui d'accord, t'as mis un align dans la balise HTML c'est cela? Faut pas.
une class et un text-align right dans le CSS pour le même effet.
Hum... Je ne dois pas avoir la bonne syntaxe.


.alignright{
text-align: right;
}


Ensuite je dois ajouter class="alignright" à quelle balise? J'ai essayé de l'ajouter aux <li>, <a> et <img>... sans succès Smiley ohwell
jmlapam a écrit :
Moi je bougerais plutôt les a avec des margin.

C'est ce que j'avais initialement fait mais je me demandais s'il n'y avait pas une solution plus propre. Soit! Va pour les margin.

Merci pour ton aide Smiley biggrin
jmlapam a écrit :
Yw mais qu'entends-tu par plus propre?

Aligner les 2 dernières images à droite grâce à une propriété au lieu de chercher (en tâtonnant) la bonne valeur pour la marge de gauche.
Mais bon, c'est le résultat qui compte ^^
jmlapam a écrit :
C'est pour cela que l'on fait généralement un zoning avant.

J'en avais fait un! Mais j'avais initialement structuré le menu grâce à un tableau.
Je cherche maintenant à être plus conforme avec les normes de la w3c!
Ok, mais rien ne t'empêche d'en refaire un, c'est ce qui te donne les dimensions précises et t'évite de galérer à tatonner. Smiley cligne
Sujet clos
Aller à