Ecart entre deux blocs

Sujet résolu

5 janvier 2006 à 15:42:37

Bonjour tout le monde,

[Edit]Mon problème a été résolu...en fouillant un peu sur google j'ai trouvé que ie faisait des siennes parce que les images osnt inline... la solution sur cette page[/Edit]

Voila mon probleme: Sous ie mes "blocs" (j'explique les "" un peu plus tard) sont espacés alors que je voudrais que l'espace sois nul. Rien de mieux que des image pour comprendre:

ie:

ff:

Le code se présente comme ca:

Avec ce css:

.item_smenu
{
border: none;
display: block;
padding:0px;
margin:0px;
position: relative;
top: 0px;
left: 0px;
}
#smenu_presentation
{
/*visibility: hidden; */
position: absolute;
top: 225px;
left:255px;
width: 133px;
height: 102px;
overflow: hidden;
padding-top: 5px;
z-index: 3;
background-image: url(http://www.fallengalaxy.com/test/Fond_SMenu1.jpg);
background-repeat: no-repeat;
}

Comme vous pouvez le voir j'ai essayé un peu tout pour item_smenu mais il n'y a pas moyen de rapprocher ces blocs. Donc si quelqu'un a une propriété css miracle qui ne chamboule pas ff et permette à ie de marcher ca sera pas mal. Sinon il reste la solution de positionner les images en absolute mais ca ne me plait pas trop.

Neoshin

5 janvier 2006 à 18:05:49

+1

Bonjour,

je suis nouveau sur le forum et j'ai le même problême.

Après avoir lu le tutoriel sur le XHTML et le CSS, je me suis appliqué à changer le design de mon site
( http://vodkamalin.free.fr ).

Mais malheureusement ma bannière ( en 3 parties ) ne s'affiche pas correctement sur IE.

Voici le plus réussi de mes essais : http://neoshin84.free.fr

Si quelqu'un a une idée, car ça fait une semaine que je suis dessus :colere2:

b.moyet

5 janvier 2006 à 18:24:37

Tu peux essayer de remplacer ces deux propriétés css :

.leblocbanniereheader {

width: 640px;/*640*/
height: 146px;

margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;

background: url('images/Site-Mag_05.jpg') no-repeat;
}

.leblocmenuheader {

width: 640px;
height: 40px;

margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;

background: url('images/Site-Mag_06.jpg');
border-top: 1px solid #000000;
}

par celles la

.leblocbanniereheader {

width: 640px;/*640*/
height: 146px;

float: left;

background: url('images/Site-Mag_05.jpg') no-repeat;
}

.leblocmenuheader {

width: 640px;
height: 40px;

float: left;

background: url('images/Site-Mag_06.jpg');
border-top: 1px solid #000000;
}

Firefox est toujours bien mais peut etre que sous ie ca changera (pendant mes recherches j'avais lu quelques chose comme quoi il faudra peut-être mettre un position: absolute; et regler la position avec left: ; ). Ce problème serait du à ie qui laisse un marge de 3px automatique a la droite d'un float.

Neoshin

5 janvier 2006 à 18:37:10

C'est vraiment pas logique ....
mais alors pas logique....

Mais ça fonctionne !!

MERCI