problème de hauteur de divs à 100%

**miltonis** · 26/09/2006, 10h14

Bonjour

Je suis en train de refaire les pages d'un de mes sites pour les mettre aux normes W3c (fini les tableaux!)
Je coince depuis quelque temps pour définir la hauteur des divs.

page de test
el le css

La structure de la page exemple est :
Un Conteneur à min-height: 100%;
Dans ce Conteneur il y a trois divs alignés (à gauche me menu, au centre le contenu et à droite liens et images).
J'aimerais que les divs de gauche te de droite prennent la même hauteur que celui du centre qui est en général le plus long.
Mais je n'y arrive pas

le code de la page:

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<body>
<div id="conteneur"><a name="top"></a>
  <div id="titre_theme"><h3>Thème de Rubrique</h3></div>
 
		<div id="header"><img src="Pics/pix_white_menu.gif" height="120" width="710" border="0"></div>
 
		<ul id="haut_index2">
				<li id="li_colors"><img src="Pics/pix_white_menu.gif" width="102" height="15"/></li>
				<li id="li_autre">&nbsp;</li>
				<li class="li_langues"><a href="../index.php" target="_self" onmouseOver="i001.src='../Pics/flag_perou.gif'" onmouseOut="i001.src='../Pics/flag_espagnol0.gif'"><img src="Pics/pix_white_menu.gif" name="i001" border="0" /></a></li>
				<li class="li_langues"><img src="Pics/pix_white_menu.gif" name="i002" border="0" /></li>
				<li class="li_langues"><a href="../index.php" target="_self" onmouseOver="i003.src='../Pics/flag_francais1.gif'" onmouseOut="i003.src='../Pics/flag_francais0.gif'"><img src="Pics/pix_white_menu.gif" name="i003" border="0" /></a></li>
		</ul>
 
		<div id="bord_haut">&nbsp;</div>
 
		<div id="gauche"><?php include("menuGauche1_test.php"); ?></div>
 
		<div id="centre">
		  <h1>On System Administrator Appreciation Day</h1>
				<p><strong>W3C expresses its gratitude</strong><br />
				 Under their care W3C's main Web servers have served over 70 million hits per day.
				 Our mail hubs reject over 1 million virus and spam delivery attempts per day with zero reported false positives. Our server infrastructure typically sees server uptimes measured in hundreds of days; some of our servers have been in continuous operation for over a year. Join us in celebration of these key contributors to W3C, and thank your own 
					sysadmins for their tireless work. We extend our appreciation to: (News archive)</p>	
				<p align="right"><a href="#" onclick="print();"><img src="<?php echo $level; ?>Pics/print_page.gif" alt="Imprimer cette page" border="0"></a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#top"><img src="<?php echo $level; ?>Pics/top_page.gif" alt="retour en haut de page" border="0"></a></p>
		</div>
 
		<div id="droite">			  				
				<!--  Photos  -->
				<ul id="ul_photos">
				 <li class="li_photos"><img src="Pics/pix_white_menu.gif" width="150" height="220" alt="image 01" /><br />scsc vfqsfvqs ss dvqvqv</li>
				 <li class="li_photos"><img src="Pics/pix_white_menu.gif" width="150" height="200" alt="image02" /><br />sqsq ssssss cscc sssss</li>
				</ul>						
				<!--  Related Links  -->
				<div id="links_rn">								 						
						<h4>Articles en relation</h4>
						<ul id="ul_relation"> 
							<li>vvvvvvvv</li>
							<li>hhhhhhhh</li>
							<li>yyyyyyyyy</li>
							<li>zzzzzzzzzzz</li>
						</ul>																		
				</div>
		</div>
 
		<div id="footer">
<a href="">Géographie</a> | 
 
<a href="">Economie</a> | <a href="">Politique</a> | <a href="">xxxxxxx</a> | <a href="">xxxxxxx</a> | <a href="">xxxxxxx</a> | <a href="">xxxxxxx</a> | 
<a href="">xxxxxxx</a> | <a href="">xxxxxxx</a> | <a href="">xxxxxxx</a> | <a href="">xxxxxxx</a> | <a href="">xxxxxxx</a> | 
 
<a href="">xxxxxxx</a> | <a href="">xxxxxxx</a> | <a href="">xxxxxxx</a> | <a href="">xxxxxxx</a> |
 
<div id="footer_left">Blablabla shdsqsjkb</div>
<div id="footer_right">Blableblibloblu Bliblablé</div>
</div>
 
</div>
</body>

j'ai beau lire des tutos, aller dans des forums. Je réussis à avancer sans y arriver totalement. Je viens donc chercher un peu d'aide...

ai-je fait qq chose de travers? sinon, que faire?

merci par avance

**MasterOfChakhaL** · 26/09/2006, 11h25

Tu peux jeter un oeil sur ce lien qui explique comment faire

http://www.cssplay.co.uk/layouts/3cols.html
(jette un oeil dans la source)

En fait, je pense que cette technique peut s'appliquer a ton cas car tu ne définis pas d'image de fond pour tes colonnes des cotés.

En gros, l'astuce consiste à définir un boc conteneur avec une couleur pour la bordure de gauche, une pour la bordure de droite, et une pour le contenu (ce qui correspondra a la fin a tes trois colonnes).

Ensuite, tu définis trois blocs dans ce conteneur
le premier aura des marges négatives a droite et a gauche correspondant aux deux autres colonnes (ca reserve de la place...)
les deux autres auront la propriété float left et right

a la suite de ces blocs (toujours dans le conteneur), tu mets un élément avec la propriété clear: both afin que l'agrandissement d'un des blocs flottants soit répercuté sur ton conteneur

**miltonis** · 26/09/2006, 11h31

Merci Master (ou Chakal)

ça me parait intérssant et c'est une idée à laquelle je n'aurais pas pensé...
Mais, ce n'est pas du "bidouillage"?
En fait je dis ça c'est parce que je suis assez novice en CSS pour l'instant.

je vais faire un test, merci

**MasterOfChakhaL** · 26/09/2006, 11h37

Envoyé par miltonis

Mais, ce n'est pas du "bidouillage"?

Alors je pense que la question a toute les raisons d'être posée et je comprends que ca puisse soulever un débat.

Pour ma part, je considère que ca ne modifie aucunement la sémantique de ta structure HTML, donc a partir de là, je dirais plutôt astuce que bidouillage

CSS sert a faire du design.
Je pense que c'est moins du bidouillage que quand on imbrique plusieurs éléments dans l'unique but de pouvoir insérer pluseurs images de fond (par exemple...)

**miltonis** · 26/09/2006, 16h21

bon ça marche plutot bien

!
C'est vrai que je pense qu'il est peut-être possible de faire plus "conventionnel" mais n'ayant trouvé ni chez moi, ni ailleurs la solution, je t'avoue que ta proposition me va très bien!

Cela me permet d'attaquer un autre sujet
je pense qu'on ne va ps tarder à me revoir dans les parages....

merci
a+

problème de hauteur de divs à 100%

Dimensionnement en CSS

Discussions similaires

Partager

Partager