Discussion :

[Shr3ck]

Bonjour tout le monde !

Voila j'ai un soucis mon objectif est de pouvoir placer en cercle des DIV autour d'un autre le DIV.
Actuellement j'ai 3 DIV à mettre autour d'un 4ème.
Pour info tout ce beau monde se trouve dans un Fieldset.

Le résultat que je recherche est le suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
XxxDIV1xxX                               XxxDIV2xxX
 
                    XxxDIVCENTRExxX
 
                        XxxDIV3xxX

Est actuellement j'ai :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
Soluce 1 :
XxxDIV1xxX                               XxxDIV2xxX
 
XxxDIVCENTRExxX XxxDIV3xxX
 
Soluce 2 :
XxxDIV1xxX XxxDIVCENTRExxX               
                                                  XxxDIV2xxX
 XxxDIV3xxX

Est voici mon code :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
#DIV1
{
position:static;
float:left;
left:0px;
top:0px;
margin-left:0px;
margin-right:0px;
margin-top:0px;
margin-bottom:0px;
}
 
#DIV2
{
position:static;
left:0px;
top:0px;
margin-left:300px;
margin-right:0px;
margin-top:0px;
margin-bottom:0px;
}

Je n'en mets que deux car DIV3 et 4 sont identique, et qu'ils sont eux-même identique à DIV2 sauf : margin-left:0px;

Explication :
La soluce 1 est obtenue avec le code ci-dessus
La soluce deux est obtenue si je place un float (que ce soit gauche ou droite) en DIV2.

J'ai beau jouer avec les marges (qui soit dit en passant une fois sur deux ne déplace pas le DIV) je n'arrive pas à avoir ce que je souhaite.

Quelqu'un aurait-il une idée sur la question ??

[addock]

Pour obtenir ce que tu souhaite, tu peux organisé tes div selon 3 niveaux :
div1 et div2 pour le 1er niveau.
div centre pour le 2eme niveau.
div3 pour le 3eme niveau.

Code html :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<div id="div1">
     XxxDIV1xxX
</div>
<div id="div2">
     XxxDIV2xxX
</div>
<div class="clear"></div>
<div id="div_centre">
     XxxDIV_CENTRExxX
</div>
<div id="div3">
     XxxDIV3xxX
</div>

Code css:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
.clear{
     clear:both;
}
#div1{
     float:left;
}
#div2{
     float:left;
}

A toi de régler les padding et margin pour les positionner précisement..

[Shr3ck]

En effet cela fonctionne !

Merci beaucoup !!!