Probleme espace vertical entre deux div [Résolu/Fermé]

Signaler
-
 Seb -
Bonjour,
et merci d'avance de prendre un peu de temps pour me répondre.
Je développe en ce moment un site web, cependant je me heurte a un problème que je n'arrive pas a résoudre:
un espace vertical entre deux div.
le proble se situe en le div menu et le div stats.
je vous met mon code

HTML:




	<div class="zone_gauche" >
		
		<div class="logo">
		</div>
		
		<div class="menu">
			</br>
			</br>
			</br>
			</br>
				<li> <a href="google.com">accueil </a> </br> </li>
				<li> <a href="google.com">news </a> </br> </li>
				<li> <a href="google.com">forum </a> </br> </li>
				<li> <a href="google.com">calendrier </a> </br> </li>
				<li> <a href="google.com">fiche des jeux </a> </br> </li>
				<li> <a href="google.com">inscription </a> </br> </li>
				<li> <a href="google.com">espace membre </a> </br> </li>
				<li> <a href="google.com">liste membres </a> </br> </li>
				<li> <a href="google.com">articles </a> </br> </li>
				<li> <a href="google.com">livre d'or </a> </br> </li>
				<li> <a href="google.com">nous défier </a> </br> </li>
				<li> <a href="google.com">me contacter </a> </br> </li>
		</div>
		
	
		<div class="stats">
			</br>
			</br>
			nggnng
		</div>
		
		<div class="info_gene">
		</div>
		
	
	</div>






Voici mon CSS:


.zone_gauche
{
background-color: white;
width: 200px;
height:auto;
float: left;
border: 3px;
border-style: groove;
}


.logo
{
background-image:url("Img/logo.png");
width: 200px;
height:254px;
}


.menu
{
background-image:url("Img/menu.png");
padding: 50px; 
background-repeat: no-repeat;
font-family: arial , sans-serif;
width: 200px;
height:400px;
list-style-type: circle;
}


.stats
{
background-image:url("Img/stats.png");
padding: 50px; 
background-repeat: no-repeat;
font-family: comic , sans-serif;
width: 200px;
height:300px;
list-style-type: circle;
}


3 réponses

Messages postés
484
Date d'inscription
jeudi 23 février 2006
Statut
Membre
Dernière intervention
26 juillet 2017
32
Je suis pas sûr d'avoir bien compris...
Tu veux un menu à gauche et un contenu à droite ? 1, 2, 3 colones ?
Si ton prob est "vertical" c'est que tu as trop d'espace entre le haut et le bas ?
Dans ce cas réduit "height"
Le mieux c'est que tu expliques mieux...
Messages postés
1959
Date d'inscription
mercredi 11 novembre 2009
Statut
Membre
Dernière intervention
8 juillet 2011
207
Alors déjà faudrait faire un code correct.

Ce n'est pas </br> c'est <br />, et un liste à puces se fait avec des <ul></ul> en début et fin d'items.
D'autre part, on n'utilise pas les retour à la ligne (<br />) pour créer des espaces, on utilise des padding, ou des margin, ou même des line-height dans la feuille de style.

Une fois tout cela corrigé, le phénomène, s'il persiste, est-il présent avec tous les navigateurs ou pas ?
Les navigateurs interprètent la touche ENTER comme étant un espace et cet espace est visible lorsque deux éléments HTML de type BLOC se suivent. Tel que les éléments p et div !

la solution est d'écrire ton site sous cette forme:

<div>
texte
</div><div>
texte
</div>

ou son équivalent sur une ligne:

<div>texte</div><div>texte</div>