Adaptation auto de la hauteur d'un div pour un menu

**aloisio11** · 02/05/2012, 10h36

Bonjour à tous,

Après avoir bien galérer à essayer de faire ce que je veux je vient vous voir

J'aimerais simplement faire ce genre de mise en page avec des Div

Mon problème vient des menus. Il faudrait que le "Menu Haut" est une hauteur fixe et que le "Menu Bas" prenne tout le reste de la hauteur quand le contenu prends plus de place en hauteur.

Ça parait assez basique mais honnêtement je sèche là

Merci d'avance

**oceane751** · 02/05/2012, 13h31

pour menu haut tu mets un height, pour définir la hauteur
et tu mets un

Code :

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

overflow:hidden;

à l'ensemble de ta div qui regroupe les hauts et contenu

**aloisio11** · 02/05/2012, 15h16

Parfait merci beaucoup de ta part

J'ai maintenant un autre souci de compatibilité.
J'ai un affichage fixe de 1024px et je souhaite que cela soit centré dans le navigateur. J'ai donc fait ce code qui fonctionne parfaitement sur IE et FF mais le sous Chrome le centrage ne se fait plus et tout est à gauche.

Par contre si sur la <table j'enlève border="0" ou cellpadding="0" ça fonctionne mais du coup j'ai une bordure ou un espacement que je ne veut pas.

Je ne comprends plus rien, comment puis-je faire ?

Voici mon code

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <title>Nouveau design</title>
 
        <style type="text/css" media="all">
            body {
                font-family:Verdana;
                margin: 0;
                padding: 0;
            }
 
            form.noborder {
                margin:0;
                padding:0;
            }
 
 
 
            td#tdContenuSite {
                width:1024px;
                height: 960px;
                vertical-align:top;
            }
 
            td#tdGauche {
	            background-color:#DDDDDD;
            }
 
            td#tdDroite {
	            background-color:#DDDDDD;
            }
 
 
 
            div#dvBandeau {
                width:1024px;
                height:171px;
                background-image:url('images/Cadre/Old/Haut.jpg');
                background-repeat:no-repeat; 
            }
 
            div#dvCentre {
                overflow:hidden;
            }
 
            div#dvMenu {
                float:left;
                width:160px;
                height:756px;
                background-color:#FF6699;
            }
 
            div#dvMenu_haut {
                width:160px;
                height:756px;
                background-image:url('images/Cadre/Old/Gauche.jpg');
            }
 
            div#dvMenu_bas {
                width:160px;
                height:100%;
                background-image:url('images/Cadre/Old/GaucheBas.jpg');
                background-repeat:repeat-y; 
            }
 
            div#dvContenu {
                float:left;
                width:864px;
                height:756px;
                background-image:url('images/Cadre/Old/BordureDroite.jpg');
            }
 
            div#dvPied {
                clear:both;
                width:1024px;
                height:33px;
                background-image:url('images/Cadre/Old/Bas.jpg');
            }
        </style>
    </head>
    <body>
        <table border="0" cellspacing="0" cellpadding="0" width="100%">
            <tr>
                <td id="tdGauche"></td>
                <td id="tdContenuSite">
                    <div id="dvBandeau"></div>
                    <div id="dvCentre">
	                    <div id="dvMenu">
		                    <div id="dvMenu_haut"></div>
		                    <div id="dvMenu_bas"></div>
	                    </div>
	                    <div id="dvContenu">
	                    </div>
	                </div>
	                <div id="dvPied"></div>
                </td>
                <td id="tdDroite"></td>
            </tr>
        </table>
    </body>
</html>

Merci d'avance

Invité · 02/05/2012, 15h40

Bonjour,
tu as certainement lu ce tuto : Div et CSS : une mise en page rapide et facile

Alors pourquoi utiliser encore une <table> pour la mise en page ?!?

Pour centrer horizontalement l'ensemble :

Code :

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

1
2
3
4
5
<body>
<div id="centrage">
	<! [... tous les autres <div> du site ... ] -->
</div>
</body>

Code :

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

1
2
3
4
#centrage {
	width:1020px;
	margin:0 auto;
}

