Problème de débordement avec menus en absolute

**Hell** · 11/07/2009, 04h09

Bonsoir,

Désolé de reposter un autre sujet en si peu de temps mais je sèche et je suis novice en positionnement css.

J'essaye de faire une mise en page avec 3 colonnes donc avec 2 menus et un contenu au milieu.

J'utilise pour ça un bloc que j'ai nommé "page" (en position relative) qui lui contient ma banniere (centrée), mon menu à gauche (absolute), mon menu à droite (absolute) et mon contenu au milieu.

Mon problème est que si j'ai un des menus qui est plus grand que ma zone du milieue, le menu déborde :
http://www.noelshack.com/uploads/160...tled067164.PNG

Comment faire pour que mon bloc "page" (fond bleu sur l'image) s'agrandisse en fonction des menus et de la zone du milieu?

Je sais que mes deux menus ne sont plus dans le flux donc c'est un comportement normal mais que faut-il faire dans ce cas la? J'ai testé aussi avec des float mais même problème.

Merci d'avance pour votre aide

Mon code :

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
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!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" xml:lang="en" lang="fr">
<head>
 
<title>Titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
 
	<div id="page">
		<div id="banniere">&nbsp;</div>
 
		<div id="gauche">
			a<br />
			a<br />
			a<br />
			a<br /> 
			...<br /> 
			...<br /> 
		</div>				
		<div id="droite">
			b<br />
			b<br />
			b<br />
			b<br />
			...<br />
			...<br />
		</div>
		<div id="milieu">
			0<br />
			0<br />
			0<br />
			0<br />
			...<br />
			...<br />
		</div>	
	</div>	
</body>
</html>

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
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
body {
	margin:0;
	padding:0;
 
}
 
#page {
	width:1024px;	
	margin-left:auto;
	margin-right:auto;
	background-color:#3a9dc6;	
	position:relative;
 
}
 
#banniere {
	text-align:center;
}
 
#gauche {
	background-color:red;
	position:absolute;
	left:0;
	width:150px;
 
}
 
#droite {
	background-color:cyan;
	position:absolute;
	right:0;
	width:150px;
}
 
#milieu {
	background-color:green;
	margin-left:155px;
	margin-right:155px;
 
}

**grafik.muzik** · 11/07/2009, 05h43

J'ai souvent été confronté à ce genre de problème et ce que je peux te dire c'est qu'il n'y a pas de solution très efficace : il faut souvent utiliser des moyen contournés. La future norme CSS3 permettra de régler ce problème avec une propriété dédiée mais en attendant il faut souvent faire preuve d'imagination.

Par exemple, utiliser un <hr> invisible comme spacer peut corriger ton problème, si tu utilise des floats. Le mot « spacer » fait peur, mais dans ce cas précis il s'agit d'un spacer sémantique donc acceptable.

En passant, je te déconseille l'utilisation du width:1024px; sur ta page. Il faudrait fixer une plus petite valeur ou encore mieux, utiliser un design « élastique » c'est-à-dire qui s'adapte à la taille de la fenêtre. Sinon, ton code XHTML et ton CSS sont très bien

**Hell** · 11/07/2009, 12h44

Salut et merci pour ta réponse ainsi que pour les liens qui sont instructifs

Ca fonctionne bien avec un <hr> + des floats, c'est nickel

Par contre il existe aucun moyen en utilisant des absolutes? Je demande au cas ou je serais confronté à ce problème et sans possibilité d'utiliser les floats.

En passant, je te déconseille l'utilisation du width:1024px; sur ta page. Il faudrait fixer une plus petite valeur ou encore mieux, utiliser un design « élastique » c'est-à-dire qui s'adapte à la taille de la fenêtre

Est ce que c'est pour s'adapter plus facilement aux téléphones portables qu'il faut utiliser une taille plus petite / élastique?

Merci

**Macmillenium** · 11/07/2009, 17h23

Envoyé par Hell

Ca fonctionne bien avec un <hr> + des floats, c'est nickel

L'utilisation de <hr />,   ou un n'importe quel élément vide doté de la propriété clear pour établir le flux est une solution sémantiquement minable.
Pour infos, attribuer un overflow:hidden au conteneur #page lui permet d'englober ses enfants flottants.
Sinon, tu as une autre solution en passant par le pseudo-élément :after, plus de détails dans ce topic.

Envoyé par Hell

