CSS - Espace indesirable entre DIV et IMG

julieng31

23 Avril 2007 14:53:04

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 :

== 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;

}

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.

Autres pages sur : css espace indesirable div img

| Etre averti des réponses
| Alerter

Répondre à julieng31

KangOl

23 Avril 2007 16:02:39

c'est le margin auto qui fait ca

| Alerter

Répondre à KangOl

julieng31

23 Avril 2007 21:35:26

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.

| Alerter

Répondre à julieng31

KangOl

24 Avril 2007 16:04:31

tu as une url de test ?

| Alerter

Répondre à KangOl

julieng31

25 Avril 2007 09:46:40

Non, je n'ai pas d'url.

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

== Page HTML (index.html) ==

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a>">

<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>" 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;

}

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

| Alerter

Répondre à julieng31