28220 sujets

CSS et mise en forme, CSS3

[Résolu]Espacement entre deux div - images

Bonjour,


Comment faire disparaître l'espacement qu'il y a entre deux div ? Chacun de ces deux div comprend une image (elles sont l'une sous l'autre), et à l'aperçu, sous IE et Firefox, il existe un décalage, un espacement de 2 px environ entre les 2 images.

Au cas où, je vous donne mon code : 

<body>
	<div id="page">
		<div class="haut">
			<img src="../images/moustayou-haut.gif" alt="" height="16" width="780" />
		</div>
		<div class="titre">
			<img src="../images/moustayou.gif" alt="" height="100" width="780" />
		</div>
	</div>
</body>




et la CSS : 

body {
	font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
	color: #FFFFFF;
	font-size: 10px;
	position: relative;
	left: 50%;
	width: 780px;
	margin-left: -390px;
	margin-top: 20px;
}

#page {
	position: relative;
	width: 780px;
	top: 0px;
	bottom: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
	margin: 0px;
	padding: 0px;	
}

.haut {
	position: relative;
	width: 780px;
	top: 0px;
	bottom: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
	margin: 0px;
	padding: 0px;
}

.titre {
	position: relative;
	width: 780px;
	top: 0px;
	bottom: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
	margin: 0px;
	padding: 0px;	
}






Par ailleurs, je souhaite rester en relative et ne pas utiliser l'absolute.


En vous remerciant par avance,
Seb.
Modifié par seb65 (10 Nov 2005 - 15:19)
Administrateur
Bonjour,

merci d'éditer le message pour y rajouter des balises [ code] et [ /code] (sans espaces) autour du code HTML et CSS, cela les rend beaucoup plus lisibles, tel que c'est demandé et expliqué dans les Règles du Forum. En cas de souci sur comment faire, n'hésite pas à envoyer un MP ou à demander ici Smiley cligne

As-tu essayé de faire débuter le CSS par

* { margin: 0;
  padding: 0 }

? Voir Sélecteur universel * {margin:0; padding:0} qu'en dites-vous ? pour les explications et la discussion. C'est radical mais efficace au moins dans un premier temps pour voir si le problème vient de là Smiley smile
Modifié par Felipe (10 Nov 2005 - 02:33)
Salut Felipe,

tout d'abord je m'excuse d'avoir oublié les balises pour le code, c'est maintenant réglé.

Ensuite, j'ai rajouté dans ma css le morceau de code que tu m'as donné, mais cela n'a rien changé malheureusement.

Pour avoir un aperçu de ce que ça donne, voici ma page de test.


Merci beaucoup.
Seb. Smiley cligne
Bonjour,

Il ne s'agit pas d'un problème de marges ou de padding, mais simplement de l'alignement vertical des images qui est par défaut à la valeur baseline, c'est à dire sur la ligne de base du texte dans lequel se trouve l'image : l'espace qui apparaît est celui des jambages inférieurs des lettres.

Pour le supprimer, utiliser la propriété vertical-align: middle sur les images concernées.
Salut Laurent, je te remercie, mon pb est résolu. C'est en effet ce qu'il faut utiliser.

Merci beaucoup !

Seb.
Smiley biggrin
Sujet clos
Aller à