[Résolu] Marges autours des images

Bonjour à tous

J'ai un piti problème avec des images, je suis entrain de coder un bout de page et j'ai des marges fantomes qui apparaissent autours de mes images. Je code bien sur avec une feuille de css et pour avoir un aperçu de ce qu'il se passe :

Rendez vous içi :

http://artusamak69.free.fr/test_compa/

Voilà le code HTMl et le CSS :

==[HTML]==
(Je vous passe les entêtes)

<div id="head">
<img src="./inc/images/head-left.gif" alt="image_bloc_gauche" />
<img src="./inc/images/head-right.gif" alt="image_bloc_droite" id="head-right" />
</div>

<div id="bloc">
<img src="./inc/images/border-left.gif" alt="bordure gauche" id="border-left"/>
<img src="./inc/images/logo.gif" alt="logo pcvore" title="Logo du site" />

        <div id="corps">
                <div class="navigation">
                        <p>PCVore.Com > Fiches Logiciels > Logiciel de décompression</p>
                </div>

                <div class="fiche">
                        <p class="fiche-head-center"><img src="./inc/images/fiche-head-left.gif" alt="fiche_head_left" />
                        Texte
                        <img src="./inc/images/fiche-head-middle.gif" alt="fiche_head_left" />
                        <img src="./inc/images/fiche-head-center2.gif" alt="fiche_head_left" />
                        <img src="./inc/images/fiche-head-right.gif" alt="fiche_head_left" /></p>
                </div>
        </div>
<p>Footer copyright</p>
</div>

==[CSS]==

body

{

margin-top: 0px;
background-color: #265593;

font-family:"Trebuchet MS", Verdana, Arial;
font-size: 0.8em;
color: #275797;

}

img
{
border:0;
margin:0;
padding:0;

}

#head

{

background-image: url(./inc/images/head-center.gif);
background-repeat: repeat-x;
background-position: top left;

}

#head-right
{

position: absolute;
top: 0px;
right: 8px;

}

#border-left
{

background-image: url(./inc/images/border-right.gif);
background-position: top right;
background-repeat: repeat-y;

}

#bloc

{

background-color: #436CAC;
background-image: url(./inc/images/border-right.gif);
background-position: top right;
background-repeat: repeat-y;

}

#corps

{

background-color: #FFFFFF;
margin: 10px;
padding: 20px;

}

.navigation
{

background-image: url(./inc/images/degrad-head.gif);
background-repeat: repeat-x;
height: 18px;
border: solid 1px #AC7544;

}

p {margin: 0px;}

.navigation p {margin: 0px;}


.fiche

{

margin-top: 15px;

}

.fiche-head-center
{

height: 26px;
vertical-align: text-top;
background-image: url(./inc/images/fiche-head-center.gif);
background-repeat: repeat-x;

}

Merci de votre aide
Modifié par Artusamak (23 Feb 2006 - 17:18)

peut etre que cette solution résoudra ton probleme

Non ca ne résoud pas le problème car en fait les images ont aussi des marges à gauche et à droite masi ton lien est bon à voir. Merci
Modifié par Artusamak (20 Feb 2006 - 21:20)

Salut,

Essaies de forcer les margin et les padding à 0 dans body et dans #head

Pareil, j'ai essayé sans css histoire de voir si les images se collaient avec du html simple et ca ne change rien


==[EDIT]==

En fait j'ai trouvé le problème ! Il faut que je supprime les saut de lignes entre les images sur le bloc note :

Je m'explique, j'avais :

                <div class="fiche">

                        <p class="fiche-head-center"><img src="./inc/images/fiche-head-left.gif" alt="fiche_head_left" />

                        Texte

                        <img src="./inc/images/fiche-head-middle.gif" alt="fiche_head_left" />

                        <img src="./inc/images/fiche-head-center2.gif" alt="fiche_head_left" />

                        <img src="./inc/images/fiche-head-right.gif" alt="fiche_head_left" /></p>

                </div>

Et bien je dois mettre :

                <div class="fiche">

                        <p class="fiche-head-center"><img src="./inc/images/fiche-head-left.gif" alt="fiche_head_left" />Texte<img src="./inc/images/fiche-head-middle.gif" alt="fiche_head_left" /><img src="./inc/images/fiche-head-center2.gif" alt="fiche_head_left" /><img src="./inc/images/fiche-head-right.gif" alt="fiche_head_left" /></p>                </div>

Etonnant

Autre problème (j'ai mis à jour la page si vous voulez voir) j'ai mon bloc <div class="fiche-head-center"> auquel j'ai appliqué la propriété : display: inline; pour pouvoir jouer avec mon image de fond et il déforme le bloc...

Avez vous une idée de la raison pour laquelle le bloc change de taille ?


Merci beaucoup
Modifié par Artusamak (21 Feb 2006 - 00:14)

Petit Up

huuuummmm ... en y réfléchissant bien, ça doit venir des balises images à l'intérieur des balises paragraphes. Perso, j'ai déjà obsérvé des décalages sous Firefox en faisant ça.

Essaies de sortir les images du paragraphe

Merci ca fonctionne !