Discussion :

[Arkante]

Bonjour,

Je suis en train de faire un site au design un peu particulier de part sa structure élastique et j'ai un petit soucis. Je vous donne mon explication théorique en espérant que ca suffise mais si ce n'est pas le cas, je détaillerai ma structure.

En gros j'ai un div qui a les attributs :

Code css :

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

1
2
3
4
	min-height: 100px;
	max-height: 300px;
	height: 30%;
	position: relative;

Dans ce div, je positionne de manière absolue du contenu pour qu'il soit en bas :

Code css :

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

1
2
	position: absolute;
	bottom: 10px;

Pas de soucis jusque là, ca marche sous Firefox, IE, Safari. Mais Opera et Chrome me font un truc bizarre quand height > max-height.

Comme height est en pourcentage, il arrive un moment où la hauteur (30%) dépasse les 300px. A ce moment la, le bottom sous Opera et Chrome s'applique à l'attribut height (%) et pas à max-height.

Ca rend invisible certains élèments qui sont cachés sous le max-height.


Avez-vous une idée qui pourrait résoudre ce petit soucis ?

Merci d'avance

[Macmillenium]

Bonjour,

En effet, c'est étrange.
Sous quelles versions d'Opéra et Chrome as tu testé ? pourrais-tu fournir ton code (X)HTML/CSS complet stp ?

[Arkante]

Merci pour ton aide. Opera est en 10.01 et Chrome est la version beta developpeur Mac (mais le problème est le même sous la 4 sous windows).

Mon design fait 525*480px, je dois le centrer horizontalement et plus ou moins verticalement (il faut que ce soit centré mais pas que la partie supérieure soit plus grande que 300px, c'est une question esthétique).

La structure du design est en fichier attaché. Ca peut aider à voir plus clair je pense.



Voici le html :

Code html :

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 id="header">
		<div class="container">
		<h1 id="logo"><a href="">Title</a></h1>
 
		<ul id="menu">
			<li><a href="" title="" id="">Menu1</a></li>
			<li><a href="" title="" id="">Menu2</a></li>
			<li><a href="" title="" id="">Menu3</a></li>
		</ul>
		</div>
	</div>
 
	<div id="content">
		<div class="container">
			<p>Lorem ipsum</p>		
		</div>
	</div>

Voici le css (loin d'être optimisé) :

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
.container
{
	margin: 0 auto;
	width: 525px;
}
 
#header
{
	margin: 0;
	padding: 0;
	background-color: #333;
	min-height: 100px;
	max-height: 300px;
	height: 30%;
	position: relative;
}
 
#header .container
{
	background: url(../images/layout/headerBkgnd.png) repeat-y 315px 0;
	overflow: auto;
	height: 100%;
	position: relative;
}
 
#logo
{
	margin: 0;
	padding: 0;
	position: absolute;
	bottom: 10px;
}
 
#menu
{
	margin: 0;
	padding: 0;
	position: absolute;
	right: 0px;
	bottom: 10px;
}
 
#menu li
{
	width: 70px;
	position: relative;
	float: left;
	margin-right: 0px;
	margin-left: 0px;
	overflow: hidden;
	text-align: center;
	list-style-type: none;
	display: inline;
}
 
#menu li a
{
	padding: 5px;
}
 
#content
{
	background: url(../images/layout/contentTopBkgnd.jpg) repeat-x 0 0;
	min-height: 390px;
	position: relative;
	z-index: 10;
	-moz-box-shadow: 0 -1px 2px #141414;
	-webkit-box-shadow: 0 -1px 2px #141414;
	box-shadow: 0 -1px 2px #141414;
}

[CCyrillus]

bonjour,

en principe max ou min height/width ne peuvent pas servir de référence pour un height enfant.

max-height:300px a #header , ne peut en principe pas servir de reference pour ses enfants .

Il te faudrait donc aussi appliqué un max-height:300px a #header .container pour que ton positionement en absolue puisse se caler dessus .

GC

[Arkante]

Tout simplement

Merci beaucoup pour ton aide précieuse, ca résout parfaitement mon problème.