Hauteur du DIV adaptée au contenu

**imagonem** · 30/01/2009, 10h55

Je bûche là-dessus depuis hier, d'abord en CSS pur, puis en imbriquant une TABLE, mais le résultat (bien que meilleur) n'est pas top : je voudrais faire en sorte que mon fond opaque (DIV ID="interface") s'adapte à la hauteur de son contenu (maintenant le DIV ID="tableau", qui comprend lui-même un DIV="nav" pour la navigation à droite) !

Ma page : www.lamaisondelautisme.fr/home.php

Mon 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
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
html { overflow-y: auto }
 
body {
	font: 11px verdana;
	margin: 0px;
	padding: 0px;
	text-align: center;
}
 
#interface {
	visibility: visible;
	position: absolute;
	top: 10px;
	left: 50%;
	width: 900px;
	margin-left: -450px;
	height: auto !important;
	min-height: 460px;
	height: 100%;
	text-align: left;
	background-color: #FFFFFF;
	filter: alpha(opacity=90);
	-moz-opacity: .9;
	opacity: .9;
	z-index: 1;
}
 
#logo { 
	position: absolute;
	top: 10px;
	left: 50%;
	width: 900px;
	margin-left: -470px;
	width: 198px;
	height: 150px; 
	float: left;
	z-index: 2;
}
 
#titre { 
	position: relative;
	top: 79px;
	right: 20px;
	width: 400px; 
	height: 60px; 
	float: right;
	text-align:right;
	z-index: 2;
}
 
#tableau { 
	position: relative;
	float: left;
	top: 137px;
	left: 19px;
	width: 862px;
	z-index: 2;
}
 
#footer {
	margin-top:40px;
	margin-left:-1px;
	margin-right:4px;
	color: #777777;
}
 
#nav { position: relative; float: left; top: 3px; height: 186px; width: 162px; display:block }

Et mon code HTML (PHP, réduit à l'utile) :

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
<!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">
 
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<style type="text/css" media="all">
		@import "css/global.css";
		@import "css/style.css";
		body { background: #FFF url('img/fond.jpg') no-repeat top left }
	</style>
</head>
 
<body>
	<div id="logo"><img src="img/logo.gif"></div>
<div id="interface">
	<div id="titre">
		<img src="img/titre_<?=$rb?>.gif" height="60" border="0">
	</div>
	<div id="tableau">
		<table width="862" cellpadding="0" cellspacing="0" border="0">
			<tr>
				<td width="162" valign="top">
					<div id="nav">
						<? $liste=array("accueil","asso","autisme","photos","articles","liens","contacts");			
						foreach ($liste as $num=>$nom) { ?>
						<span<? if ($num==5) echo " style='margin-bottom:30px'" ?>><? if ($rb==$nom) { ?><img src="img/nav_<?=$nom?>.gif" style="margin-top: -21px">
						<? } else { ?><a href="<?=$nom?>"><img src="img/nav_<?=$nom?>.gif"></a>
						<? } ?></span><? } ?>
					</div>
				</td>
				<td width="700" valign="top">
					<?PHP // INSERTION PAGE ?>
				</td>
			</tr>
			<tr>
				<td colspan="2" width="862">
					<div id="footer">
						<div style="float:right">Solution <a href="http://www.webazikos.com/" class="textevertclair" target="_blank">Webazikos</a> - Con&ccedil;u et h&eacute;berg&eacute; par <a href="http://www.mediacopie.fr/" class="textevertclair" target="_blank">Media Copie</a></div>
						&copy; La Maison de l'Autisme <?=date("Y")?>
					</div>
				</td>
			</tr>
		</table>
	</div>
</div>
</body>
 
</html>

Si qqn a une idée magique... Merci !

**Macmillenium** · 30/01/2009, 11h44

Bonjour,

Essai en ajoutant un height:100% sur #interface

**imagonem** · 30/01/2009, 12h28

Il y a déjà un height:100% dans mon #interface :-(

**Macmillenium** · 30/01/2009, 12h33

Oui mais il faut corriger ton code :

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
 
#interface {
	visibility: visible;
	position: absolute;
	top: 10px;
	left: 50%;
	width: 900px;
	margin-left: -450px;
	height: 100%;
	text-align: left;
	background-color: #FFFFFF;
	filter: alpha(opacity=90);
	-moz-opacity: .9;
	opacity: .9;
	z-index: 1;
}

- Tu n'as pas besoin de min-height puisque #interface prend déjà 100% de son conteneur.
- La règle !important donne priorité a height:auto => height:100% sera ignoré dans ce cas

**imagonem** · 30/01/2009, 12h38

J'avais déjà fait ça (et je viens de le remettre en ligne), mais le souci est que 1) ça s'adapte à la hauteur de la fenêtre et non pas du contenu de mon #interface 2) ça ajoute un ascenseur vertical même avec un overflow:auto :-(
La solution est ailleurs...

**Macmillenium** · 30/01/2009, 12h59

Envoyé par imagonem

1) ça s'adapte à la hauteur de la fenêtre et non pas du contenu de mon #interface 2)

Ah ok, j'ai compris le contraire.

Le problème vient du positionnent relative sur #tableau

Essai ceci :

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
 
#interface {
	visibility: visible;
	position: absolute;
	top: 10px;
	left: 50%;
	width: 900px;
	margin-left: -450px;
	text-align: left;
	background-color: #FFFFFF;
	filter: alpha(opacity=90);
	-moz-opacity: .9;
	opacity: .9;
	z-index: 1;
}
 
#tableau { 
	float: left;
	padding-top: 137px;
	margin-left: 19px;
	width: 862px;
}

Après si tu as vraiment besoin tu peux ajouter un min-height sur #interface.

**imagonem** · 30/01/2009, 13h14

Et bien cette fois ça avance...
Il faut que je règle quelques détails pour le placement du div #nav et de mes mentions en bas, mais c'est une bonne base de travail !
Merci ;-)

Hauteur du DIV adaptée au contenu

Dimensionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager