créer un tableau d'images cliquables sans espaces - HTML/CSS - Programmation
Marsh Posté le 31-08-2009 à 13:11:27
Bonjour, c'est quoi "display block" et comment dois-je faire?
merci
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> ).
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é...
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".
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
Marsh Posté le 05-09-2009 à 16:15:35
As-tu essayé un clear:both; dans ta css ?
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 ?
Marsh Posté le 05-09-2009 à 23:23:28
Faut faire ça en CSS :
Code :
|
Préfère le css aux attributs direct dans la balise.
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&lg=fr&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&lg=fr&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&lg=fr&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&lg=fr&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&lg=fr&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&lg=fr&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&lg=fr&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&lg=fr&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>