Mise en page et taille en %

**xxkirastarothxx** · 03/08/2009, 14h38

Bonjour à tous

Déçu aujourd'hui car je m'aperçois que je suis bien moins performant en mise en page qu'en php, 'lol'
Je n'arrive pas a mettre ma page correctement en place.
Enfin... si j'y arrive, mais uniquement en taille fixe, le soucis c'est que je dois créer quelques design en taille dynamique (100%).

ce que je voudrais:

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
    Body
width: 100%;  (de la page, ni plus ni moins) ^^
height: auto; (nécessaire à l affichage)
_________________________________.
|               HEAD             |
|    width: 100% / height 200px  |
|________________________________|
| menu        |       contenu    |
|             |                  |
| width:200px | width:le reste   |
| height:     | height:nécessaire|
| jusquen bas | à l affichage    |
|et scroll si |                  |
| necessaire; |                  |
| ne doit pas |                  |
| etre plus   |                  |
| grand       |                  |
| que contenu |                  |
|_____________|__________________|
|             Footer             |
|        comme le header         | 
|________________________________|

mon code actuel:

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
<head>
	<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
	<div id='div_princ'>
		<div id='ged_title'>HEADER</div>
		<div id='ged_conteneur'>
			<div id='menu'>
				<ul>
					<li><a href='#'>MENU</a></li>
				</ul>
			</div>
			<div id='contenu'>
				CONTENU<br>
			</div>
		</div>
		<div id='ged_propriety'>FOOTER</div>
	</div>
</body>

et le css qui va avec:

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
div#ged_title {
	height:50px;
	background-color:#00CCFF;
}
 
div#div_princ {
	background-color:#00FFFF;
}
 
div#ged_conteneur {
	background-color:#FF00FF;
	clear:both;
	height: 50%;
}
 
div#menu {
	overflow:scroll;
	float:left;
	width:200px;
	height:100%;
	margin-right: 10px;
	background-color:#FF6699;
}
 
div#contenu {
	background-color:#FFCC00;
	padding: 10px;
	height:100%;
}
div#ged_propriety {
	clear:both;
	height:50px;
	background-color:#00FF00;
}

Le problème:
lorsque mon div "contenu" se remplis, le menu de gauche reste à sa taille et ne s'adapte pas au div:

http://imagik.fr/view-rl/100453

j'ai déjà reussis jusque là, mais ce dernier point me bloque, alors un petit coup de mains serai le bienvenue

sacha69 · 03/08/2009, 15h02

Salut,

Je vois 2 solutions possibles:

La 1ere, tu appliques une hauteur en dur à ton menu (genre 500px ou plus, c'est toi qui vois) mais si ton contenu est plus long que 500px, la hauteur du menu ne suivra pas, donc pas forcément top.

La 2eme, tu mets ce que tu as a mettre dans ton menu, et tu appliques un fond de la même couleur que le fond de ton menu à ton div ged_conteneur, jusqu'au pied de page.
Il te suffit ensuite d'appliquer un fond d'une autre couleur à ton div contenu si tu veux pas que le fond du menu lui soit appliquer, ce qui devrait donner un truc du genre :

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
  _________________________________.
|               HEAD                |
|    width: 100% / height 200px     |
| __________________________________|
 ___________________________________                                 
|       Global de la meme couleur   |
|        de fond que ton menu       |
|                                   |
|  |   menu      |       contenu 
   |               qui aura une autre
                    couleur de fond 
|  |             |                  |
|  | width:200px | width:le reste   |
|  | height:     | height:nécessaire|
|  | jusquen bas | à l affichage    |
|  |et scroll si |                  |
|  | necessaire; |                  |
|  | ne doit pas |                  |
|  | etre plus   |                  |
|  | grand       |                  |
|  | que contenu |                  |
|______________________________________
   Le global s'arrete avant le footer
  ___________________________________
   |             Footer             |
   |        comme le header         | 
 __|________________________________|

**xxkirastarothxx** · 03/08/2009, 15h12

ah! je vais essayer ça.
mais comme le menu est scrollé, les scroll n'iron pas jusqu'en bas, juste le backgroud color ?

sinon, malgrès les recommandations, je vais retourné à mes table, c'est quand m^me moins casse c***es

sacha69 · 03/08/2009, 15h19

Ton background-color va aller jusqu'en bas, ton menu va rester tel qu'il est. Ici, tu rajoutes juste un background-color pour ajouter un prolongement à ton menu

**xxkirastarothxx** · 03/08/2009, 15h48

Ouais c'est bien ce qu'il me semblais... donc ce n'est pas ce que je cherche ^^
Ce que je voudrai c'est que le div (scrollé donc) prenne la taille de son div parent, ça devrais pourtant être simple ^^ (avec ihnerit ça ne fonctionne pas)
Y'a t'il une solution ?

Sinon, vive les norme W3C qui ne permettent pas de tout faire...

squelette en Div normalisé: 6h, et ça marche pas
squelette en table (avec quelques row et colspan), 30min et tout fonctionne...

Et après tout le monde conseil de se normaliser... mouarf

; moi ça me dérange pas... du moment qu'on peut faire ce qu'on veut...
Table powa: pas conforme... mais simple et précis.

Ps: maiheuuu... à la base, les tables ne sont pas déconseillé par-ce qu'il fallait qu'ils soient complètement chargé avant de s'afficher ?
Si je dis pas de bêtise... ce n'est plus le cas maintenant (en tout cas dans FF3, pas test sous ie (et rien à f****, boycote powa xD)) donc quel est la raison du "déconseil" des table ?

sacha69 · 03/08/2009, 16h04

Dernière idée mais je me trompe peut être ... Ton div "ged_conteneur" à une height de 50%.

Tu indiques à ton div "menu" une hauteur de 100%, or je crains que ton menu prenne 100% des 50% de son div parent.. si tu changes cette hauteur, il se peut que ton menu prenne toute la hauteur de la page.

Mais je suis pas sure à 100%

Mise en page et taille en %

CSS

Vue hybride

Discussions similaires

Partager

Partager