Rechercher : dans
Par :

Supprimer un espace entre 2 images (HTML)

Dernière réponse le 6 jun 2009 à 12:50:22 redfish2009, le 28 mai 2009 à 19:46:01 
 Signaler ce message aux modérateurs

Bonjour à toutes et à tous, :)

Voilà, quelques jours que j'essaie de trouver une solution à mon problème.

J'ai retravaillé une photo sous Photoshop et la divisé en plusieurs parties (4)pour avoir un meilleur affichage sur mon blog. J'ai ensuite inseré les 4 html.

Le problème c'est une séparation qui apparait entre les images. Je voudrais réunir mes 4 parties bout à bout.

Connaissez-vous un code HTML à rajouter ou à supprimer?

Merci d'avance

Configuration: Windows XP Internet Explorer 7.0

Meilleures réponses pour « Supprimer un espace entre 2 images (HTML) » dans :
[Photofiltre]Réaliser un assemblage de 2 images VoirPhotofiltre est un logiciel de retouche d'image. Cette astuce fonctionne aussi bien avec Photofiltre qu'avec Photofiltre Studio Dans ce cas précis, Photofiltre va permettre d'assembler un collage c'est-à-dire de coller une deuxième image (en...
Espace en HTML VoirEn HTML, les espaces consécutifs sont ignorés par les navigateurs, au même titre que les retours chariots ou les tabulations. Pour insérer plusieurs espaces consécutifs, il est nécessaire d'utiliser une entité HTML spécifique, appelée espace...
Les CSS pour présenter vos images VoirPour présenter agréablement vos images, vous pouvez intégrer quelques codes supplémentaires dans votre CSS et vous en servir à bon escient. Elles sont bien sur modulables en fonction de la charte graphique de votre site. Utilisation Mettez les codes...
Gestion des images en HTML VoirComment afficher des images sur une page web? Quelques images sur un site Web peuvent le rendre plus attractif et plus convivial, cependant il est important de ne pas sombrer dans l'excès car les images peuvent impliquer un temps de chargement...

1

kryoportail, le 28 mai 2009 à 19:51:05

Salut,

Une solution utilisé anciennement via les tableaux :

<table cellspacing="0" cellpadding="0" border="0">
<tr><td><img src="1.jpg" /></td><td><img src="2.jpg" /></td></tr>
<tr><td><img src="3.jpg" /></td><td><img src="4.jpg" /></td></tr>
</table>

Autant te dire que c'est dégueulasse au niveau HTML...

Le mieux, à mon avis est de bricoler via CSS...

<style type="text/css">
<!--
#ImgContainer { width: 400px; height: 400px; }
#ImgContainer div { width: 200px; height: 200px; float: left; }
#Img1{ background-image: url(img1.jpg); }
#Img2{ background-image: url(img2.jpg); }
#Img3{ background-image: url(img3.jpg); }
#Img4{ background-image: url(img4.jpg); }
-->
</style>


<div id="ImgContainer">
<div id="Img1"></div>
<div id="Img2"></div>
<div id="Img3"></div>
<div id="Img4"></div>
</div>



Amicalement,
S@M...
http://kryoportail.ath.cx

Répondre à kryoportail

2

redfish2009, le 28 mai 2009 à 23:29:41

Merci beaucoup, ça fonctionne très bien ! Une dernière petite questioin.

Si je voulais réunir 3 images découpées de manière horizontale, serait-ce possible d'utiliser le code suivant? ...


<table cellspacing="0" cellpadding="0" border="0">
<tr><td><img src="image1.jpg" /></td></tr>
<tr><td><img src="image2.jpg" /></td></tr>
<tr><td><img src="image3.jpg" /></td></tr>
</table>


Merci

Répondre à redfish2009

3

kryoportail, le 28 mai 2009 à 23:38:30

Re,

Oui, ça placera les images les unes en dessous des autres avec ce que tu as écrit...

Note : Quitte à être un peu chiant, les tableaux ne sont normalement pas fait pour positionner des éléments dans une page web !.... Mais tout simplement pour présenter des données tabulées !...

Pour donner du sens à son texte : on utilise le HTML (paragraphe, tableau, liste, titres, etc...)
Pour présenter le contenu : on utilise le CSS (positionnement, mise en gras, polices, etc...)
Ceci afin de rendre les sites accessibles au maximum de gens, de navigateurs, de systèmes.

cf: http://www.alsacreations.com/

Amicalement,
S@M...
http://kryoportail.ath.cx

Répondre à kryoportail

4

arthezius, le 28 mai 2009 à 23:41:13
  • +1

Autant le faire plus proprement. Le W3C recommande de ne plus utiliser les tableaux pour mettre en forme un site web. Ce que tu proposes là reviens au même.
Tu peux faire ça très bien de la manière suivante:

<div><img src="image1.jpg" /></div>
<div><img src="image2.jpg" /></div>
<div><img src="image3.jpg" /></div>

Et dans le CSS met les margin à 0px. Ainsi, tu supprimes tout espace entre les trois images. « La recherche commence là où s'arrête la connaissance. »

Répondre à arthezius

5

kryoportail, le 28 mai 2009 à 23:47:23

Re.....

Vi !!!!!! 100% d'accord....

Amicalement,
S@M...

Répondre à kryoportail

6

redfish2009, le 4 jun 2009 à 08:59:13

Merci, beaucoup.

Vos réponses m'ont beaucoup aidés !

@ bientôt ...


RedFish

Répondre à redfish2009

7

 arthezius, le 6 jun 2009 à 12:50:22

Si ton problème est résolu, oublie pas de mettre le statu en résolu. « La recherche commence là où s'arrête la connaissance. »

Répondre à arthezius