CSS - Espace indesirable entre DIV et IMG

julieng31 · 23 Avril 2007

Bonjour,

je souhaiterais coller simplement une balise <DIV> derriere une balise <IMG> sans avoir un espace entre les deux. J'ai effectue pas mal de recherche pour ce probleme apparemment assez courant mais aucune des solutions proposees ne fonctionne (je suis sous FF 2.0).

Voici le code :

[cpp]

== Code HTML ==

<div id="placement_navigateur" class="centrage_page"><img src="./design/header.png" alt="Image" id="entete" /><div id="corps"></div></div>

== CSS ==

#placement_navigateur {
margin-top: 40px;
}
.centrage_page {
width: 760px;
margin-left: auto;
margin-right: auto;
}
#entete {
height: 202px;
width: 760px;
}
#corps {
width: 760px;
background-image: url(./design/fond.png);
background-repeat: repeat-y;
}

[/cpp]

Le code est ecrit sans espaces car les images sont de type inline et pour eviter un espace indesirable, beaucoup de posts conseillent cette maniere de coder.
J'ai aussi essaye les solutions avec 0px de padding et de margin, mais, j'ai toujours le meme probleme.

Mon seul moyen pour ne pas voir apparaitre cet espace sous FF est de mettre display: block; pour l'image "entete". Or, si j'ai bien compris le principe, le type bloc implique un retour a la ligne et l'espace que je ne souhaite pas (comme les <p> par exemple) entre les elements affiches. Donc ceci ne me parait pas une maniere propre de coder car en demandant d'avoir cet espace, je ne l'ai pas et inversement !!?

Est que quelqu'un aurait une soluion propre a mon probleme ?

Merci d'avance.

KangOl · 23 Avril 2007

c'est le margin auto qui fait ca

julieng31 · 23 Avril 2007

Je viens de faire le test en supprimant ces margin, ça n'a rien changé à mon problème (hormis de me décaler toute la page à gauche, ce qui est normal).

J'ai fait le test sous Opéra, j'ai le même problème.

KangOl · 24 Avril 2007

tu as une url de test ?

julieng31 · 25 Avril 2007

Non, je n'ai pas d'url.

Mais voici le code simplifie pour que le probleme apparaisse clairement:

[cpp]
== Page HTML (index.html) ==

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>TEST</title>
<link href="css.css" type="text/css" rel="stylesheet" />
</head>

<body>
<div id="placement_navigateur" class="centrage_page"><img id="entete" src="./1.png" alt="Image" /><div id="corps" class="centrage_page">
<div id="menu"></div>
<div class="contenu">
<p>TEST</p>
</div>
<div class="spacer"> </div>
</div>

</div>
</body>
</html>

== CSS (css.css)
body {
background-color: blue;
}

#placement_navigateur {
width: 760px;
margin-top: 40px;
}

.centrage_page {
margin-left: auto;
margin-right: auto;
}

#entete {
width: 760px;
height: 202px;
}

#corps {
width: 760px;
background-color: red;
background-repeat: repeat-y;
}

#menu {
width: 205px;
height: 420px;
float: left;
background-color: yellow;
background-repeat: no-repeat;
}

.contenu {
width: 500px;
float: right;
margin-right: 40px;
margin-left: 15px;
}

.spacer {
clear: both;
}
[/cpp]

et il faut creer une image de 760 par 202 px nommee 1.png (par exemple de couleur noire).

CSS - Espace indesirable entre DIV et IMG

julieng31

KangOl

julieng31

KangOl

julieng31