Petit souci de compréhension de la Position [Résolu]

[zooffy]

Bonjour à tous.

J'ai un petit souci de compréhension de la Position dans les classes CSS.

Voici le bout de code HTML que je mets en place.

Code :

1
2
3
4
5
 
<div style="border:solid 1px Green;height:188px;">
            <div id="divDPE" runat="server" class="IMMO_divDPE"></div>
            <div id="divGES" runat="server" class="IMMO_divGES"></div>
        </div>

Donc un Div qui en contient deux autres.
Les classes CSS actuelles sont les suivantes :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
.IMMO_divGES
{
    width:30px;
    height:10px;
    position:relative;
    vertical-align:top;
    left:550px;
    top:0px;
 
}
.IMMO_divDPE
{
    width:30px;
    height:10px;
    position:relative;
    vertical-align:top;
    left:250px;
    top:0px;
 
}

Et pourtant les DIV intérieurs sont l'un en dessous de l'autre.

J'en déduis que la Position:Relative s'applique au contrôle HTML juste avant (j'ai inversé les deux pour tester !!).
Ce que je voudrais c'est que les deux soient relatifs au Div de dessus et je ne sais pas comment faire.

Pouvez vous m'aider ?

[ornitho13]

Quand tu utilises des "top", "left", "right" et bottom, c'est quand tu utilises "position:absolute"
Si tu l'utilises dans le cas d'une position relative, le comportement que tu observes est normal.

Si tu décides d'utiliser le position:absolute, il faut que le parent soit en position:relative pour que ses enfants soient en absolue par rapport à lui.

Exemple avec ton code:

Code html :

1
2
3
4
5
 
<div class="wrapper">
       <div id="divDPE" runat="server" class="IMMO_divDPE">qsd</div>
       <div id="divGES" runat="server" class="IMMO_divGES">qsd</div>
</div>

Code css :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
.wrapper{
	border:solid 1px green;
	height:188px;
	position:relative;
}
.IMMO_divDPE {
    width:30px;
    height:10px;
    position: absolute;
    left:250px;
    top:0px;
 
}
.IMMO_divGES {
    width:30px;
    height:10px;
    position: absolute;
    left:550px;
    top:0px;
 
}

Un conseil, essaye de ne pas utiliser de style inline (c'est à dire pas d'attribut "style" dans le tag HTML mais utilise une classe à la place).

[zooffy]

Ok, merci pour ton aide.

Donc je prenais en fait le problème à l'envers.

Merci pour le conseil, mais je le fait déjà, c'est juste que quand je développe, je colle un attribut Style pour que ce soit plus pratique, aprés, je bascule tout en classe, bien rangées, avec des commentaires dans un fichier CSS.

Bonne continuation.