Positionament de Bloc

Comment centré un bloc

@zerty21

4 mai 2006 à 14:29:23

Bonjours

tous est dand le titre

Comment centré un bloc en CSS à part margin:auto;

Anonyme

4 mai 2006 à 15:15:28

Ben tu peux utiliser un margin-left pour centrer ton bloc par rapport à la gauche

Gurthang

4 mai 2006 à 16:03:17

Le centrer par rapport à quoi ?

@zerty21

4 mai 2006 à 17:25:58

Par rapport à la page

comme ca, sauf que c'est un bloc qui est dans un autre bloc

@zerty21

5 mai 2006 à 13:52:21

Um petit UP

Gurthang

5 mai 2006 à 18:33:48

Tu peux mettre : text-align: center;
Ou alors tu mets un attribut width: XXpx; et un margin: auto;

@zerty21

6 mai 2006 à 13:31:59

OK je vais essayer

EDIT : Le probleme c'est que sa marche que quand je lui met un width: alors que selon le titre que je met le bloc n'aura pas la mêmes langueur donc je ne pas lui definir une valeur car elle change tous le temps.

Anonyme

6 mai 2006 à 13:39:45

Salut,

sinon il y a une autre méthode mais tout dépend du type de design que tu fais...Ce n'est pas forcément adapté à tous les cas mais c'est parfois utile

.

Tu donnes une largeur (width) à ton bloc et ensuite tu appliques tout simplement un margin:auto; .
Cependant je le répète ce n'est pas adapté pour tous les cas

.

EDIT: Ah pardon je n'avais pas vu que Gurthang l'avait proposée désolé.

@zerty21

6 mai 2006 à 13:41:50

Oui mais je vient de dire que je ne peut pas lui apliqué de width: vu que la valeur change tous le temps.

EDIT : Je vous donne le code.

function titre($titre, $sous_titre) // Titre et sous titre bien décorer
{
echo'
<div id="titre">
<div class="debut">
</div>
<div class="espace_titre1">
<div class="fond1">
<p>'.$titre.'</p>
</div>
</div>
<div class="espace">
</div>
<div class="espace_titre2">
<p>'.$sous_titre.'</p>
</div>
<div class="fin">
</div>
</div>
';
}

Equivalent de :

<div id="titre">
<div class="debut">
</div>
<div class="espace_titre1">
<div class="fond1">
<p>Titre</p>
</div>
</div>
<div class="espace">
</div>
<div class="espace_titre2">
<p>Sous_titre.</p>
</div>
<div class="fin">
</div>
</div>

#titre
{
width:700px;
height:51px;
margin:auto;
margin-top:10px;
margin-bottom:10px;
border:1px solid gray;
}

#titre .debut
{
width:17px;
height:51px;
background-image:url("images/titre/debut.png");
background-repeat:repeat-x;
float:left;
}

#titre .espace_titre1
{
height:51px;
background-image:url("images/titre/fond1.png");
background-repeat:repeat-x;
float:left;
}

#titre .fond1
{
height:51px;
background-image:url("images/titre/espace_titre1.png");
background-repeat:no-repeat;
background-position:center;
float:left;

font-size:25px;
color:gray;
}

#titre .fond1 p
{
margin-top:8px;
}

#titre .espace
{
width:52px;
height:51px;
background-image:url("images/titre/espace.png");
background-repeat:repeat-x;
float:left;
}

#titre .espace_titre2
{
height:51px;
background-image:url("images/titre/espace_titre2.png");
background-repeat:repeat-x;
float:left;

font-size:20px;
color:black;
}

#titre .espace_titre2 p
{
margin-top:15px;
}

#titre .fin
{
width:121px;
height:51px;
background-image:url("images/titre/fin.png");
background-repeat:repeat-x;
float:left;
}

@zerty21

7 mai 2006 à 18:19:36

Petit UP

WhyNot

7 mai 2006 à 18:37:16

Ben il faut donc faire un text-align: center;

Si tu ne veux pas qu'il prenne toute la page, un gros padding à gauche et à droite

@zerty21

7 mai 2006 à 20:07:35

Mais sa fonctionne pas text-align:center; o_O

@zerty21

8 mai 2006 à 14:23:19

Un petit UP :-°

atly

8 mai 2006 à 14:35:39

Si, ça fonctionne, c'est toi qui l'utilises mal.

@zerty21

8 mai 2006 à 15:54:47

comment doit-je l'utiliser alors :euh:

atly

8 mai 2006 à 15:56:49

Tu l'as utilisée comment surtout ?

@zerty21

8 mai 2006 à 16:03:28

C'est bon j'ai trouver une solution, en faite j'avais plein de float:left; ce qui empechais le centrage mais qui permettaitde mettre tous les bloc sur la mêmes ligne, en faite j'ai fait un tableau et sa marche.