**aloisio11** · 02/05/2012, 15h55

Ca fonctionne très bien si on a un "width" précis pour le "centrage".
Mais j'aimerais mettre width:100%; pour pouvoir m'adapter à toutes les largeurs mais cela ne fonctionne pas.

Comment je dois faire dans mon cas ?

Invité · 02/05/2012, 17h31

Envoyé par aloisio11

J'ai un affichage fixe de 1024px et je souhaite que cela soit centré dans le navigateur.

J'ai répondu à cette problématique.

**aloisio11** · 03/05/2012, 09h39

Au temps pour moi ;-)

Merci bien

**aloisio11** · 04/05/2012, 14h17

Après 1 jour de pinaille je reviens sur mon 1er problème.
Je ne comprends pas pourquoi cela ne fonctionne pas

Je ne sais plus quoi faire.

Pourquoi sur ce design la div du menu (dvMenuListe) ne pousse pas le bas de page (dvPied) ?
http://www.ultras-tifos.com/Test/Design.html

Et inversement quand c'est le contenu (dvContenu) qui pousse vers le bas
http://www.ultras-tifos.com/Test/Design2.html

1000 merci d'avance

Invité · 04/05/2012, 19h33

Bonjour,
1/ supprime du CSS les background contenant "GaucheBas.jpg" et "BordureDroite.jpg"
2/ Fusionne les images "GaucheBas.jpg" et "BordureDroite.jpg" en une seule image (nommée par ex. "fonddvCentre.jpg")
3/ Et applique-la sur : <div id="dvCentre"> en repeat-y;

Code :

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

#dvCentre { background:url('../images/Cadre/fonddvCentre.jpg') repeat-y;

**oceane751** · 04/05/2012, 19h50

Envoyé par jreaux62

Bonjour,
1/ supprime du CSS les background contenant "GaucheBas.jpg" et "BordureDroite.jpg"
2/ Fusionne les images "GaucheBas.jpg" et "BordureDroite.jpg" en une seule image (nommée par ex. "fonddvCentre.jpg")
3/ Et applique-la sur : <div id="dvCentre"> en repeat-y;

Code :

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

#dvCentre { background:url('../images/Cadre/fonddvCentre.jpg') repeat-y;

bonne option supplémentaire !
mais s'il ne sait pas se servir de toshop...

**aloisio11** · 07/05/2012, 13h59

Envoyé par jreaux62

Bonjour,
1/ supprime du CSS les background contenant "GaucheBas.jpg" et "BordureDroite.jpg"
2/ Fusionne les images "GaucheBas.jpg" et "BordureDroite.jpg" en une seule image (nommée par ex. "fonddvCentre.jpg")
3/ Et applique-la sur : <div id="dvCentre"> en repeat-y;

Code :

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

#dvCentre { background:url('../images/Cadre/fonddvCentre.jpg') repeat-y;

En effet c'est déjà plus propre ainsi mais cela ne résout toujours pas le problème.
Sur cette page le menu de gauche est toujours coupé et ne pousse pas le reste vers le bas.
Qu'est ce qui ne va pas dans mon CSS ?

Invité · 07/05/2012, 14h02

"le menu de gauche est toujours coupé et ne pousse pas le reste vers le bas" ?

Que veux-tu dire par là ?

Quel doit-etre le comportement "normal" ?

**aloisio11** · 07/05/2012, 14h07

Le menu n'est pas affiché en entier, la catégorie "Tablettes" n'est pas la dernière catégorie il y en a 2-3 autres après qui ne sont pas affichées.
D'ailleurs sur la bordure rouge, que j'ai mis pour visualisé le menu, on ne voit pas le bas. En fait le menu, au lieu de poussé le pied de page il se cache dessous.

Invité · 07/05/2012, 14h26

VU.

sur #dvMenuGauche et #dvMenu_haut :
remplacer height:756px; par min-height:756px;

**aloisio11** · 07/05/2012, 14h36

Merveilleux !!!
Merci beaucoup de m'avoir aidé

Adaptation auto de la hauteur d'un div pour un menu

Dimensionnement en CSS

Discussions similaires

Partager

Partager