28173 sujets

CSS et mise en forme, CSS3

3 blocs centrés et justifiés !

Salut,
ben pour bien faire il faudrait voir dans quel contexte tu veux poser ça mais, sinon, comme ça, un margin-right pour celui de gauche et un margin-left pour celui de droite ? ou même tout simplement une marge de chaque côté de celui du centre Smiley smile

have swing
Bonjour,

En reprenant le même code,
<style type="text/css">
.galerie {
	background : #ccc;
}

.gauche {
	position: absolute;
	top:0;
	left: 0;
	background : #69c;
	width : 50px;
	height: 25px;	
}

.droite {
	position: absolute;
	top:0;
	right: 0;
	background : #69c;
	width : 50px;
	height: 25px;	
} 

.centre {
	margin:  0 auto	0;
	background : #69c;
	width : 50px;
	height: 25px;	
}
.conteneur_petit {
	width: 300px;
	margin: auto;
	position: relative;
	border: 1px solid black;
}

.conteneur {
	overflow: hidden;
	padding: 10px;

}

</style>
</head>

<body>

<div class="galerie">
	<div class="conteneur">
		<div class="conteneur_petit">
			<div class="droite">boîte 1</div>
			<div class="gauche">boîte 2</div>
			<div class="centre">boîte 3</div>
		</div>
	</div>
</div>
</body>
Hello neog,

Ta description est peu claire. Les deux blocs sur les côtés doivent-ils êtres « centrés » ou bien alignés sur chaque bord ?

Si j'ai bien compris, tu veux :
- premier bloc aligné sur le bord gauche ;
- deuxième bloc centré ;
- troisième bloc aligné sur le bord droit.

C'est assez facile à faire, par exemple, en positionnant le bloc de gauche et celui de droite en absolu. Le bloc « du milieu » sera alors le seul à rester en flux, et il sera facile de le centrer horizontalement via la technique des marges automatiques.

Les ressources qui vont bien :
1. Centrer les éléments ou un site web en CSS
2. Le positionnement absolu décrit sur Openweb

On pourrait aussi envisager de faire flotter les deux blocs des côtés, mais ça risque de poser des problèmes peu évidents à gérer (même si pas forcément insurmontables... maintenant que j'y pense, ça devrait même être assez facile).
yes !

merci pour toutes ces réponses Smiley biggrin

alors en fait j'utilise un css type qui me sert pour faire des box
je peux certe multiplier les css (un pour la box de gauche, un pour celle du mileu, et un pour celle de droite) mais je veux réduire le code css au strict minimum

ces trois boxs sont dans une box plus grande, exemple concret:
690px de large pour le conteneur
et 200px pour les box internes (trois alignés)
celle de gauche à gauche du conteneur
celle de droite à droite
celle du milieu au milieu
les marges de gauche et de droite devant être nulle
et les marges autour du box du milieu étant auto-adaptable

j'ai justement utilisé le cours openweb que l'on me propose ci-dessus pour avancer Smiley cligne mais j'ai pas trouvé comment avoir ce que je cherche en un seul code css.. ce n'est peut-être pas possible après tout...
neog a écrit :
mais j'ai pas trouvé comment avoir ce que je cherche en un seul code css..

Qu'est-ce à dire, « un seul code css » ? Tu veux créer un style unique (une classe CSS) et l'appliquer à chacun des trois blocs ? Ça n'est effectivement pas possible.

À vrai dire, je ne vois pas trop en quoi ça serait une contrainte d'avoir trois styles différents pour les trois blocs. À part les trente secondes que ça demande pour les écrire, en quoi est-ce problématique ?
(Je vois bien un cas : un contenu généré à partir d'un CMS, sans que l'on puisse facilement automatiser l'application de telle ou telle classe aux éléments.)

Sinon, pour la culture générale des CSS : il me semble que ça doit être possible avec des blocs en display: inline-block et un conteneur en text-align: center. Mais pas compatible IE et Firefox, à priori. À tester dans Opera, si on veut voir ce que ça peut donner (sans garantie que ça marche).
J'y pense : si ta crainte est de devoir multiplier le code CSS d'éléments ayant des styles proches (à l'exception du positionnement), une solution simple :
[b]HTML :[/b]
<div class="boite" id="gauche">...</div>
<div class="boite" id="centre">...</div>
<div class="boite" id="droite">...</div>

[b]CSS :[/b]
div.boite {
	/* propriétés de mise en forme communes */
}
div#gauche {/* Propriétés de positionnement spécifiques */}
div#centre {/* Propriétés de positionnement spécifiques */}
div#droite {/* Propriétés de positionnement spécifiques */}

Une variante possible :
<div class="boite gauche">...</div>
<div class="boite centre">...</div>
etc.

(Rappel : on peut tout à fait attribuer plusieurs classes à un même élément.)
je cherchais juste à ne pas alourdir la taille du fichier CSS...je sais que ce n'est que quelques caractères mais je suis un peu perfectionniste Smiley cligne

je pense que je vais opter pour la dernière solution Smiley smile en passant par une classe et un id unique par boite

merci de vos lumières
Smiley ravi
neog a écrit :
je cherchais juste à ne pas alourdir la taille du fichier CSS...je sais que ce n'est que quelques caractères mais je suis un peu perfectionniste Smiley cligne

Ne pas laisser la satisfaction du joli code se mettre en travers du code efficace. Smiley cligne
Sujet clos
Aller à