Page 1 sur 1
2 images avec un saut de ligne de 0px
Posté : 16 janv. 2007, 09:41
par guilt92
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.
Posté : 16 janv. 2007, 09:47
par albat
Et ceci ?
<img src="image1.png" alt="Image 1" /><br /><img src="image2.png" alt="Image 2" />
Posté : 16 janv. 2007, 10:53
par guilt92
Ceci marche bien avec FF mais avec IE il y a un espace entre les 2 images. (IE 7 en tous cas...)
Posté : 16 janv. 2007, 11:00
par albat
tu as bien précisé dans tes styles les margin à 0 ?
Posté : 16 janv. 2007, 11:20
par guilt92
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...
Posté : 16 janv. 2007, 11:28
par Ajoloca
Bonjour,
Et avec un line-height:0; ???
Posté : 16 janv. 2007, 11:34
par guilt92
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 ?
Posté : 16 janv. 2007, 11:42
par Ryle
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 :
Alors que ceci oui :
Posté : 16 janv. 2007, 11:55
par guilt92
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...
Posté : 16 janv. 2007, 12:06
par Ryle
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.
Posté : 16 janv. 2007, 12:26
par guilt92
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>
Posté : 16 janv. 2007, 12:41
par Ryle
J'ai pas de problème avec ton code...
essayes éventuellement avec un border 0 ?
Posté : 16 janv. 2007, 13:10
par guilt92
Parfait cela fonctionne.
Merci beaucoup à tous.