HTML/CSS: pb de <div> imbriqués et bordure [Résolu/Fermé]

Signaler
Messages postés
137
Date d'inscription
lundi 17 mars 2008
Statut
Membre
Dernière intervention
9 juillet 2014
 -
Messages postés
137
Date d'inscription
lundi 17 mars 2008
Statut
Membre
Dernière intervention
9 juillet 2014
 -
Bonjour tout le monde,

J'ai deux <div> (appelons-les "div1 et "div2") imbriqués dans un troisième ("div3").
"div1" et "div2" sont côte à côte, chacun aillant une largeur de 5O% de "div3".
J'impose une hauteur fixe et commune aux trois blocs: 60px;
"div1" et "div2" ont en "background" une image, et contiennent chacun un lien.

Le problème et que lorsque je ne mets pas de bordure à "div2" (ce que je souhaite) l'ensemble des trois blocs se décale vers le bas et laisse un espace entre cet ensemble de trois blocs et le bloc du dessus (ce que je ne souhaite pas)...

Ca me laisse assez perplexe...


Merci d'avance à celui ou celle qui pourra m'aider :)



Voilà le code HTML: 

<body>   
  <div id="en_tete">   
   <h1>Titre du site</h1>   
  </div>   
     
  <div id="menu_horz">   
   <div id="menu_accueil">   
    <ul>   
     <li><a href="#">Accueil</a></li>   
    </ul>   
   </div>   
   <div id="menu_aide">   
    <ul>   
     <li><a href="#">Aide et plan du site</a></li>   
    </ul>   
   </div>   
  </div>



et le code CSS: 


#menu_horz   
{   
 height: 60px;   
}   

#menu_accueil   
{   
 height: 60px;   
 width: 50%;   
 float: left;   
 background: url("accueil.jpg") no-repeat top left white;    
}   

#menu_aide   
{   
 height: 60px;   
 margin-left: 50%;   
 background: url("aide.jpg") no-repeat top right white;   
 border: 1px solid black; // si j'enlève cette ligne le bloc se décale vers le bas...  
}





Quelques bases en javascript, débute en php/mySQL
J'essaie de mettre en ligne mon arbre généalogique.

1 réponse

Réponse 1 / 1
Messages postés
18515
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
3 mars 2021
 4 269
Certaines balises ont des marges internes et externes par défaut.
Tu peux les retirer avec « * { margin:0px; padding:0px; } ».
1
Merci
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 65492 internautes nous ont dit merci ce mois-ci

Signaler
Messages postés
137
Date d'inscription
lundi 17 mars 2008
Statut
Membre
Dernière intervention
9 juillet 2014
 31
Oui, merci, j'avais essayé, mais par défaut les marges externes des <div> sont nulles, et de rajouter cette ligne ne change rien.
Ce que je ne comprends pas c'est pourquoi le fait d'enlever une bordure change la position du bloc?
Signaler
Messages postés
18515
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
3 mars 2021
 4 269
Ce n'est pas les div le problème, mais les ul et les li. 
<div id="menu_horz">
	<div id="menu_accueil">
		<ul>
			<li><a href="#">Accueil</a></li>
		</ul>
	</div>
	
	<div id="menu_aide">
		<ul>
			<li><a href="#">Aide et plan du site</a></li>
		</ul>
	</div>
</div>
Le CSS :
ul { margin:0px; }
#menu_accueil
{
	height: 60px;
	width: 50%;
	float: left;
	background: url("accueil.jpg") no-repeat top left white; 
}

#menu_aide
{
	height: 60px;
	margin-left: 50%;
	background: url("aide.jpg") no-repeat top right white;
}
Inutile de préciser la hauteur de #menu_horz.
Signaler
Messages postés
137
Date d'inscription
lundi 17 mars 2008
Statut
Membre
Dernière intervention
9 juillet 2014
 31
Génial ça marche, merci Avion-f16 :)
Posez votre question