Discussion :

[helkøwsky]

Bonjour à vous la communauté,

une fois de plus perdant patience je me tourne vers vous ! Apres maintes rechercher je n'arrive toujours pas à supprimer un espace blanc non désirable.

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
 
<div class="menu">
			<div class="menu_header">
				<IMG SRC="image/menu/menu_header.png" ALT="panier_header" TITLE="" >
			</div>
			<div class="menu_body">
				<p>Bonjour jerome, <br /> bienvenu sur xxx</p> <br />
					<ul>
							<li><a href='accueil_membre.php?m377'>Jerome</a></li>
							<li><a href='accueil_membre.php?m382'>yvan</a></li>
						<ul>
							<li><a href='accueil_membre.php?sm384&m382&1=sm384'>kulo</a></li>
							<li><a href='accueil_membre.php?sm383&m382&1=sm383'>torchio</a></li>
							<li><a href='accueil_membre.php?sm385&m382&1=sm385'>zula</a></li>
						</ul>
					</ul>	
					<ul>
						<li><a href="accueil_membre.php?admin">Administration</a></li>
					</ul>
			</div>
			<div class="menu_foot">
				<IMG SRC="image/menu/menu_foot.png" ALT="panier_header" TITLE="">
			</div>
	</div>

et le 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
 
.menu
{
	float: left; /* Le menu flottera à gauche */
	width: 200px; /* Très important : donner une taille au menu */
	margin-left: 20px;
	margin-top: 20px;
	padding-left: 5px;
	position: relative;
}
.menu_header
{
	margin-top: 0px;
	margin-bottom: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
	width: 200px;
	height: 10px;
}
.menu_body
{
	margin-top: 0px;
	margin-bottom: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
	width: 200px;
	background: url(image/menu/menu_body.png) repeat-y;
 
}
.menu_foot
{
	margin-top: 0px;
	margin-bottom: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
	width: 200px;
	height: 30px;
}

Le bloc menu est composé de 3 images, un header avec les deux coins supérieur arrondis un body carré et l'attribut repeat-y et un foot qui a deux coins inférieur arrondis. Il semblerait que les balises img laissent un espace blanc cependant j ai essayé les méthodes décrites ici http://www.sitepoint.com/forums/showthread.php?t=396477
rien n'y fait. j'ai réussi à enlever l'espace blanc entre la balise header et body en changeant ceci .menu_header {height: 30px; -> en 10px}. L'autre solution serait d'utiliser des background-image et donc d'enlever les balises img, sauf que si les balises sont vide il ne les affiches pas alors que si je tape une lettre ca joue enfin si qqun a une solution avec les div ou les img le tout en me supprimant les espaces je suis preneur. le résultat est en image.

En remerciant d'avance les personnes qui prendront le temps de s'occuper de mon cas

[Mahefasoa]

Bonjour,

En ajoutant un float:left et le tour est joué.

Voici les directives CSS que j'ai utilisées:

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
        .menu_header
        {
            margin-top: 0px;
            margin-bottom: 0px;
            padding-top: 0px;
            padding-bottom: 0px;
            width: 200px;
            height: 10px;
            float: left;
        }
        .menu_body
        {
            margin-top: 0px;
            margin-bottom: 0px;
            padding-top: 0px;
            padding-bottom: 0px;
            width: 200px;
            background: url(image/menu/menu_body.png) repeat-y;
            float: left;
        }
        .menu_foot
        {
            margin-top: 0px;
            margin-bottom: 0px;
            padding-top: 0px;
            padding-bottom: 0px;
            width: 200px;
            height: 30px;
            float: left;
        }

Bien cordialement,

[helkøwsky]

Hello Mahefasoa,

je te remercie ça joue parfaitement. Puis-je abuser de ta bonté et de demander une minuscule explication ?

[Bisûnûrs]

C'est le phénomène de fusion des marges:

8.3.1 La fusion des marges

Dans cette spécification, l'expression marges de fusion signifie que les marges adjacentes (sans qu'une aire d'espacement ou de bordure ne les séparent) de deux ou plusieurs boîtes (celles-ci pouvant être l'une à côté de l'autre ou imbriquées), ces marges se combinent pour n'en former qu'une seule.

En CSS2, les marges horizontales ne fusionnent jamais.

Les marges verticales peuvent fusionner entre certaines boîtes :

Les marges verticales de deux boîtes, ou plus, d'éléments de type bloc, placés dans un flux normal fusionnent. La largeur de la marge finale devient la valeur la plus grande entre celles des marges adjacentes. Dans le cas de marges négatives, on soustrait la plus grande des valeurs des marges négatives adjacentes, en valeur absolue, de la plus grande des marges positives adjacentes. Et s'il n'y pas de marges positives, on déduit de zéro la plus grande des marges négatives, en valeur absolue. Remarque Les boîtes limitrophes peuvent être générées par des éléments qui n'ont aucune parenté en tant que frères ou ancêtres ;
Les marges verticales entre une boîte qui flotte et toute autre boîte ne fusionnent pas ;
Les marges entre des boîtes absolument et relativement positionnées ne fusionnent pas.

Des marges verticales par défaut appliquées aux éléments ul sont reportées sur son élément parent et créé donc un espace entre tes deux div.

Tu peux, selon ton cas, soit supprimer les marges de ton élément ul en question, soit corriger le problème en ajoutant un contexte de formatage bloc (avec la propriété overflow par exemple) sur ton élément parent.

[helkøwsky]

merci bisunurs pour l'explication j'aime bien comprendre le pourquoi et non pas appliquer bêtement.

vous m'aurez évité des cheveux gris merci bonne journée