Les Allergies
Alimentaires
Posez votre question Signaler

Supprimer un espace entre 2 images (HTML)

redfish2009 3Messages postés 28 mai 2009Date d'inscription - Dernière réponse le 6 juin 2009 à 12:50
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
Lire la suite 

Supprimer un espace entre 2 images (HTML) »

7 réponses
Réponse
+0
moins plus
kryoportail 223Messages postés 10 août 2008Date d'inscription 23 février 2011Dernière intervention 28 mai 2009 à 19:51
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

 Ajouter un commentaire - Site web
Ajouter un commentaire
Réponse
+0
moins plus
redfish2009 3Messages postés 28 mai 2009Date d'inscription 28 mai 2009 à 23:29
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

 Ajouter un commentaire
kryoportail- 28 mai 2009 à 23:38
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
Ajouter un commentaire
Réponse
+0
moins plus
arthezius 2624Messages postés 15 mai 2008Date d'inscription 16 mai 2012Dernière intervention 28 mai 2009 à 23:41
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.

Ajouter un commentaire - Site web
Ajouter un commentaire
Réponse
+0
moins plus
kryoportail 223Messages postés 10 août 2008Date d'inscription 23 février 2011Dernière intervention 28 mai 2009 à 23:47
Re.....

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

Amicalement,
S@M...

 Ajouter un commentaire - Site web
Ajouter un commentaire
Réponse
+0
moins plus
redfish2009 3Messages postés 28 mai 2009Date d'inscription 4 juin 2009 à 08:59
Merci, beaucoup.

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

@ bientôt ...


RedFish

 Ajouter un commentaire
Ajouter un commentaire
Réponse
+0
moins plus
arthezius 2624Messages postés 15 mai 2008Date d'inscription 16 mai 2012Dernière intervention 6 juin 2009 à 12:50
Si ton problème est résolu, oublie pas de mettre le statu en résolu.

Ajouter un commentaire - Site web
Ajouter un commentaire
Posez votre question
Ce document intitulé « Supprimer un espace entre 2 images (HTML) » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.
Dossier à la une
Passage au tout numérique : quel coût pour les particuliers ?