18041 sujets

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

CSS 3 boîtes

Bonjour,

J'ai un petit problème.

J'utilise une feuille de css pour faire une page d'administration pour mon site Web et je voudrais afficher 3 boîtes centrées à l'écran de largeur fixe avec un espace entre celles-ci, mais je n'y arrive pas.

Voici où j'en suis :

<html>
	<head>
		<style>
			#contenu
			{
				margin:0 auto;
				width:800px;
			}

			#gauche
			{
				border:1px solid black;
				color:blue;
				float:left;
				width:250px;
			}

			#centre
			{
				border:1px solid black;
				color:blue;
				float:left;
				margin-left:28px;
				position:absolute;
				width:250px;
			}

			#droit
			{
				border:1px solid black;
				color:blue;
				float:right;
				width:250px;
			}
		</style>
	</head>
	<body>
		<div id="contenu">

			<div id="gauche">
				Contenu 1
			</div>

			<div id="centre">
				Contenu 2
			</div>
	
			<div id="droit">
				Contenu 3 <br /> plus <br /> long
			</div>

		</div>
	</body>
</html>


C'est sous IE 7 que ça ressemble le plus à ce que je veux faire. La seule chose qui manque c'est que les boîtes soient centrés à l'écran et sous Firefox ce n'est pas du tout ça ... De plus, j'aimerais que la hauteur des blocs s'ajustent en fonction du texte le plus long des trois boîtes...

Merci de m'aider

a+
Modifié par Kiboumz (15 Jan 2008 - 01:19)
Bonjour

Positionne tes 3 div en float:left; et ajoute un margin-left à chacunes des div.

@+ 


<style>
#contenu {
 margin:0 auto 0 auto;
 width:750px;
 background:#CCFFFF;
}

#gauche {
 border:1px solid black;
 color:blue;
 float:left;
 margin-left:0;
 width:200px;
}

#centre	{
 border:1px solid black;
 color:blue;
 float:left;
 margin-left:72px;
 width:200px;
}

#droit {
 border:1px solid black;
 color:blue;
 float:left;
 margin-left:72px;
 width:200px; 
}

#bas {clear:both;}

</style>
</head>
 <body>
  <div id="contenu">
  <div id="gauche">Contenu 1</div>
  <div id="centre">Contenu 2	</div>
  <div id="droit">Contenu 3 <br />plus<br />long</div>
  <div id="bas"></div>	
  </div>
  </html>
 </body>
</html>

Modifié par Michel (15 Jan 2008 - 02:49)
Salut!

Merci pour ta réponse!

Y'a juste 3 petits trucs qui restent à régler.

1. Centrer les blocs dans la page dans IE 7.

2. Ajuster le hauteur des blocs en fonctions du contenu le plus long.

3. Sous IE 7, le 3ième bloc a un espace à sa droite contrairement à sous Firefox 2...

Des suggestions ?

Merci beaucoup!

a+
Modérateur
Salut,

Le moins contraignant, c'est de procéder ainsi :
<!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" />
		<title>Exemple</title>
		<style type="text/css"><!--

@media screen, projection {
	table {width:800px; margin:0 auto;}
	td {border:1px solid #000; padding: 0 5px; vertical-align:top;}
}

		--></style>
		<!--[if IE 5]><style type="text/css">

@media screen {
	body {text-align:center;}
	table {text-align:left;}
}

		</style><![ endif]--> [#red]<- supprimer l'espace avant le endif[/#]
	</head>
<body>

<h1>Exemple de boites de mêmes hauteurs</h1>
<table cellspacing="20">
	<tr>
		<td>
			<h2>Titre 1</h2>
			<p>contenu 1</p>
		</td>
		<td>
			<p>contenu 2</p>
		</td>
		<td>
			<p>contenu 3</p>
		</td>
	</tr>
</table>

</body></html>
Si tu passes par des div, tu seras contraint de figer toutes les hauteurs... ce qui n'est pas très pratique.
Sujet clos
Aller à