Par contre il existe aucun moyen en utilisant des absolutes? Je demande au cas ou je serais confronté à ce problème et sans possibilité d'utiliser les floats.

Malheureusement non, les éléments en absolute sont entièrement retirés du flux, à ma connaissance il faut passer par JS.

Envoyé par Hell

Est ce que c'est pour s'adapter plus facilement aux téléphones portables qu'il faut utiliser une taille plus petite / élastique?

La plupart des appareils mobiles calculent le font et par conséquent, le width, le height, line-height etc. proportionnellement par rapport au viewport (zone d'affichage).
Il est préférable d'utiliser les unités en em pour le font, line-height et % pour le reste des propriétés width (min et max), height (min et max), margin et padding.

**grafik.muzik** · 11/07/2009, 18h23

L'utilisation de <hr />, ou un n'importe quel élément vide doté de la propriété clear pour établir le flux est une solution sémantiquement minable.

Cette solution n'est pas minable, elle est astucieuse. Ce n'est pas l'idéal certes, mais une utilisation intelligente des <hr /> peut améliorer légèrement la sémantique de la page. Il s'agirait, par exemple, d'utiliser un <hr> à la fin de chaque section importante de la page. Si <hr> a été conservé dans XHTML 1, c'est déjà un bon indice de la pertinence de cet élément.

Pour infos, attribuer un overflow:hidden au conteneur #page lui permet d'englober ses enfants flottants.

Overflow:hidden n'a-t-il pas pour effet de masquer ce qui déborde du conteneur? Je ne crois pas que ce soit le comportement désiré. Corrigez-moi si je fait erreur.

Sinon, tu as une autre solution en passant par le pseudo-élément :after, plus de détails dans ce topic.

L'idée est bonne, toutefois IE6 (et IE7?) ne prends pas en charge ce pseudo-élément.

Par contre il existe aucun moyen en utilisant des absolutes? Je demande au cas ou je serais confronté à ce problème et sans possibilité d'utiliser les floats.

Moi non plus à ma connaissance il n'y a pas de solution, avec CSS2. Toutefois, je me souviens vaguement avoir lu je-ne-sais-où, que CSS3 créera une nouvelle propriété qui permet de résoudre ce problème. Idéalement, vaut mieux éviter tout Javascript pour le stylage d'une page.

Est ce que c'est pour s'adapter plus facilement aux téléphones portables qu'il faut utiliser une taille plus petite / élastique?

En fait, l'utilisation d'une taille plus petite est plutôt pour les écran d'ordinateurs à plus faible résolution (800 x 600). Certains te diront que ces utilisateurs sont des dinosaures, que tout le monde utilise au moins du 1024x768. Personnellement, je crois qu'on ne doit pas négliger ces utilisateurs.

L'utilisation d'un design élastique te permet d'utiliser tout l'espace disponible sur chaque écran, ce qui est l'idéal. L'inconvénient des desgin élastique est qu'il sont généralement plus difficile à créer lorsque l'on utilise plusieurs colonnes.

Pour les téléphone portable, ordinateurs de poche, etc. Il est possible de définir des feuilles de styles distinctes. Ça veut dire, par exemple, que tu pourrais faire en sorte que ton site s'affiche avec un arrière-plan rouge sur un ordinateur de poche mais avec un arrière-plan bleu sur un écran d'ordinateur. Dans la pratique, ça permet d'adapter ton design :

Code :

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

1
2
<link rel="stylesheet" type="text/css" media="screen" href="style-ecran.css" />
<link rel="stylesheet" type="text/css" media="handheld" href="style-pda.css" />

**Macmillenium** · 11/07/2009, 21h15

Envoyé par grafik.muzik

Cette solution n'est pas minable, elle est astucieuse.

Chaque élément HTML possède un rôle et <hr /> n'est pas fait pour établir le flux normal comme tu le proposes (je ne parle pas des autres aspects).

Envoyé par grafik.muzik

Si <hr> a été conservé dans XHTML 1, c'est déjà un bon indice de la pertinence de cet élément.

La pertinence d'un élément n'a rien à voir avec le respect de la sémantique.
L'élément  , lui aussi, a été conservé dans XHTML1, on abandonne les margin et on n'utilise que des  , c'est aussi une solution astucieuse ?

Les specs CSS2.1 mettent à disposition un mécanisme très pratique appelé contexte de formatage bloc.
Ce mécanisme (avec ses nombreux avantages) permet à un parent d'englober ses enfants flottants sans passer par la propriété clear (ou <hr />,   etc.).

Et comme indiqué dans les specs :

Envoyé par CSS2.1

Floats, absolutely positioned elements, inline-blocks, table-cells, table-captions, and elements with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts.

Envoyé par grafik.muzik

Overflow:hidden n'a-t-il pas pour effet de masquer ce qui déborde du conteneur? Je ne crois pas que ce soit le comportement désiré. Corrigez-moi si je fait erreur.

overflow:hidden masque le contenu qui déborde avec la présence d'un height et/ou width mais dans ce cas de figure, on utilise overflow:auto pour conférer un nouveau contexte de formatage afin de garder le contenu accessible en cas de zoom.

Envoyé par grafik.muzik

L'idée est bonne, toutefois IE6 (et IE7?) ne prends pas en charge ce pseudo-élément.

Réponse (justement dans le lien proposé) :

Envoyé par Macmillenium

:after n'est pas implémenté dans IE6-, on se contente alors de conférer le layout à l'élément en question (un zoom:1 fera l'affaire) dans une CSS dédié à IE6- et appelé via commentaires conditionnels.

IE7 supporte correctement les pseudo-éléments :before et :after.

Envoyé par grafik.muzik

L'utilisation d'un design élastique te permet d'utiliser tout l'espace disponible sur chaque écran, ce qui est l'idéal.

Pas vraiment non

Il faut aussi penser aux grandes résolutions comme 1680, la lecture devient extrêmement pénible sur une page occupant 100% de largeur.
Vaut mieux limiter la largeur à 1350px par exemple, via un max-width (nécessite un correctif pour IE6).

@Hell : Si tu t'intéresse au web mobile, voici quelques idées

**Hell** · 12/07/2009, 00h27

Merci beaucoup, j'apprends plein de choses à chacun de vos posts

Du coup il vaut mieux passer autant que possible par des flottants, étant donné qu'overflow évite de trop s'embêter. Je savais pas du tout qu'overflow servait à autre chose que masquer ce qui déborde, c'est super intéressant

Pour mes absolutes, j'ai trouvé un autre moyen tout à l'heure, mais c'est peut être pas terrible comme solution : utiliser height pour donner à mon bloc principal, une taille supérieure à mon menu.

Sinon merci pour le lien sur le web mobile, je m'y intéresse oui par curiosité et parceque j'aurais peut etre à travailler la dessus un jour

**grafik.muzik** · 12/07/2009, 01h09

Du coup il vaut mieux passer autant que possible par des flottants, étant donné qu'overflow évite de trop s'embêter. Je savais pas du tout qu'overflow servait à autre chose que masquer ce qui déborde, c'est super intéressant

Dire que j'ai passé tant d'années sans connaitre overflow: auto! C'est vraiment pratique, moi aussi j'ignorais l'existence de cette valeur pour cette propriété.

Connaissant cette façon de faire, il est vrai que la méthode du <hr> deviens caduque. J'aurais tendance à dire que la méthode du clear sur le hr est acceptable, si et seulement si le hr a une raison sémantique d'être là dans la page. Toutefois, ça relève presque du hack, car effectivement, il n'a pas été conçu pour cela. L'utilisation d'overflow est clairement meilleure.

L'élément , lui aussi, a été conservé dans XHTML1, on abandonne les margin et on n'utilise que des , c'est aussi une solution astucieuse ?

Des plutôt que des margins :

!!!

Au fait, Macmillenium, lorsque le bloc parent n'a pas de taille de définie, y a-t-il une différence entre overflow: hidden et overflow: auto?

Vaut mieux limiter la largeur à 1350px par exemple, via un max-width (nécessite un correctif pour IE6).

De la même façon, tu peux utiliser min-width afin de définir une largeur minimum à ta page (par exemple, pour éviter un affichage trop serré si l'utilisateur rapetisse énormément sa fenêtre), toujours en considérant IE6.

**Hell** · 12/07/2009, 14h57

Bonjour
J'ai de nouveau un problème mais cette fois avec Internet Explorer 6...

Cette fois j'ai essayé de faire un design avec seulement 2 colonnes en tentant de reproduire un site existant sur le web.
- Ma colonne de gauche est flottante.
- Ma colonne de droite est non flottante.
- Le fond bleu que l'on voit, est le fond de ma page.

- Ces deux colonnes font parti d'un bloc #contenu, qui utilise a la propriété overflow:hidden; afin d'englober mon menu flottant.
- Mon bloc #contenu a la couleur rouge comme couleur de fond.

Et pourtant même avec la propriété overflow:hidden, mon bloc #contenu n'englobe pas mon menu flottant sous Internet Explorer 6.

J'ai peut être oublié quelque chose ou mal fait quelque chose mais je vois pas quoi

Quelqu'un aurait une idée svp?
Merci d'avance

Edit : J'ai réussi en ajoutant height:1%; dans mon bloc de droite.

Aperçu sous Firefox/Opera :

Aperçu sous IE 6 :

Mon code 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
18
19
20
21
22
23
24
25
26
<!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" xml:lang="en" lang="fr">
<head>
 
<title>Titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="style2.css" title="Thème par défaut" />
</head>
<body>
	<div id="page">	
		<div id="header">
			<div id="banniere"><?php include 'banniere.html'; ?></div>
			<div id="menuhaut"><?php include 'menuhaut.html'; ?></div>
		</div>
 
		<div id="contenu">
			<div id="menugauche"><?php include 'menugauche.html'; ?></div>
			<div id="contenumilieu"><?php include 'contenumilieu.html'; ?></div>
		</div>
		<div id="footer">
			<div id="bas"><?php include 'bas.html'; ?></div>
		</div>
	</div>
</body>
</html>

Mon code CSS :

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
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
body {
 
	margin:10px;
 
	background-color:blue;
}
 
#page {
	width:752px;
	margin-left:auto;
	margin-right:auto;
}
 
/* header */
#header {
}
 
#banniere {
	background-color:orange;
}
 
