28173 sujets

CSS et mise en forme, CSS3

[résolu] Transformer une liste UL LI en blocs qui se suivent

Salut les gars, ça faisait un moment..:p

J'ai un petit souci. Je cherche à transformer une liste UL LI en une série de blocs qui se suivent horizontalement et qui reviennent à la ligne en bout de fenêtre.

Dans l'idéal, ces blocs feraient la même taille.

Voici ce que j'ai pour l'instant :

HTML
<ul>
<li>Bloc 1</li>
<li>Bloc 2</li>
</ul>

et CSS
li {
	display: inline;
	border: 1px solid black;
	padding: 10px;
	margin : 5px;
}


Les blocs se mettent donc bien les uns à côté des autres, le problème est que quand ça revient à la ligne, les blocs s'enchevètrent verticalement et les bordures se superposent... Smiley fache
Vous pouvez voir l'image jointe pour avoir un visuel..
upload/4072-apercu.GIF

Merci de votre aide !
Modifié par RomsIW (04 Sep 2006 - 20:48)
Vikchill a écrit :
T'as cherché un peu? :>

http://css.alsacreations.com/modelesmenus/hs1.htm


comme tu l'as très certainement vu, c'est à peu près ce que j'ai. Ce qu'Alsa n'a pas fait et ce qui me pose problème, c'est que j'ai mis plus de padding que de margin et que de fait, ça fait le problème ci-avant énoncé et que tu peux voir sur le visuel..

mais oui, effectivement, j'ai cherché un peu et j'ai même relu ma référence CSS..
Vikchill a écrit :
As-tu essayé de mettre li en float: left, comme dans l'exemple donné?


oui, j'ai oublié de le mettre dans ce que j'ai recopié, mais oui bien sûr, c'est pas ça le probleme
Mmm, avec le code que tu as donné et en ajoutant le float, ça se passait bien chez moi sur FF Smiley confus

[Edit] Je viens de tester sous IE, ça rends bien aussi oO

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
	<meta http-equiv="Content-Language" content="fr" />


	<title>Maquette</title>
	
<style type="text/css">

li {
	float: left;
	display: inline;
	border: 1px solid black;
	padding: 10px;
	margin : 5px;
}

</style>

</head>

<body>

<ul>

<li>Bloc 1</li>
<li>Bloc 1</li>
<li>Bloc 1</li>
<li>Bloc 1</li>
<li>Bloc 1</li>
<li>Bloc 1</li>
<li>Bloc 1</li>
<li>Bloc 1</li>
<li>Bloc 1</li>
<li>Bloc 1</li>
<li>Bloc 1</li>
<li>Bloc 1</li>
</ul>
</body>
</html>


http://img523.imageshack.us/img523/1461/test2ic3.th.jpg
Modifié par Vikchill (04 Sep 2006 - 18:52)
ok, voilà le code exact :

<style type="text/css">
	.cat {
		padding: 0; margin: 0;
	}
	li.cat {
		display: inline;
		border: 1px solid black;
		padding: 5px;
		margin : 5px;
		
	}
	</style>
	<div style="clear: both; margin: 0 0 20px 0;"><ul class="cat">
		<li class="cat"><a href="categories.php?cat_mere=1"> Sports aériens</a></li>
		<li class="cat"><a href="categories.php?cat_mere=2"> Sports nautiques</a></li>
	</ul></div>


Comme vous pouvez le voir et après vérification, je n'ai pas de float:left; ce qui ne l'empêche pas de fonctionner, je l'avais bien testé avec tout à l'heure, puis enlevé.
Vikchill a écrit :
Ton code n'est pas valide Smiley langue

oui je sais, je suis vilain Smiley smile

je mettrai les styles à part plus tard, pour l'instant j'essaie de trouver la bonne alchimie pour que ça fonctionne. Pour moi ça fonctionne aussi sous IE, c'est firefox qui fait les marges sans prendre en compte le padding, ce qui crée ces enchevetrements..

si par rapport à mon code, tu arrives à faire qq chose avec FF qui ressemble à ce que tu as sous IE, c'est ce que je cherche et ça serait super cool..
Ca doit être valide en 1.0 strict, la seule différence est que j'ai placé tout en css et ajouter un float.


.cat 
{
		padding: 0; 
		margin: 0;
}

li.cat 
{
		float: left;
		display: inline;
		border: 1px solid black;
		padding: 5px;
		margin : 5px;
}

.cont
{
	 clear: both; 
	 margin: 0 0 20px 0;
}





<div id="cont"><ul class="cat">
<li class="cat"><a href="categories.php?cat_mere=1"> Sports aériens</a></li>
<li class="cat"><a href="categories.php?cat_mere=2"> Sports nautiques</a></li>
</ul>
</div>
c'est dingue, c'était ça... un grand merci !

le seul souci, c'est que maintenant, le bloc ".cont" est chevauché par le bloc d'en dessous maintenant malgré le clear et le type à défaut en "bloc"..?
Ben c'est un autre problème, peut-être faut-il voir ça dans un autre post, en t'assurant de fournir un code valide pour qu'on puisse y jetter un oeil.

Enfin quand je dis "on", c'est surtout les autres, moi je suis un néophyte Smiley biggol
Sujet clos
Aller à