Question en css

[salva]

Se sont deux blocs l'un à côté de l'autre et je souhaiterais les voir en position centrée (horizontalement). Et je sèche. Please.

.bloc1 {
vertical-align : top;
background-color: #F1F5FE;
height: 100%;
width: 200px;
float: left;
margin-left: 50px;
}
.bloc2 {
vertical-align : top;
background-color: #F1F5FE;
height: 100%;
width: 200px;
float: left;
margin-left: 10px;
}

 

[dd32]

peut-être un autre bloc conteneur avec un clear:both ?

 

[Jul-Wup]

Se sont deux blocs l'un à côté de l'autre et je souhaiterais les voir en position centrée (horizontalement). Et je sèche. Please.

Hormi en les plaçant dans un bloc englobant les deux, je ne vois pas.

 

[salva]

Hormi en les plaçant dans un bloc englobant les deux, je ne vois pas.

C'est le param qui centre que je ne connais pas.
C'est pour obtenir le même affichage sous FF et IE6.

 

[Toutou-Fr]

pour centrer on utilise

margin-left:auto;
margin-right:auto;

en les mettant dans un bloc conteneur centré à l'aide de ces params, ca devrait fonctionner

 

[salva]

Merci :wink:

 

[salva]

J'ai procéder comme suit.

Le code:
<div class="bloc0">

<div class="bloc1"></div>
<div class="bloc2"></div>

</div>

Le css:
.bloc0 {
margin-left:auto;
margin-right:auto;
}
.bloc1 {
vertical-align : top;
background-color: #F1F5FE;
height: 100%;
width: 200px;
float: left;
padding-left: 5px;
}
.bloc2 {
vertical-align : top;
background-color: #F1F5FE;
height: 100%;
width: 200px;
float: left;
margin-left: 20px;
padding-left: 5px;
}

Mais l'ensemble reste collé à gauche.

 

[Toutou-Fr]

et avec

.bloc0 {
margin-left:auto;
margin-right:auto;
width:400px;
}

?

 

[salva]

C'est bon uniquement sous FF.
Reste collé à gauche sous IE6

.bloc0 {
clear : both;
width : 420px;
margin-left : auto;
margin-right : auto;
}
.bloc1 {
vertical-align : top;
background-color: #F1F5FE;
height: 100%;
width: 200px;
float: left;
}
.bloc2 {
vertical-align : top;
background-color: #F1F5FE;
height: 100%;
width: 200px;
float: left;
margin-left: 20px;
}

Visible ici http://www.arkenia.com/plan-du-site.html

 

[dd32]

Et si tu mets le width en % ?

 

[aphoris]

marge négative

bonjour,

concernant ton ptobleme tu pourrais peut etre essayer un conteneur principal dans lequel tu inclus tes deux blocs. ( jusque la rien de differend)

l'astuce consiste a centrer le conteneur principal avec des marges negative

exemple pour un conteneur de 800 px de large :

#conteneur { position: relative;
left: 50%;
width: 800px;
height: auto;
float: left;
margin-left: -400px; }

voila j espere que cela pourra t aider...

ps: ca parait du magouillage mais ca marche sous IE et Firefox

 

[salva]

Toujours pas
Placer les deux blocs dans une table est la seule solution testée qui fonctionne (sous FF et IE6).

 

[Toutou-Fr]

Tu trouveras sur cette page comment corriger le bug de centrage IE . Mais également d'autres très bons tutoriaux..c'est une référence en CSS ;-)