28173 sujets

CSS et mise en forme, CSS3

3 sections centrés!

Bonjour!

Je suis certain que quelqu'un a déja posé cette question mais je n'arrive pas à trouver. C'est simple, j'ai 3 petites images d'environ 100x100 pixels. Dans l'entête, je veux placer une image alignée à gauche, une aligné au centre, et une alignée à droite.
Cependant, je n'y arrive pas. J'arrive à placer "environ" l'image au milieu mais cela dépend de la résolution. Avez vous une solution??

Voici mon html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
	<head>
		<title>TEST</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<link href="style.css" rel="stylesheet" type="text/css" />
	</head>
	<body>
	<div id="conteneur">
		<div id="entete">
			<div id="gauche"><img src="1.jpg"></div>
			<div id="centre"><img src="2.jpg"></div>
			<div id="droite"><img src="3.jpg"></div>
		</div>
	</div>

	</body>
</html>


Voici le css très peu fonctionnel que j'ai fait:


#conteneur {
	position: absolute;
	width: 100%
}

#entete {
	position: relative;
	width: 100%;
	height: 300px;
}

#gauche {
	left: 0;
	width: 33%;
}

#centre {
	margin-top: -50px;
	margin-left: 200px;
	left: 50%;
	width: 33%;
}

#droite {
	right: 0;
	width: 33%;
}


Merci d'avance!
<div style="text-align:center">
<div style="float:left;"><img src="img0.jpg"></div>
<img src="img1.jpg">
<div style="float:right;"><img src="img2.jpg"></div>
<div style="clear:left;"> </div>
</div>
Administrateur
Deny a écrit :
<div style="text-align:center">
<div style="float:left;"><img src="img0.jpg"></div>
<img src="img1.jpg">
<div style="float:right;"><img src="img2.jpg"></div>
<div style="clear:left;"> </div>
</div>


Attention, ce code provoque un décalage : l'élément flottant à droite apparaît en dessous des autres, et c'est logique :
Tutoriel a écrit :
Attention à bien comprendre le fonctionnement du positionnement flottant :

* L'élément est d'abord placé normallement dans le flux. Donc si un autre élement bloc est placé avant lui, l'élément flottant se positionnera en dessous; et si un élément bloc le suit, ce dernier sera placé dessous. Bref, le comportement classique du positionnement en flux
* Ensuite l'élément qui a reçu la propriété float est "poussé" à gauche ou à droite de son conteneur.
* Les éléments qui le suivent au sein du conteneur se placent alors autour de lui.


Note : il est également complètement inutile d'encadrer les images par des éléments <div>

Note 2 : tant qu'on y est, ajoutons les attributs obligatoires "alt" et fermons les éléments <img>.

Cela donne, si je ne me suis pas trompé :
<div style="text-align:center">

<img style="float:right;" src="img2.jpg" alt="" />
<img style="float:left;" src="img0.jpg" alt="" />
<img src="img1.jpg" alt="" />

<div style="clear:left;"> </div>
Merci! Y a-t'il une raison pourquoi vous placer votre CSS direct dans le div au lieu que dans un fichier à part?
Aussi, est-ce juste moi ou l'image du centre est un peu plus à droite que bien centré?

Merci!
Sujet clos
Aller à