Discussion :

[Yali]

Bonsoir,

J'utilise deux div pour séparer le menu (partie gauche) du reste de mon site (partie principale).

Dans cette partie principale j'inclue le plus souvent soit des "div" soit des "ul".

Donc j'ai en gros dans la partie principale soit :

Code :

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

1
2
3
4
5
6
 
<div class="centre_principal">
<div class ="ligne">
...
</div>
</div>

ou soit

Code :

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

1
2
3
4
5
 
<div class="centre_principal">
<ul class="formulaire">
</ul>
</div>

Dans aucun des blocs je ne specifie de hauteur dans mes classes CSS.
Dans le 1er cas (div imbriqué), le 1er bloc englobe bien le second quelque soit la hauteur des données contenus dans le second bloc.
Par contre dans le second cas mon 1er bloc n'englobe pas le second bloc "ul" (qui est comme un tableau avec un fond et une bordure).

Comment faire pour que le second cas se comporte comme le 1er cas sans à avoir à spécifier dynamiquement une hauteur via un "style" à mon 1er bloc ?

Suis je clair ?

mes classes CSS :

Code :

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
24
25
26
27
28
29
30
31
32
33
 
 
.centre_principal {
margin-top: 20px;
margin-left: 210px;
margin-right: 10px;
border: 1px solid #000000;
background-color: #c5cae2;
font-family: verdana, arial;
font-size: 80%;
text-align: center;
width:1050px;
}
 
.formulaire {
list-style-type: none;
position: absolute;
margin-left: -140px;
width: 280px;
background-color: #7B89A9;
border: 1px solid #000000;
text-align: left;
color:#FFFFFF;
padding:5px;
font-family: arial;
font-size: 12px;
}
 
.ligne
{ 
clear:both;
text-align:center;
}

Merci

[Ricou13]

Salut,

c'est normal, tu positionnes ".formulaire" sans avoir positionné ".centre_principal". Comme le positionnement se fait par rapport au premier ancètre positionné et que tu n'en a pas, le positionnement se fait par rapport au body.

Ensuite, même en mettant

Code :

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

position: relative;

sur ".centre_principal", ".formulaire" sera toujours à -140px à gauche de son conteneur.

Si l'idée était de le centrer dans son conteneur, il manque un

Code :

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

left: 50%;

[Yali]

Bonjour,

Le formulaire est bien centré, là n'est pas le problème.
Le problème est que la classe "centre_principal" (pas de hauteur spécifiée) qui possède une bordure n'englobe pas le formulaire.

La classe "ligne" me sert à faire des tableaux avec des "ul,li". Dans ce cas là la classe "centre_principal" englobe bien le tableau quelquesois le nombre de ligne du tableau.

Donc ma question était que dois je faire pour que la classe "centre_principal" englobe bien mon formulaire sans que j'ai a spécifié la hauteur du bloc "centre_principal" dans le fichier CSS.

Je ne comprends pas pourquoi dans un cas cela fonctionne et pourquoi pour les formulaire cela ne fonctionne pas...

Merci

[Ricou13]

T'aurais pas une URL à nous filer parce que je ne comprends donc pas ce que tu veux dire par "n'englobe pas"

[Yali]

Bonsoir,

J'ai résolu mon problème qui était lié au tag :

Code :

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

position: absolute;

que j'avais utilisé pour faire un centrage.

Je l'ai supprimé et me suis débrouillé pour centrer mon formulaire.

Merci[/code]

[Ricou13]

Qu'est ce que j'avais dit !

[Yali]

Bonjour,

Juste pour dire comment j'ai résolu mon problème, j'ai rajouté aussi une classe :

Code :

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

1
2
3
space {
 clear:both;
}

via un

Code :

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

1
2
3
4
5
6
7
 
<div class="centre_principal">
<ul id="formulaire">
....
</ul>
<div class="space">&nbspc;</div>
</div>

que je rajoute à la suite du formulaire pour faire glisser vers le bas la taille du bloc div pour qu'il entoure bien maintenant tout le formulaire.