Problème de chevauchement entre 2 divs

**ChriGoLioNaDor** · 10/10/2007, 03h34

Bonjour,

J'ai un menu_haut qui contient une liste de boutons, et juste en dessous (collé), j'ai un sous_menu.

Voici mon code :

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
<html>
	<head>
		<style type="text/css">
			*
			{
				margin: 0;
				padding: 0;
				border: 0;
			}
 
			#menu_haut
			{
				height: 20px;
			}
 
			#sous_menu
			{
				background-color: #F8C262;
			}
 
			li
			{
				display: inline;
			}
		</style>
	</head>
	<body>
		<div id="menu_haut">
			<ul>
				<li>
					<img src="/btn_accueil.png" />
				</li>
				<li>
					<img src="/btn_presentation.png" />
				</li>
			</ul>
		</div>
		<div id="sous_menu">
			&nbsp;
		</div>
	</body>
</html>

Difficile de faire plus simple ^^. Voici ce que je voudrais obtenir :

Cependant, il semblerait qu'il y ait plusieurs bugs :
1/ sous IE6, les boutons du menu_haut ne sont pas collés au sous_menu :

2/ Aussi bien sous IE6 que sous FF, lorsqu'on fait un zoom du texte (ctrl+ sous Firefox), les boutons du menu_haut viennent chevaucher le sous_menu...

Un petit lien pour tester par vous-même, si vous le voulez : ICI

Quelqu'un pourrait-il m'aider à régler ce soucis? J'ai pas mal cherché, et hélas rien trouvé...
Merci d'avance!

**spitou_77** · 10/10/2007, 07h58

Bonjour,

pour ton problème 1

juste modifier ton css:

Code :

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

1
2
3
4
5
			#menu_haut
			{
				height: 20px;
				overflow: hidden;
			}

**ChriGoLioNaDor** · 10/10/2007, 10h01

Oui en effet cela cache le soucis, mais je suppose que les 2 problèmes sont liés : il semblerait en fait que les images soient placés sur une ligne de texte (se réparées par des espaces, et que plus on zoom, plus forcément la hauteur de ces espaces grandit. Ce qui expliquerait qu'un écart se crée sans raisons au dessus, et en dessous des l'images. Hélas, je n'arrive pas à supprimer cette ligne, ou à lui donner une hauteur constante (j'ai bien essayé de mettre un line-height un peu partout, sur le <li>, le <ul>, le <div id="menu_haut">... mais sans résultat)...

On voit d'ailleur cela si l'on essaie de sélectionner l'espace entre les images :

Mais impossible de le supprimer, ou de redéfinir sa hauteur :'(

[Edit] Une possibilité serait en effet de mettre un "overflow: hidden;" à #menu_haut, et un "vertical-align:top;" à img. Dans ces cas là, on aligne l'image sur le haut de la ligne, et on cache ce qui dépasse ^^. Mais ça tient plus du bidouillage qu'autre chose. Cependant, ça a l'avantage d'être efficace.

**MasterOfChakhaL** · 10/10/2007, 10h19

salut,

Tu peux aussi éviter de définir la hauteur en pixel et utiliser une unite relative afin que le zoom s'applique aussi sur les dimensions.

La plupart des navigateurs ont une taille de police par défaut de 16px. Si sur ton body tu définis un font-size de 62.5%, alors tu auras la correspondance 1em<->10px.

Attention, vu que les tailles en em sont relatives, si tu as deux divs imbriqués ayant tout deux un font-size de 2em, alors le div enfant aura une police deux fois plus grandes que son père.

Si tu t'imposes la discipline de ne définir les font-size qu'au niveau le plus profond de l'arborescence html, alors ce sera moins compliqué à gérer.

**ChriGoLioNaDor** · 10/10/2007, 20h17

Je pense que je vais rester sur la piste de spitou_77. Au final, ça fonctionne bien, est relativement simple, donc pourquoi se compliquer la vie?

Merci beaucoup pour vos réponses!

**Candygirl** · 11/10/2007, 09h44

Perso je le ferais plutôt en float:

Code html :

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

1
2
3
4
5
6
7
<ul id="menu_haut">
	<li><img src="test_files/btn_accueil.png" alt="accueil"></li>
	<li><img src="test_files/btn_presentation.png" alt="présentation"></li>
</ul>
<div id="sous_menu">
	&nbsp;
</div>

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
 
			*{
				margin: 0;
				padding: 0;
				border: 0;
			}
 
 
			#sous_menu{
				background-color: #F8C262;
				height:20px;
			}
 
			#menu_haut{
				list-style:none;
			}
 
			#menu_haut li{
				float:left;
				margin-right:5px;
			}
 
			#menu_haut img {
				display:block;
			}
 
			#sous_menu {
				clear:both;
			}

Problème de chevauchement entre 2 divs

CSS

Discussions similaires

Partager

Partager