#menuhaut{
	text-align:center;	
	background-color:#cccccc;
}
 
/* contenu page */
#contenu {
	overflow:hidden;
	background-color:red;
	border:1px solid pink;
}
 
#menugauche {
	float:left;
	width:190px;
	background-color:yellow;
	text-align:center;
}
 
#contenumilieu {
	margin-left:190px;
	padding-left:20px;	
}
 
#textemilieu {
	margin:0px 10px 0px 30px;
	text-align:justify;
}
 
/* bas */ 
#bas {
	background-color:green;
	font-family:Tahoma,Arial;
	color:#000000;
	font-size:7pt;
	text-align:center;
	letter-spacing:0px;
	line-height:11px;	
}
 
#footer {
	clear:both;
	text-align:center;
}

**Macmillenium** · 12/07/2009, 22h37

Envoyé par grafik.muzik

Des plutôt que des margins :

!!!

Et donc chaque élément HTML possède un rôle prédéfini

Envoyé par grafik.muzik

Au fait, Macmillenium, lorsque le bloc parent n'a pas de taille de définie, y a-t-il une différence entre overflow: hidden et overflow: auto?

Non, aucune différence à ma connaissance, toutefois, il serait préférable d'utiliser overflow:hidden dans ce cas.

Envoyé par grafik.muzik

