Découpe d'image : Problème d'alignement
Bonjour à tous.
J'ai cherché dans les anciens messages une possible solution à mon souci mais sans succès alors….
Je ne suis pas vraiment débutant en html mais j'ai encore beaucoup de lacunes.
J'essais de créer un page avec une image principale découpée en morceaux de 150*150 px. Ceci parce que certaines cellules sont soumises à un lien et un script.
1er problème rencontré : Alors que j'ai découpé mon image avec The Gimp au pixel près, toutes les images des cellules de gauche étaient 1px plus grande. Je n'ai pas compris pourquoi mais j'ai réglé le souci en recoupant.
Suite à ça, sous IE, les deux premiers tableaux sont nickels mais sous Firefox, il reste un espace entre les lignes.
2em problème auquel je ne trouve pas de solution : dès que je rentre un lien et/ou les codes script la composition éclate. Tableaux 3 et 4.
J'aimerais savoir s'il y a un moyen de régler ce souci ou si je dois abandonner cette présentation?
Je précise qu'au final, il ne restera que le dernier tableau. Les autres ne sont là que pour tester et mettre en forme.
Merci d'avance.
http://pagesperso-orange.fr/fantasy3...interieur.html
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>La boutique du Petit Peuple</title>
<style type="text/css" media="screen">
body {
background-color: #4C0D0C;
scrollbar-arrow-color: #FF0000;
scrollbar-3dlight-color: #FF0000;
scrollbar-highlight-color: #FF0000;
scrollbar-face-color: #6C0D0C;
scrollbar-shadow-color: #580000;
scrollbar-darkshadow-color: #580000;
scrollbar-track-color: #4C0D0C;
}
/*Mise en forme générale des textes*/
font,th,td,p { font-family: Comic sans Ms, Verdana, Arial, Helvetica, sans-serif }
.gen { font-size : 13px; }
.genmed { font-size : 11px; }
.gensmall { font-size : 10px; }
.gen,.genmed,.gensmall { color : #000000; }
a.gen,a.genmed,a.gensmall { color: #404040; }
a.gen:hover,a.genmed:hover,a.gensmall:hover { color: #00FFFF; text-decoration: overline;}
/*Mise en forme spéciale des textes*/
.infos { font-size: 11px; color :#FFFFFF; }
a.infos { font-size: 11px; color: #00FFFF; }
</style>
<script language="javascript" src="bulle.js"></script>
<SCRIPT LANGUAGE="JavaScript">
if(document.images)
{
i705485 = new Image;
i705485 = "images/intobj.jpg";
}
{
i705486 = new Image;
i705486 = "images/intpoud.gif";
}
{
i705487 = new Image;
i705487 = "images/intpom.jpg";
}
{
i705488 = new Image;
i705488 = "images/intbot.jpg";
}
</SCRIPT>
</head>
<body>
<table summary="Intérieur du magasin" width="80%" align="center" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td><img src="images/11.jpg" width="100%" border="0" /></td>
<td><img src="images/12.jpg" width="100%" border="0" /></td>
<td><img src="images/intobj.jpg" width="100%" border="0" /></td>
<td><img src="images/14.jpg" width="100%" border="0" /></td>
<td><img src="images/15.jpg" width="100%" border="0" /></td>
</tr>
<tr>
<td><img src="images/intpoud.jpg" width="100%" border="0" /></td>
<td><img src="images/22.jpg" width="100%" border="0" /></td>
<td><img src="images/23.jpg" width="100%" border="0" /></td>
<td><img src="images/24.jpg" width="100%" border="0" /></td>
<td><img src="images/25.jpg" width="100%" border="0" /></td>
</tr>
<tr>
<td><img src="images/31.jpg" width="100%" border="0" /></td>
<td><img src="images/32.jpg" width="100%" border="0" /></td>
<td><img src="images/33.jpg" width="100%" border="0" /></td>
<td><img src="images/34.jpg" width="100%" border="0" /></td>
<td><img src="images/intpom.jpg" width="100%" border="0" /></td>
</tr>
<tr>
<td><img src="images/41.jpg" width="100%" border="0" /></td>
<td><img src="images/intbot.jpg" width="100%" border="0" /></td>
<td><img src="images/43.jpg" width="100%" border="0" /></td>
<td><img src="images/44.jpg" width="100%" border="0" /></td>
<td><img src="images/45.jpg" width="100%" border="0" /></td>
</tr>
<tbody>
</table>
<br>
<table summary="Intérieur du magasin" width="80%" align="center" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td><img src="images/11.jpg" width="100%" border="0" /></td>
<td><img src="images/12.jpg" width="100%" border="0" /></td>
<td><img src="images/etoil13.gif" width="100%" border="0" /></td>
<td><img src="images/14.jpg" width="100%" border="0" /></td>
<td><img src="images/15.jpg" width="100%" border="0" /></td>
</tr>
<tr>
<td><img src="images/etoil21.gif" width="100%" border="0" /></td>
<td><img src="images/22.jpg" width="100%" border="0" /></td>
<td><img src="images/23.jpg" width="100%" border="0" /></td>
<td><img src="images/24.jpg" width="100%" border="0" /></td>
<td><img src="images/25.jpg" width="100%" border="0" /></td>
</tr>
<tr>
<td><img src="images/31.jpg" width="100%" border="0" /></td>
<td><img src="images/32.jpg" width="100%" border="0" /></td>
<td><img src="images/33.jpg" width="100%" border="0" /></td>
<td><img src="images/34.jpg" width="100%" border="0" /></td>
<td><img src="images/etoil35.gif" width="100%" border="0" /></td>
</tr>
<tr>
<td><img src="images/41.jpg" width="100%" border="0" /></td>
<td><img src="images/etoil42.gif" width="100%" border="0" /></td>
<td><img src="images/43.jpg" width="100%" border="0" /></td>
<td><img src="images/44.jpg" width="100%" border="0" /></td>
<td><img src="images/45.jpg" width="100%" border="0" /></td>
</tr>
<tbody>
</table>
<br>
<table summary="Intérieur du magasin" width="80%" align="center" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td><img src="images/11.jpg" width="100%" border="0" /></td>
<td><img src="images/12.jpg" width="100%" border="0" /></td>
<td>
<a href="objets.html">
<img src="images/etoil13.gif" width="100%" border="0" />
</a>
</td>
<td><img src="images/14.jpg" width="100%" border="0" /></td>
<td><img src="images/15.jpg" width="100%" border="0" /></td>
</tr>
<tr>
<td>
<a href="poudres.html">
<img src="images/etoil21.gif" width="100%" border="0" hspace=/>
</a>
</td>
<td><img src="images/22.jpg" width="100%" border="0" /></td>
<td><img src="images/23.jpg" width="100%" border="0" /></td>
<td><img src="images/24.jpg" width="100%" border="0" /></td>
<td><img src="images/25.jpg" width="100%" border="0" /></td>
</tr>
<tr>
<td><img src="images/31.jpg" width="100%" border="0" /></td>
<td><img src="images/32.jpg" width="100%" border="0" /></td>
<td><img src="images/33.jpg" width="100%" border="0" /></td>
<td><img src="images/34.jpg" width="100%" border="0" /></td>
<td>
<a href="aliments.html">
<img src="images/etoil35.gif" width="100%" border="0" />
</a>
</td>
</tr>
<tr>
<td><img src="images/41.jpg" width="100%" border="0" /></td>
<td>
<a href="textiles.html">
<img src="images/etoil42.gif" width="100%" border="0" />
</a>
</td>
<td><img src="images/43.jpg" width="100%" border="0" /></td>
<td><img src="images/44.jpg" width="100%" border="0" /></td>
<td><img src="images/45.jpg" width="100%" border="0" /></td>
</tr>
<tbody>
</table>
<br>
<table summary="Intérieur du magasin" width="80%" align="center" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td><img src="images/11.jpg" width="100%" border="0" /></td>
<td><img src="images/12.jpg" width="100%" border="0" /></td>
<td>
<a class="rouge" onmouseover="this.className='rougeOver';infBul('Que des beaux <b>OBJETS</b> utiles ici!!!!'); i705485.src='images/intobj.jpg'" onmouseout="this.className='rouge';infBul(0); i705485.src='images/etoil13.gif'" href="objets.html">
<img src="images/etoil13.gif" width="100%" border="0" NAME="i705485" ALT="Objets" />
</a>
</td>
<td><img src="images/14.jpg" width="100%" border="0" /></td>
<td><img src="images/15.jpg" width="100%" border="0" /></td>
</tr>
<tr>
<td>
<a class="rouge" onmouseover="this.className='rougeOver';infBul('Snif! Snif! ATCHOUMMMMM!!!!<br>Brrrr!! Toutes les <b>POUDRES</b> sont ici'); i705486.src='images/intpoud.jpg'" onmouseout="this.className='rouge';infBul(0); i705486.src='images/etoil21.gif'" href="poudres.html">
<img src="images/etoil21.gif" BORDER="0" NAME="i705486" ALT="Poudres" />
</a>
</td>
<td><img src="images/22.jpg" width="100%" border="0" /></td>
<td><img src="images/23.jpg" width="100%" border="0" /></td>
<td><img src="images/24.jpg" width="100%" border="0" /></td>
<td><img src="images/25.jpg" width="100%" border="0" /></td>
</tr>
<tr>
<td><img src="images/31.jpg" width="100%" border="0" /></td>
<td><img src="images/32.jpg" width="100%" border="0" /></td>
<td><img src="images/33.jpg" width="100%" border="0" /></td>
<td><img src="images/34.jpg" width="100%" border="0" /></td>
<td>
<a class="rouge" onmouseover="this.className='rougeOver';infBul('Miam! Miam!! Que des bons<br> <b>ALIMENTS</b> pour le ventre!'); i705487.src='images/intpom.jpg'" onmouseout="this.className='rouge';infBul(0); i705487.src='images/etoil35.gif'" href="aliments.html">
<img src="images/etoil35.gif" BORDER="0" NAME="i705487" ALT="Aliments" />
</a>
</td>
</tr>
<tr>
<td><img src="images/41.jpg" width="100%" border="0" /></td>
<td>
<a class="rouge" onmouseover="this.className='rougeOver';infBul('Super les <b>TEXTILES</b>!<br>Ca va être la classe!'); i705488.src='images/intbot.jpg'" onmouseout="this.className='rouge';infBul(0); i705488.src='images/etoil42.gif'" onclick="this.className='rouge';" href="textiles.html">
<img src="images/etoil42.gif" BORDER="0" NAME="i705488" ALT="Textiles" HSPACE="0" VSPACE="0" />
</a>
</td>
<td><img src="images/43.jpg" width="100%" border="0" /></td>
<td><img src="images/44.jpg" width="100%" border="0" /></td>
<td><img src="images/45.jpg" width="100%" border="0" /></td>
</tr>
<tbody>
</table>
<br><br>
<div align="center">
<span class="infos">image : "Methuselah of Redwall" de Richard Sardinha sur <a href="http://www.epilogue.net/index.php" target="_blank" style="color: #00FFFF"> www.epilogue.net</a></span>
</div>
</body>
</html> |