28173 sujets

CSS et mise en forme, CSS3

Bonjour à tous,
Voila j'ai une petite question de présentation :
Je cherche a afficher des boites de types div dans une page. Celles-ci doivent avoir la même largeur et être centré sur la page (comme pour l'accueil personnalisé de google pour ceux qui connaissent).
Je suis arrivé a avoir des div de même taille côte a côte de même taille, mais je n'arrive pas a centrer le tout dans mon conteneur. De plus, si je met une taille de 50% a mais bloc (avec une marge de 0, et un padding de 0 pour mon conteur), ceux-ci ne se mettent pas sur la même ligne et je ne vois pas pourquoi.
Merci par avance de votre aide.
Modifié par baptistoux (30 Aug 2006 - 18:26)
Peut etre que cela va répondre à ta question

Les divs
<div class="container">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>


La css
<style type="text/css">
.container {
width:450px;
margin-left:auto;
margin-right:auto;
}
.block {
float:left;
width:150px;
height:150px
}
</style>
Merci pour ta réponse (très rapide), mais je cherche tout d'abord a centrer les div se trouvant sur la même ligne par rapport au conteneur. Or si je met dans la définition de mon conteneur :
.conteneur{
	text-align:center;
        border: 1px solid #336600;
	background-color: white;
	min-height:400px;
	width: 96%;
        padding:0px;
	margin: 0 auto;
}
.boite{
	text-align:left;
	float:left;
	width:48%;
	padding: 8px;
}


<div class="conteneur">
<div class="boite">
Un petit texte.
</div>
<div class="boite">
Un autre petit texte a côté
</div>
</div>

Mes div ne sont pas centrées par rapport au conteur.
Modifié par baptistoux (30 Aug 2006 - 15:19)
baptistoux a écrit :
De plus, si je met une taille de 50% a mais bloc (avec une marge de 0, et un padding de 0 pour mon conteur), ceux-ci ne se mettent pas sur la même ligne et je ne vois pas pourquoi.

Les blocs eux-même doivent bien faire 50% de la largeur, et pas un demi-pixel de plus. Ils ne doivent donc pas avoir, en largeur :
- ni marges ;
- ni padding ;
- ni bordures.

Pour centrer des éléments de type bloc sur une même ligne à l'intérieur d'un conteneur, c'est très difficile actuellement en CSS (mauvaise implémentation de display: inline-block par IE, pas d'implémentation tout court pour Mozilla).
Les deux techniques utilisables sont donc :
- créer un bloc conteneur à l'intérieur du conteneur (le redoubler), lui donner une largeur fixe, et le centrer avec la technique des marges automatiques (nécessite de connaître la largeur totale des éléments à aligner) ;
- utiliser un tableau d'une seule ligne, avec autant de cellules que de blocs à aligner et centrer.