18067 sujets

Questions générales et questions de débutants

Problème de marges

Bonjour, je ne vois pas mon erreur. En fait j'aimerais qu'il y ai 10 pixels de marges tout autour entre ma boîte #conteneur et ma boîte #menu.
Si j'applique le code tel que je vous le présente j'ai bien la marge souhaitée à gauche et à droite mais rien au-dessus et rien en bas.
Objectif : ne pas agrandir la boîte en largeur. 



<div id="conteneur">
<div id="menu">
      <ul>
        <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 1</a></li>
		    <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 1</a></li>
			<li><a href="#">Item 1</a></li>
			<li><a href="#">Item 1</a></li>
			<li><a href="#">Item 1</a></li>
			<li><a href="#">Item 1</a></li>
      </ul>
      </div>
</div>






body {
	margin: 0px;
	padding: 0px;
}
ul {
	font: normal 14px "Trebuchet MS";
	color: #000000;
    margin: 5px;
    padding: 0px;	
}
li {
	list-style-type: none;
}
a {
	color: #FFFFFF;
	text-decoration: none;
	display: block;
	height: 22px;
	padding-left: 15px;	
	border: 1px solid #4e698f;
	margin-bottom: 3px;
	border-left: 10px solid #CFD7E7;
	padding-top: 2px;
}
a:hover {
	color: #000000;
	text-decoration: none;
	background-color: #8497c2;	
	border-left: 10px solid #FFCC00;	
}
#conteneur {
	width: 250px;
	background-color: #11397B;

}
#menu {
	border: 1px solid #8497c2;
	margin: 10px;
}

Modifié par renato (21 Jan 2010 - 13:55)
Par contre, si je mets le code suivant concernant les 2 boîtes du bas, ça fonctionne. Pourquoi, je ne comprends pas ???





body {
	margin: 0px;
	padding: 0px;
}
ul {
	font: normal 14px "Trebuchet MS";
	color: #000000;
    margin: 5px;
    padding: 0px;
		
}
li {
	list-style-type: none;
}
a {
	color: #FFFFFF;
	text-decoration: none;
	display: block;
	height: 22px;
	padding-left: 15px;	
	border: 1px solid #4e698f;
	margin-bottom: 3px;
	border-left: 10px solid #CFD7E7;
	padding-top: 2px;
}
a:hover {
	color: #000000;
	text-decoration: none;
	background-color: #8497c2;	
	border-left: 10px solid #FFCC00;	
}
#conteneur {
	width: 250px;
	background-color: #11397B;
	[#darkred][b]padding: 10px 0 10px 0;[/b][/#]}

#menu {
	border: 1px solid #8497c2;
	[#darkred][b]margin: 0 10px 0 10px;[/b][/#]
}
Je n'ai pas d'explication sur le pourquoi la marge du haut et du bas ne fonctionne pas mais l'utilisation d'un padding qui me semble plus approprié dans ton cas. Personnellement, j'utilise la propriété margin entre des éléments qui ne sont pas "parents-enfants". Par exemple, utiliser un margin entre tes différents <li> mais pas entre ton <div id="menu"> et ton <ul>.

Le padding ajoute de la largeur à ton élément mais tu peux facilement le calculer. Si tu veux 10 pixel tout le tour, tu peux calculer qu'il y aura 10 px à gauche, 10 px à droite et si tu veux garder 250 pixel de largeur totale, ton conteneur devrait être 230 px.

Voici ce que j'ai changé

#conteneur { 
    width: 230px; 
    background-color: #11397B; 
	padding:10px
 
} 
#menu { 
    border: 1px solid #8497c2; 
}


J'espère que ça t'aidera, même si c'est une alternative à ta question plutôt qu'une réponse.

Phil
Bonjour,

Je pense que la recherche sur les termes "fusion de marge" permettrait de comprendre le comportement obtenu. Smiley smile
Merci pour le lien. Moi j'avais compris que les marges ne fusionnait pas entre elles (elles ne s'additionnaient pas par exemple) mais dans mon cas comme j'avais des marges uniquement sur une boîte je ne voyais pas le problème.
Ma solution n'est donc pas mauvaise.



#conteneur {
	width: 250px;
	background-color: #11397B;
	padding: 10px 0 10px 0;
}
#menu {
	border: 1px solid #8497c2;
	margin: 0 10px 0 10px;
}


Merci pour la solution.
Sujet clos
Aller à