Discussion :

[stefsas]

Bonjour,

Je reviens sur un problème que je viens de constater concernant l'ajustement de la longueur de deux de mes trois colonnes.

J'ai ma page qui découpée en trois zone : zoneDroite - ZoneMilieu - ZoneGauche (tous les trois inclus dans un bloc ZoneCentre) qui sont définies par le code suivant :

Code html :

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

1
2
3
4
5
6
7
<div id="ZoneCentre">
 
   <div id="ZoneGauche"> ... </div>
   <div id="ZoneDroite"> ... </div>
   <div id="ZoneCentre"> ... </div>
 
</div>

avec le code css :

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
24
25
26
27
28
29
30
31
32
33
#ZoneCentre
{
 position: absolute;
 float: left;
 width: 100%;
 height: 90%; 
} 
 
#ZoneGauche
{
 background: url(Images_Projet/Images/gris_350.jpg)  ;
 float:left;
 width: 120px;
 padding:0 8px;
 border-right: solid 2px #AFBAB8; 
 height: 100%; 
 }
 
#ZoneMilieu
{
margin-left:118px;
margin-right:148px;  
} 
 
#ZoneDroite
{
 background: url(Images_Projet/Images/gris_350.jpg)  ;
 float: right;
 width: 150px;
 padding:0 9px;
 border-left: solid 2px #AFBAB8; 
 height: 100%;   
}

Mon problème est que mes zones de gauche et de droite ne s'adapte pas à la longeur de ma zone du milieu, mais vont juste jusqu'au bas de ma page de mon écran (soit la longueur de l'écran).

Je voulais donc savoir comment je pouvais faire pour corriger cela ?
(PS: Le fait de mettre la propriété height à 100% dans zoneCentre ne corrige pas le problème, au contraire)

Merci.

[pop_up]

C'est un problème qui a souvent été posé sur le forum. En faisant une recherche, tu devrais trouver des réponses.

Une div s'adapte à son contenu ainsi, tu ne peut pas dire a tes colonnes de droite et gauche de s'adapter à celle du centre.

Pour ce faire il faut que tu utilises la techniques des colonnes factices

[jbin-1]

pop_up a raison tu ne peux pas adapter la hauteur de tes colonnes latérales en fonction de ta colonne centrale. Une technique simple a mettre en place est d'utilisé une image de fond sur ta div "ZoneCentre", cette image constitué du fond de la colonne gauche + le fond de la colonne centrale + le fond de la colonne de droite simulerait les 3 colonnes (background-repeat: repeat-y).

[stefsas]

Re-bonojur,

J'ai utilisé la méthode des colonnes factices et cela marche bien lorsque la zone du milieu est rempli.

Par contre, si il n'y pas grand chose dedans, les colonnes ne gauche et de droite ont une longueur qui s'adapte juste à la plus grande des trois mais ne vont pas jusqu'en bas de la page. De même, mes filets s'adaptent juste à la longueur de leur contenu.
J'ai pourtant mis height:100% dans le body et HTML mais cela ne marche pas.

Comment je pourrais faire pour que la longeur des trois colonnes arrive bien jusqu'en bas de ma page (même si le contenu est faible) sans devoir fixer une longueur arbitraire en px qui ne s'adaptera pas à tous les types d'écran.

Je vous met mon code, si quelqu'un voit le correctif à faire, merci.

Code HTML :

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

1
2
3
4
5
6
<div id="conteneur"> <div id="conteneurbis">
     <div id="boiteGauche"> <p class="text">
        <uc31:Accueil ID="RedirectAccueil" runat="server" />
        <uc32:Deconnexion ID="Deconnexion" runat="server" /></p></div>
     <div id="boiteDroite"> <p class="text"> <uc90:MenuDetection ID="MenuEtapeDeDetection" runat="server" /></p></div>
     <div id="boiteCentre"> <p class="text">Ici la zone du milieu </p> </div></div>

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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
body, HTML  
 {
  font-size: 100%;   
  height: 100%;
  margin: 0; 
  padding: 0;
  background: url(Images_Projet/Images/gris_198.jpg)  ;
 }
 
#conteneur
{
 background:  url(Images_Projet/Images/gris_3501.jpg) top left repeat-y ;   
 overflow:auto;
 width:100%;
 margin-right: auto;
 margin-left: auto;  
 min-height:100%;
}  
 
#conteneurbis
{
 background:  url(Images_Projet/Images/gris_3502.jpg) top right repeat-y ;   
 overflow:auto;
 width:100%;
 margin-right: auto;
 margin-left: auto; 
 min-height:100%;
}     
 
 
#boiteGauche
{
   float:left;  
   width:118px;
   border-right: solid 2px #AFBAB8; 
   height:100%;   
}  
 
#boiteDroite
{
   float:right; 
   width:148px; 
   border-left:solid 2px #AFBAB8;   
   height:100%;
} 
 
#boiteCentre
{
   margin-left:118px;
   margin-right:148px;
   padding:5px;
   border-left:solid 2px #AFBAB8;
   border-right: solid 2px #AFBAB8;
   /*min-height:700px;*/
   height:100%;
}   
 
.text
{
    margin-top: 1px;
 
}

[tsunamichups]

C'est un problème qui a souvent été posé sur le forum. En faisant une recherche, tu devrais trouver des réponses.

Une div s'adapte à son contenu ainsi, tu ne peut pas dire a tes colonnes de droite et gauche de s'adapter à celle du centre.

Pour ce faire il faut que tu utilises la techniques des colonnes factices

S'est faut, css existe et contient une solution pour parer a ce problème.
display : table; et display : table-cell; permette a tes div ce ce comporter comme des cellule de tableau (table), pour le coups tu retire tes float, pour ta div conteneur tu lui donne le display : table et les autre le display : table-cell
et elle s'adapteront a la taille de la plus grande div (comme les cellule d'une même ligne avec table)

