créer un tableau d'images cliquables sans espaces

créer un tableau d'images cliquables sans espaces - HTML/CSS - Programmation

Marsh Posté le 31-08-2009 à 11:27:48    

Bonjour,
J'ai besoin de réaliser un tableau composé de visuels cliquables.
Il y a 10 images en tout sur 2 colonnes. J'ai besoin qu'au final lorsque je vais éditer ma page,
mes visuels apparaissent comme étant une seule et même image, sans espace entre chacun d'eux.
Ce n'est pas le cas dans ma construction actuelle. Qu'y a t-il qui cloche? Faut-il utiliser autre chose que du HTML pour avoir qqch de correct?
 
Merci d'avance de votre réponse.
NB : je suis une bille en HTML et autres langages (CSS, PHP,...). Soyez patients avec moi... ;o)
 
Voici mon code source :
 
<table cellspacing="0" cellpadding="0" width="200" align="left" summary="" border="0">
    <tbody>
        <tr>
            <td><a target="_blank" href="http://tpm-offline.emakina.net/MiniSites/FRANCE/Page.aspx?contentid=464&amp;lg=fr&amp;rdm=0.3727384889393081"><img style="BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px" height="71" alt="" width="354" border="0" src="DisplayFile.aspx?filename=/carte-france-01.jpg" /></a></td>
            <td><a target="_blank" href="http://tpm-offline.emakina.net/MiniSites/FRANCE/Page.aspx?contentid=463&amp;lg=fr&amp;rdm=0.9432436761566287"><img style="BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px" height="71" alt="" width="335" border="0" cellspacing="0" cellpadding="0" src="DisplayFile.aspx?filename=/carte-france-02.jpg" /></a></td>
        </tr>
        <tr>
            <td><a target="_blank" href="http://tpm-offline.emakina.net/MiniSites/FRANCE/Page.aspx?contentid=462&amp;lg=fr&amp;rdm=0.7340697879812732"><img style="BORDER-TOP-WIDTH: 0px; style: " height="88" alt="" width="354" border="0" cellspacing="0" cellpadding="0" src="DisplayFile.aspx?filename=/carte-france-03.jpg" /></a></td>
            <td><a target="_blank" href="http://tpm-offline.emakina.net/MiniSites/FRANCE/Page.aspx?contentid=411&amp;lg=fr&amp;rdm=0.23342087993844185"><img style="BORDER-TOP-WIDTH: 0px; style: " height="88" alt="" width="335" border="0" cellspacing="0" cellpadding="0" src="DisplayFile.aspx?filename=/carte-france-04.jpg" /></a></td>
        </tr>
        <tr>
            <td><img height="90" alt="" width="354" border="0" src="DisplayFile.aspx?filename=/carte-france-05_20090825_1207.jpg" /></td>
            <td><img style="BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; style: " height="90" alt="" width="335" border="0" cellspacing="0" cellpadding="0" src="DisplayFile.aspx?filename=/carte-france-06_20090821_1310.jpg" /></td>
        </tr>
        <tr>
            <td><a target="_blank" href="http://tpm-offline.emakina.net/MiniSites/FRANCE/Page.aspx?contentid=418&amp;lg=fr&amp;rdm=0.6792737271534571"><img style="BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px" height="107" alt="" width="354" border="0" cellspacing="0" cellpadding="0" src="DisplayFile.aspx?filename=/carte-france-07_20090821_1254.jpg" /></a></td>
            <td><a target="_blank" href="http://tpm-offline.emakina.net/MiniSites/FRANCE/Page.aspx?contentid=466&amp;lg=fr&amp;rdm=0.9788244452097281"><img style="BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px" height="107" alt="" width="335" border="0" cellspacing="0" cellpadding="0" src="DisplayFile.aspx?filename=/carte-france-08.jpg" /></a></td>
        </tr>
        <tr>
            <td><a target="_blank" href="http://tpm-offline.emakina.net/MiniSites/FRANCE/Page.aspx?contentid=418&amp;lg=fr&amp;rdm=0.6792737271534571"><img style="BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px" height="148" alt="" width="354" border="0" cellspacing="0" cellpadding="0" src="DisplayFile.aspx?filename=/carte-france-09_20090821_1252.jpg" /></a></td>
            <td><a target="_blank" href="http://tpm-offline.emakina.net/MiniSites/FRANCE/Page.aspx?contentid=467&amp;lg=fr&amp;rdm=0.019577715280728658"><img style="BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px" height="148" alt="" width="335" border="0" cellspacing="0" cellpadding="0" src="DisplayFile.aspx?filename=/carte-france-10.jpg" /></a></td>
        </tr>
    </tbody>
</table>

Reply

Marsh Posté le 31-08-2009 à 11:27:48   

Reply

Marsh Posté le 31-08-2009 à 11:49:49    

Faut mettre les images en display block

Reply

Marsh Posté le 31-08-2009 à 13:11:27    

Bonjour, c'est quoi "display block" et comment dois-je faire?
merci

Reply

Marsh Posté le 31-08-2009 à 13:27:00    

Le display block serait a ajouter dans le img style:
<img style="BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px; display: block" height="71" alt="" width="354" border="0" src="DisplayFile.aspx?filename=/carte-france-01.jpg" />
 
Mais je ne suis pas certain que cela soit vraiment utile, parce que j'ai déjà fait des tableaux de morceaux d'images jointives, et je ne crois pas me souvenir que cela fusse nécessaire. Je crois que le problème viendrait plutôt du <a ..>...</a>, auquel il faudrait ajouter un style sans marge. Pour cela  le plus simple serait d'ajouter :  
 
<style>
a { margin: 0 }
</style>
 
dans l'entête du fichier (entre <head> et </head> ).

Reply

Marsh Posté le 31-08-2009 à 13:55:00    

Oh oh, j'ai rajouté les display block, c'est pire,
la partie <style>  
a { margin: 0 }  
</style>
 
est transformée en :
<style type="text/css">
 
 
a { margin: 0 } </style>
 
bref, y a rien de changé...

Reply

Marsh Posté le 31-08-2009 à 14:10:33    

Je vois un petit problème :
 
<table cellspacing="0" cellpadding="0" width="200" align="left" summary="" border="0">
 
Cette largeur de 200 pixels entre en contradiction avec la largeur des images qui sont 354 et 335 pixels. Peut-être qu'il suffirait d'enlever le width="200".

Reply

Marsh Posté le 31-08-2009 à 14:25:36    

ce problème semble être corriace...

Reply

Marsh Posté le 31-08-2009 à 14:36:14    

Faut que les <a> et les <img> soient les 2 en display block. Fixer les tailles des cellules aussi.
 
Et pis sinon balancer le tableau foireux, et tout foutre en position absolute, ce serait plus simple [:dawa]

Reply

Marsh Posté le 05-09-2009 à 16:15:35    

Reply

Marsh Posté le 05-09-2009 à 21:58:35    

moulagofre a écrit :

As-tu essayé un clear:both; dans ta css ?


 
Ou sinon as-tu essayé un margin-right: 38px; dans ta css ?
 
 :??:


---------------
Gamertag: CoteBlack YeLL
Reply

Marsh Posté le 05-09-2009 à 21:58:35   

Reply

Marsh Posté le 05-09-2009 à 23:23:28    

Faut faire ça en CSS :
 

Code :
  1. table
  2. {
  3.    border-collapse:collapse;
  4.    padding:0px;
  5. }
  6. tr,td
  7. {
  8.    padding:0px;
  9. }


 
Préfère le css aux attributs direct dans la balise.


Message édité par Pascal le nain le 05-09-2009 à 23:24:46
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed