Comment centrer des listes automatiquement dans une div

Question

pan

4 Apr 2011 à 20:58

Bonjour,

Depuis hier je tente de centrer 4 listes placées côte à côte dans une div de manière automatique.

Je pensais qu'en passant ma div en padding: auto; ça aurait marché mais rien à faire... auriez vous idée ?

Merci


<div id="resume">
<ul>
<li><h4>XX</h4></li>
<li><a href="#">XX</a></li>
<li>XX</li>
</ul>

<ul>
<li><h4>Liens utiles</h4></li>
<li><a href="#">XX</a></li>
<li><a href="#">XX</a></li>
<li><a href="#">XX</a></li>
<li><a href="#">XX</a></li>
<li><a href="#">XX</a></li>
<li><a href="#">XX</a></li>
</ul>
<ul>
<li><h4>XX</h4></li>
<li><a href="#">XX</a></li>
<li><a href="#">XX</a></li>
<li><a href="#">XX</a></li>
<li><a href="#">XX</a></li>
</ul>
<ul >
<li><h4>XX</h4></li>
<li><a href="#">XX</a></li>
<li><a href="#">XX</a></li>
<li><a href="#">XX</a> </li>
<li ><img src="iXX.gif" /></li>
</ul>


</div>


#resume { float: left;  width: 995px; font-size: 0.7em; color: #999; font-family: Arial, Helvetica, sans-serif;  }
#resume a {color: #999;}
#resume ul{float: left; margin: 0 30px 30px 0; padding-right: 30px; border-right: 1px solid #e2e2e2;}
#resume h4{text-transform: uppercase; font-weight: bold; font-size: 0.9em; color:#9b9b9b; margin: 0 0 10px 0;}

Modifié par pan (04 Apr 2011 - 21:29)

padding-top

4 Apr 2011 à 21:29

Et en donnant une largeur à tes <ul> ?

Genre width:200px ? tu ajustes ensuite...

à plus,

éric

pan

4 Apr 2011 à 21:35

J'avais essayé mais ça ne fonctionne pas Smiley decu

pan

4 Apr 2011 à 21:38

J'ai un autre truc bizarre : mon padding: 0px auto; n'apparait pas dans Firebug...

Apparemment il est remplacé par les infos de normalisation des marges que je met au début de ma feuille de style ...

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td, hr { margin: 0; padding: 0; }

Modifié par pan (04 Apr 2011 - 21:39)

Eric2A

5 Apr 2011 à 01:51

Salut,

En placant chaque liste dans un bloc ayant la propriété display:inline-block.

Le tout est centré à l'aide de la propriété text-align:center définie pour le bloc resume.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<style type="text/css">
#resume {
	text-align:center;
	width: 995px; font-size: 0.7em; color: #999; font-family: Arial,
	Helvetica, sans-serif;
}
#resume a {color: #999;}
#resume .ulcontainer {
	text-align:left;
	display:inline-block;
	margin: 0 30px 30px 0; padding-right: 30px; border-right: 1px solid #e2e2e2;
}
#resume h4{
	text-transform: uppercase; font-weight: bold; font-size: 0.9em; color:#9b9b9b; margin: 0 0 10px 0;
}
</style>
</head>
<body>
<div id="resume">
	<div class="ulcontainer">
		<ul>
			<li><h4>XX</h4></li>
			<li><a href="#">XX</a></li>
			<li>XX</li>
		</ul>
	</div>
	<div class="ulcontainer">
		<ul>
			<li><h4>Liens utiles</h4></li>
			<li><a href="#">XX</a></li>
			<li><a href="#">XX</a></li>
			<li><a href="#">XX</a></li>
			<li><a href="#">XX</a></li>
			<li><a href="#">XX</a></li>
			<li><a href="#">XX</a></li>
		</ul>
	</div>
	<div class="ulcontainer">
		<ul>
			<li><h4>XX</h4></li>
			<li><a href="#">XX</a></li>
			<li><a href="#">XX</a></li>
			<li><a href="#">XX</a></li>
			<li><a href="#">XX</a></li>
		</ul>
	</div>
	<div class="ulcontainer">
		<ul>
			<li><h4>XX</h4></li>
			<li><a href="#">XX</a></li>
			<li><a href="#">XX</a></li>
			<li><a href="#">XX</a></li>
			<li><img src="iXX.gif" alt="Image" /></li>
		</ul>
	</div>
</div>
</body>
</html>

Testé uniquement sur IE8... Je ne sais pas ce que cela donne sur les autres navigateurs.

pan

5 Apr 2011 à 09:18

Bonjour,

Merci pour cette solution. Je pensais qu'il y avait une solution plus "light"

Est-ce que chaque liste peut faire partie d'un element d'une liste générale ?

Qu'est ce que ça vaut au niveau sémantique ?

Merci

Felipe

Administrateur

5 Apr 2011 à 14:28

Un div n'a aucune valeur sémantique. Si tu en as besoin pour styler, ben t'en as besoin point. Smiley cligne

Il est conseillé de ne pas en mettre plus que nécessaire.

Sinon je comprend pas pourquoi pas mettre directement display: inline-block; sur les ul ? Ils sont pas stylés, je suppose que le container est du coup pas utile.
Et avant ça padding: 0 auto; associé à "centrer horizontalement" : euh, c'est margin: 0 auto; que tu voulais essayer ? Ou alors j'ai survolé le sujet ...

pan

5 Apr 2011 à 14:56

Felipe a écrit :

Sinon je comprend pas pourquoi pas mettre directement display: inline-block; sur les ul ? Ils sont pas stylés, je suppose que le container est du coup pas utile.

Tu as raison d'ailleurs ces div en plus n'ont rien apporté

Par contre je n'ai pas essayé display: inline-block; sur les ul car je ne maitrise pas bien cette propriete, néanmoins, je vais tester

Merci

Eric2A

5 Apr 2011 à 17:24

Mon premier test sans les div n'était pas concluant. N'ayant pas cherché à comprendre, j'ai opté pour l'ajout des <div>.

Au final en stylant bien les ul, on a un code tout simple...


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>test</title>
	<style type="text/css">
		#resume {
			text-align:center;
			width: 995px; font-size: 0.7em; color: #999; font-family: Arial,
			Helvetica, sans-serif;
		}
		#resume a {color: #999;}
		#resume ul {
			text-align:left;
			display:inline-block;
			margin: 0 30px 30px 0; padding-right: 30px; border-right: 1px solid #e2e2e2;
		}
		#resume h4{
			text-transform: uppercase; font-weight: bold; font-size: 0.9em; color:#9b9b9b; margin: 0 0 10px 0;
		}
	</style>
</head>
<body>
<div id="resume">
	<ul>
		<li><h4>XX</h4></li>
		<li><a href="#">XX</a></li>
		<li>XX</li>
	</ul>
	<ul>
		<li><h4>Liens utiles</h4></li>
		<li><a href="#">XX</a></li>
		<li><a href="#">XX</a></li>
		<li><a href="#">XX</a></li>
		<li><a href="#">XX</a></li>
		<li><a href="#">XX</a></li>
		<li><a href="#">XX</a></li>
	</ul>
	<ul>
		<li><h4>XX</h4></li>
		<li><a href="#">XX</a></li>
		<li><a href="#">XX</a></li>
		<li><a href="#">XX</a></li>
		<li><a href="#">XX</a></li>
	</ul>
	<ul>
		<li><h4>XX</h4></li>
		<li><a href="#">XX</a></li>
		<li><a href="#">XX</a></li>
		<li><a href="#">XX</a></li>
		<li><img src="iXX.gif" alt="Image" /></li>
	</ul>
</div>
</body>
</html>

pan

5 Apr 2011 à 20:09

Bon ben ça ne marche pas...

Les listes restent "calées" sur la gauche et en plus elles sont alignées en bas (et pas en haut)...

Je ne vois plus trop ce que je peux essayer...

gc-nomade

5 Apr 2011 à 20:37

bonsoir,

si tu centre a l'aide de text-align:center et display:inline-block pour les enfants direct, il suffit de ne pas donner de largeur a #resume.

vertical-align: top/middle/etc ... appliquer aux <ul> te permettra de régler leur alignement vertical les unes aux autres.

pan

5 Apr 2011 à 21:10

And the winner is... gc-nomade Smiley clapclap

!

Bravo effectivement !
J'ai bien cru que j'allais tout envoyer ballader Smiley fouille

Sinon ne plus avoir ma div en float-left c'est pas grave ?

Merci à tous !

gc-nomade

5 Apr 2011 à 21:15

pan a écrit :
Sinon ne plus avoir ma div en float-left c'est pas grave ?

Si ce n'est pas utile , aucune raison de s'en servir.

bonne continuation,
gc

Sujet clos

Questions générales et questions de débutants

Comment centrer des listes automatiquement dans une div