Blocs de même hauteur

**arnaudrou** · 22/07/2006, 20h32

Hello,

je suis en train de coder coder mon design dont voici un apercu (enfin ce que je veux): http://www.expert-gamers.com/teamfifa2004/desibug.jpg

Le bloc "A la une" est extensible le problème est quand j'enleve ou je mets du contenu supplémentaire dans ce bloc les colones de droite et gauche ne s'adpatent pas à la hauteur du centre (pour cause il ont une hateur fixe)

Apercu du bug: http://www.expert-gamers.com/teamfifa2004/bug.jpg

Code 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
34
 
.droite {
 
margin-left: 778px;
 
margin-top: 5px;
 
width: 181px;
 
height:1344px;
 
background-color: #333333 ;
 
color: white;
 
 
 
}
 
 
 
 
 
.gauche {
 
margin-top: -1344px ;
 
width: 181px;
 
height:1344px ;
 
background-color: #333333;
 
}

La configuration de mon design ne me permet pas de tromper avec une meme couleur de fond, comment pallier au problème?

Merci d'avance

**Hibou57** · 23/07/2006, 01h17

Alut, Bonjour, Bonsoir,

Si je te comprends bien, le problème trouve sa source avec la collone centrale... mais tu ne donne pas le code css pour la colonne centrale... donc la source du problème est mal renseignée.. si tu peux en dire plus, ça pourra aider à t'aider.

Ensuite, tu dis que tu ne peux pas jouer avec la couleur de fond ? Je ne comprends pas pourquoi... Tu dis que ton design l'interdit, alors peux tu en dire plus sur ce point du design ?

Même si tu ne donne pas le code pour la colonne centrale, d'aprés l'image du bug, je devine que tu utilise des float left et des float right dans cette colonne. Et dès qu'il le peuvent, il sorte, évidement. Mais ce que je ne comprends pas, c'est pourquoi les deux éléments qui s'echappent en bas, semble avoir perdu leurs contenu, et n'affiche que leur couleur de fond. Peut-être que ce ne sont que deux éléments vides que tu as ajouté à fin de tests.

La solution que j'envisage, serait d'abandonner la stratégie des float (car inévitablement ils s'échapperont toujours). Créer une colonne avec height:auto, et remplire ta colonne centrale avec des paires d'élément inline-box plutôt qu'avec des paires d'éléments float:left et float:right.

Hint : si je peux me permettre une sugestion... tu est en coordonnée relative. Même si là encore tu n'en dis rien, je pense que logiquement dans la flux ta colonne de droite vient aprés celle de gauche, et comme sa position normale est en dessous de celle de gauche, tu est obligé de la remonter de la hauteur de la colonne de gauche (d'où la marge négative).

Donc alors la hauteur de la colonne de gauche ne peut pas être variable. Pour tes colonne droit et gauche, tu pourrais éventuellement je pense, employé des coordonnées absolues (position:absolute).

Voilà mon inspiration à ta lecture...

Peut-être à plus

Bye

**arnaudrou** · 23/07/2006, 09h21

Salut, merci d'avoir pris le temps de répondre,

D'abord voici le code du 1er bloc centrale (celui qui guide les autres autres blocs centrals qui suivent):

Code :

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

1
2
3
4
5
6
7
8
9
.centre1 {
margin-top: -1344px;
width: 575px;
height:36px;
background-image: url('images/titrerubrique.gif');
margin-left: 190px;
border-left: 1px solid black;
border-right: 1px solid black;
}

Je n'utilise pas les éléments float:left et float:right...

Comme je l'ai dis dans le précedent post la config de mon design ne me permet pas d'utiliser une couleur de fond identique a mes colones gauche et droite, en effet la couleur de fond (celle apliqué dans le conteneur avec les 3 colones (le blanc à ranures)) doit être visible entre la colones gauche et le centre, entre le centre et la colone de droite... le problème est que quand j'augmente ou réduit le centre on voit apparaitre la couleur de fond soit sur les cotés (qaund on a depasse la hauteur des colones droite et gauche) soit au centre quand je reduit le centre ....

Merci d'avance pour une solution!

**arnaudrou** · 23/07/2006, 18h13

Voila j'ai mis deux conteneur mais ca marche toujours pas...

en gros sur ma page ca fait:

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
<div class="global">
 
<div class="header"></div>
 
<div class="gauche"></div>
 
<div class="droite"></div>
 
</div>
 
 
 
<div class="global2">
 
<div class="centre"></div>
 
</div>

le css des deux globals:

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
36
37
38
39
40
41
#global2 {
 
margin-top: -1344px ;
 
margin-left: auto;
 
text-align: left;
 
overflow: hidden;
 
width: 575px;
 
background-color: #333333;
 
position: absolute;
 
}
 
 
 
#global {
 
margin-top: 0px;
 
margin-bottom: 10px;
 
position: relative; /* on positionne le conteneur */
 
margin-left: auto;
 
margin-right: auto;
 
text-align: left;
 
width: 959px;
 
overflow: hidden;
 
background-image: url('images/bg.gif');
 
}

voila ce que ca donne (apercu en bas) le centre n'est pas centré...
http://expert-gamers.com/teamfifa2004/designd.jpg

**Candygirl** · 24/07/2006, 15h08

Hello,

Perso je te proposerais la solution suivante, comme montage de base, par exemple:

Un conteneur global contenant:

-1 div avec ton header
-3 div en float left: gauche centre et droite
-1 footer

Le contenur global aurait comme couleur de fond #333333

La colonne gauche et la colonne de droite auraient en image de fond qui ne se répète qu'en x ton fond rayé (adapter la position de départ du fond pour la colonne de droite) avec un padding-top pour voir les rayures.

La colonne centrale avec ton fond rayé qui se répète (ajuster la position de départ pour que le fond continue correctement raport à la colonne gauche) avec padding-top.

Le footer qui contiendrait ton copyright ainsi qu'un clear (sans la vague du bas de colonne centrale qui ferait, elle, partie de la colonne centrale).

**arnaudrou** · 24/07/2006, 17h08

Salut merci pour ta solution!!

Mais en testant jai réussi finalement en fesant:
avec deux conteneur!

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
 
 
#global {
margin-top: 5px;
margin-bottom: 10px;
position: relative; /* on positionne le conteneur */
margin-left: auto;
margin-right: auto;
text-align: left;
width: 959px;
overflow: hidden;
 
}
 
#global2 {
margin-top: -1348px;
margin-bottom: 10px;
position: relative; /* on positionne le conteneur */
margin-right: auto;
margin-left: 181px;
text-align: left;
width: 597px;
overflow: hidden;
background-image: url('images/bg.gif');
}

Merci @+

Blocs de même hauteur

HTML

Vue hybride

Discussions similaires

Partager

Partager