18073 sujets

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

Afficher 5 blocs uniformément répartis

Salut
Je suis nouveau, et je trouve enfin l'endroit que je cherchais.
Je m'initie au css et voudrais savoir comment on fait pour afficher 5 blocs du type :

.bloc {
text-align: center ;
background-color: green;
height: 50px;
width: 100px;
}

les uns à côté des autres, mais surtout uniformément répartis sur la largeur de la page.

<div class="bloc">Un</div>
<div class="bloc">Deux</div>
<div class="bloc">Trois</div>
<div class="bloc">Quatre</div>
<div class="bloc">Cinq</div>

En fait je voudrais le même effet que :

<table cellpadding="10" cellspacing="0" width="100%" >
<tr>
<td width="20%" align=center>
<table width="100" bgcolor="green">
<tr>
<td>
<p align="center">Un</td>
</tr>
</table>
</td>
<td width="20%" align="center">
<table width="100" bgcolor="green">
<tr>
<td>
<p align="center">Deux</td>
</tr>
</table>
</td>
<td width="20%" align="center">
<table width="100" bgcolor="green">
<tr>
<td>
<p align="center">Trois</td>
</tr>
</table>
</td>
<td width="20%" align="center">
<table width="100" bgcolor="green">
<tr>
<td>
<p align="center">Quatre</td>
</tr>
</table>
</td>
<td width="20%" align="center">
<table width="100" bgcolor="green">
<tr>
<td>
<p align="center">Cinq</td>
</tr>
</table>

</td>
</tr>
</table>

merci de votre aide

faidit
Bonjour Faidit,
Bienvenue,

Pour obtenir quelque chose comme ton tableau je ferais un code sur ce principe: 
<html>
<head>
<style type="text/css">
ul, li, p {
	margin: 0;
	padding: 0;
}
li {
	width: 20%;
	float: left;
	text-align: center;
	list-style: none;
}
p {
	background-color: green;
	width: 100px;
	margin: auto;
}
</style>
</head>
<body>
<ul>
	<li><p>un</p></li>
	<li><p>deux</p></li>
	<li><p>trois</p></li>
	<li><p>quatre</p></li>
	<li><p>cinq</p></li>
</ul>
</body>
</html>

Modifié par Alan (13 Jan 2006 - 04:13)
Bonjour faidit,
Tu dois ajouter "float: left;" à ".block".
Nota : tu doit choisir entre "width: 100px;" et "width: 20%;"
Merci à Alan pour son script, mais j'ai encore un pb. La "bande" est trop haute, et je voudrais qu'elle ne dépasse pas 25px de haut (entre les mots début et fin)
J'ai beau mettre
height : 25px;
un peu partout, rien ne marche.
merci

<html>

<head>

<style type="text/css">

ul, li, p {
	margin: 0;
	padding: 0;
	}

li {
	width: 20%;
	float: left;
	text-align: center;
	list-style: none;
	background-color: red;
}

p {
	background-color: green;
	width: 100px;
	margin: auto;
}

</style>
</head>
<body>
Début
<ul>
	<li><p>un</p></li>
	<li><p>deux</p></li>
	<li><p>trois</p></li>
	<li><p>quatre</p></li>
	<li><p>cinq</p></li>
</ul>
Fin
</body>
</html>


PS : Désolé Stephan, je savais pas comment baliser... le mal est réparé !
Sujet clos
Aller à