2 images avec un saut de ligne de 0px

16 janv. 2007, 09:41

Bonjour,

Je suis désolé de poser une question aussi basique mais je m'en sors pas : j'essaye tout simplement d'avoir une image puis une autre à la ligne mais que la ligne soit totalement invisible. J'ai essayé avec un interligne de 0px, en enlevant les marge et padding des deux images mais rien n'y fait... Sinon j'y arrive avec une marge négative pour l'image du dessous mais sous IE et Firefox cela ne réagi pas pareil... Quelqu'un aurait il une solution ?

Merci.

16 janv. 2007, 09:47

Et ceci ?

<img src="image1.png" alt="Image 1" /><br /><img src="image2.png" alt="Image 2" />

16 janv. 2007, 10:53

Ceci marche bien avec FF mais avec IE il y a un espace entre les 2 images. (IE 7 en tous cas...)

16 janv. 2007, 11:00

tu as bien précisé dans tes styles les margin à 0 ?

16 janv. 2007, 11:20

Oui, en fait le seul truc pour que ca marche sous IE c'est justement de mettre une margin-top a -18px ce qui bien sur ne fait pas plaisir à FF...

16 janv. 2007, 11:28

Bonjour,

Et avec un line-height:0; ???

16 janv. 2007, 11:34

Bonjour,

Le line-height:0; réduit l'espace entre les 2 images mais il en reste encore

La seule solution est-elle le positionnement absolu à la bonne hauteur ?

16 janv. 2007, 11:42

Pas besoin de bricoler les styles, il te suffit simplement de ne pas mettre d'espace ou de retour à la ligne entre ta première image et ton <br />

Ceci ne génèrera pas d'espace entre tes images :

Code : Tout sélectionner

<img src="image.jpg" /><br />
<img src="image.jpg" />

Alors que ceci oui :

Code : Tout sélectionner

<img src="image.jpg" />
<br />
<img src="image.jpg" />

16 janv. 2007, 11:55

Pendant un moment j'ai cru a cette solution mais en fait ca marche pas parce que mon code génère du javascript pour les images de la premiere ligne et apres la seconde image est mise a la suite :

Code : Tout sélectionner

<script language="javascript" type="text/javascript">
for(i=0;i<menu_images_name.length;i++)
	{
	document.write("<img id=\"menu_item\" src='"+menu_images_out[i].src+"' onMouseOver='this.src=\""+menu_images_in[i].src+"\"' onMouseOut='this.src=\""+menu_images_out[i].src+"\"'>");
	}
</script> 
<img id="background" src="images/background.jpg">

Ainsi meme quand je mets pas de <br> il y a cet espace

Merci en tous cas...

16 janv. 2007, 12:06

Même principe.. ne met pas de retour à la ligne entre ta balise </script> et ton image :

Code : Tout sélectionner

<script language="javascript" type="text/javascript"> 
for(i=0;i<menu_images_name.length;i++) 
   { 
   document.write("<img id=\"menu_item\" src='"+menu_images_out[i].src+"' onMouseOver='this.src=\""+menu_images_in[i].src+"\"' onMouseOut='this.src=\""+menu_images_out[i].src+"\"'>"); 
   } 
</script><img id="background" src="images/background.jpg">

Ca devrait passer correctement

Edit : a noter un petit soucis dans le code généré, toutes les images dans ta boucle ont le même id : id=\"menu_item\". En principe l'id d'un élément doit être unique dans toute la page.

16 janv. 2007, 12:26

Oki merci désolé pour l'id j'avais mis class avant et j'ai tenté et j'ai oublié de remettre class...
Malheureusement ca marche toujours pas...
Voici un bout du code avec les styles inclus je comprend vraiment pas ...

Code : Tout sélectionner

<head>
<style>
.background {
margin:0;
padding:0;
}

.menu_item {
padding:0;
margin:0;
}
</style>

</head>

<body>
<div id="content">
<script language="javascript" type="text/javascript">
for(i=0;i<menu_images_name.length;i++)	document.write("<img class=\"menu_item\" src='"+menu_images_out[i].src+"' onMouseOver='this.src=\""+menu_images_in[i].src+"\"' onMouseOut='this.src=\""+menu_images_out[i].src+"\"'>");
</script><img class="background" src="images/background.jpg">
</div>
</body>

16 janv. 2007, 12:41

J'ai pas de problème avec ton code...
essayes éventuellement avec un border 0 ?

16 janv. 2007, 13:10

Parfait cela fonctionne.

Merci beaucoup à tous.

2 images avec un saut de ligne de 0px

Qui est en ligne