De la même façon, tu peux utiliser min-width afin de définir une largeur minimum à ta page (par exemple, pour éviter un affichage trop serré si l'utilisateur rapetisse énormément sa fenêtre), toujours en considérant IE6.

Personnellement, je préfère éviter la limitation des largeurs via min-width et garder le contenu fluide pour les petites résolutions (ordinateurs de poche, appareils mobiles etc.), ce qui leur permet de déterminer les largeurs de manière proportionnelle et par conséquent, éviter le déclenchement de scrollbar horizontale ou un éventuel resize forcé.

Si l'utilisation d'un min-width s'impose (insistance du client par exemple), je l'attribue dans une CSS screen et l'annule par la suite (remise à la valeur initial : min-width:0) dans une CSS handheld appelé via media="handheld", Media queries, viewport meta tag, JS etc. étant donné que certains appareils/Agents utilisateurs arrivent à lire dans les média screen et handheld en même temps, ou ignorent carrément le média handheld.
Bref, c'est assez long à expliquer

@Hell : Sous IE7 et versions inférieurs, il faut conférer le Layout au conteneur pour englober les flottants, c'est un concept appelé HasLayout.
Préfère un zoom:1 plutôt que height:1%, on sait jamais

**Hell** · 21/07/2009, 12h05

Merci beaucoup, j'ai beaucoup appris avec ce topic

Problème de débordement avec menus en absolute [CSS 2]

CSS

Discussions similaires

Partager

Partager