Code :

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

1
2
3
4
5
6
7
8
<div id="ZoneCentre">
 
   <div id="ZoneGauche"> ... </div>
<div id="ZoneCentre"> ... </div>
   <div id="ZoneDroite"> ... </div>
 
 
</div>

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
34
35
#ZoneCentre
{
 position: absolute;
 width: 100%;
 height: 90%; 
dislpay : table;
} 
 
#ZoneGauche
{
 background: url(Images_Projet/Images/gris_350.jpg)  ;
display : table-cell;
 width: 120px;
 padding:0 8px;
 border-right: solid 2px #AFBAB8; 
 height: 100%; 
 }
 
#ZoneCentre
{
width : 400px;
margin-left:118px;
margin-right:148px;  
display : table-cell;
} 
 
#ZoneDroite
{
 background: url(Images_Projet/Images/gris_350.jpg)  ;
display : table-cell;
 width: 150px;
 padding:0 9px;
 border-left: solid 2px #AFBAB8; 
 height: 100%;   
}

dans ce goût la, après tu adapte en fonction de tes besoins.

ps : je pense que revoir un peut les structure de base des page ne te fera pas de mal parce que j'ai vu 2 - 3 petit soucis dans ton css et html qui pourrais générer des conflit sur les vielles versions de navigateur

[Apollinaire]

Bonjour,

Le height dans le body,html fonctionne normalement bien seul mais sinon il faut tester avec le conteneur positionné (absolu ou relatif).

Sans ce height le positionnement en absolu du contenu devrait suffire.

Bonne continuation.

[pop_up]

S'est faut, css existe et contient une solution pour parer a ce problème.
display : table; et display : table-cell; permette a tes div ce ce comporter comme des cellule de tableau (table), pour le coups tu retire tes float, pour ta div conteneur tu lui donne le display : table et les autre le display : table-cell
et elle s'adapteront a la taille de la plus grande div (comme les cellule d'une même ligne avec table)

Oui, mais cela pose encore des problèmes sous IE, notamment IE7.

Je pense que tu trouveras plus de sujets sur ce forum proposant la méthode des colonnes factices que celle de table-cell. Après, je peux me tromper, je n'ai pas la parole d'évangile

[stefsas]

En rajoutant position:relative aux deux conteneurs, cela ne fait qu'ajuster la longueur des colonnes entre elles, mais je n'ai pas une longueur minimale sur la page :

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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
#conteneur
{
 position:relative;   
 background:  url(Images_Projet/Images/gris_3501.jpg) top left repeat-y ;   
 overflow:auto;
 width:100%;
 margin-right: auto;
 margin-left: auto;  
 min-height:100%;
}  
 
#conteneurbis
{
 position:relative;   
 background:  url(Images_Projet/Images/gris_3502.jpg) top right repeat-y ;   
 overflow:auto;
 width:100%;
 margin-right: auto;
 margin-left: auto; 
 min-height:100%;
}     
 
/*Menu de navigation*/
#boiteGauche
{ 
   float:left;  
   width:118px;
   border-right: solid 2px #AFBAB8; 
 
}  
 
/*Menu de fonction*/
#boiteDroite
{
   float:right; 
   width:148px; 
   border-left:solid 2px #AFBAB8;   
 
} 
 
/*Zone du milieu*/
#boiteCentre
{
   margin-left:118px;
   margin-right:148px;
   padding:5px;
   border-left:solid 2px #AFBAB8;
   border-right: solid 2px #AFBAB8;
   min-height:100%;
}

Code HTML :

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

1
2
3
4
5
6
<div id="conteneur"> <div id="conteneurbis">
     <div id="boiteGauche"> <p class="text">
        <uc31:Accueil ID="RedirectAccueil" runat="server" />
        <uc32:Deconnexion ID="Deconnexion" runat="server" /></p></div>
     <div id="boiteDroite"> <p class="text"> <uc90:MenuDetection ID="MenuEtapeDeDetection" runat="server" /></p></div>
     <div id="boiteCentre"> <p class="text">Ici la zone du milieu </p> </div></div>

Et si je met position:absolute à la place, cela m'adapte bien la longueur de mes images, mais pas de mes filets.
Et j'obtiens aussi un double scroll sur les pages où le contenu de boiteCentre est supérieur à la taille de l'écran initial?