Sujet Précédent Sujet Suivant

HTML/CSS: pb de <div> imbriqués et bordure

Résolu/Fermé
chantaussel Messages postés 137 Date d'inscription lundi 17 mars 2008 Statut Membre Dernière intervention 9 juillet 2014 - Modifié par chantaussel le 17/06/2010 à 19:36
chantaussel Messages postés 137 Date d'inscription lundi 17 mars 2008 Statut Membre Dernière intervention 9 juillet 2014 - 17 juin 2010 à 20:18
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
avion-f16 Messages postés 18924 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 26 septembre 2022 4 426
17 juin 2010 à 19:45
Certaines balises ont des marges internes et externes par défaut.
Tu peux les retirer avec « * { margin:0px; padding:0px; } ».
1
chantaussel Messages postés 137 Date d'inscription lundi 17 mars 2008 Statut Membre Dernière intervention 9 juillet 2014 31
17 juin 2010 à 19:52
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?
0
avion-f16 Messages postés 18924 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 26 septembre 2022 4 426
17 juin 2010 à 20:02
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.
0
chantaussel Messages postés 137 Date d'inscription lundi 17 mars 2008 Statut Membre Dernière intervention 9 juillet 2014 31
17 juin 2010 à 20:18
Génial ça marche, merci Avion-f16 :)
0