odstępy w tabeli ... Opcje

[d4ng]

Witam serdecznie, już kilka razy używałem tabeli do osadzenia buttonów i zawsze wszystko działało tak tu nie może... (IMG:http://edytor-html.pl/mapka.jpg)

[HTML] pobierz, plaintext 
<table style="width: 600px; height: 500px; padding: 0px;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td><a href="http://domena.pl/index.php/wina/wg-regionow/d-o-rias-baixas-galicja-wina-bia.html" target="_self"><img src="{{media url="wysiwyg/1a.png"}}" alt="" /></a></td>
<td><img src="{{media url="wysiwyg/1b.png"}}" alt="" /></td>
<td><a href="http://domena.pl/index.php/wina/wg-regionow/d-o-arlanza-wino-ekologiczne.html" target="_self"><img src="{{media url="wysiwyg/1c.png"}}" alt="" /></a></td>
<td><img src="{{media url="wysiwyg/1d.png"}}" alt="" /></td>
<td><a href="http://domena.pl/index.php/wina/wg-regionow/d-o-c-rioja.html" target="_self"><img src="{{media url="wysiwyg/1e.png"}}" alt="" /></a></td>
<td><a href="http://domena.pl/index.php/wina/wg-regionow/d-o-navarra.html" target="_self"><img src="{{media url="wysiwyg/1f.png"}}" alt="" /></a></td>
<td><img src="{{media url="wysiwyg/1g.png"}}" alt="" /></td>
<td><img src="{{media url="wysiwyg/1h.png"}}" alt="" /></td>
</tr>
<tr>
<td><img src="{{media url="wysiwyg/2a.png"}}" alt="" /></td>
<td><a href="http://domena.pl/index.php/wina/wg-regionow/d-o-toro.html" target="_self"><img src="{{media url="wysiwyg/2b.png"}}" alt="" /></a></td>
<td><a href="http://domena.pl/index.php/wina/wg-regionow/d-o-rueda-wina-bia.html" target="_self"><img src="{{media url="wysiwyg/2c.png"}}" alt="" /></a></td>
<td><a href="http://domena.pl/index.php/wina/wg-regionow/d-o-ribera-del-duero.html" target="_self"><img src="{{media url="wysiwyg/2d.png"}}" alt="" /></a></td>
<td><img src="{{media url="wysiwyg/2e.png"}}" alt="" /></td>
<td><a href="http://domena.pl/index.php/wina/wg-regionow/d-o-campo-de-borja-aragonia.html" target="_self"><img src="{{media url="wysiwyg/2f.png"}}" alt="" /></a></td>
<td><a href="http://domena.pl/index.php/wina/wg-regionow/d-o-c-a-priorat.html" target="_self"><img src="{{media url="wysiwyg/2g.png"}}" alt="" /></a></td>
<td><a href="http://domena.pl/index.php/wina/wg-regionow/d-o-penedes.html" target="_self"><img src="{{media url="wysiwyg/2h.png"}}" alt="" /></a></td>
</tr>
<tr>
<td><a href="http://domena.pl/index.php/wina/wg-regionow/d-o-jerez-y-manzanilla-de-sanlucar-de-barrameda.html" target="_self"><img src="{{media url="wysiwyg/3a.png"}}" alt="" /></a></td>
<td><img src="{{media url="wysiwyg/3b.png"}}" alt="" /></td>
<td><a href="http://domena.pl/index.php/wina/wg-regionow/d-o-malaga-s.html" target="_self"><img src="{{media url="wysiwyg/3c.png"}}" alt="" /></a></td>
<td><a href="http://domena.pl/index.php/wina/wg-regionow/d-o-la-mancha.html" target="_self"><img src="{{media url="wysiwyg/3d.png"}}" alt="" /></a></td>
<td><img src="{{media url="wysiwyg/3e.png"}}" alt="" /></td>
<td><img src="{{media url="wysiwyg/3f.png"}}" alt="" /></td>
<td><img src="{{media url="wysiwyg/3g.png"}}" alt="" /></td>
<td><img src="{{media url="wysiwyg/3h.png"}}" alt="" /></td>
</tr>
</tbody>
</table>
[HTML] pobierz, plaintext 

[vokiel]

Po pierwsze primo - tabele służą do przedstawiania danych tabelarycznych, anie do tworzenia struktury pod mapę obrazków.
Po drugie, sprawdź paddingi, marginesy, line-height, może jakiś fragment css coś nadpisuje. Nasz firebug'a, dragon fly, albo inne narzędzia developerskie w przeglądarkach, prawda?

[prowseed]

Zrob sobie duzego div'a z tlem hiszpanii calej z atrybutem position:relative; i osadz w nim mniejsze divy, spany, czy img z jednopikselowym przezroczystym gifem. Ogolnie moga to byc nawet puste divy, ktorym nadasz wartosci:

[CSS] pobierz, plaintext 
.button {
width:150px; /*szerokosc*/
height:30px;
position:absolute;
display:block;
}
.miasto1 { top:100px; left:200px; }
.miasto2 { top:200px; left:300px; }
[...]
[CSS] pobierz, plaintext 

Powinno starczyc; i tak buduj przyciski

[HTML] pobierz, plaintext 
<div id="mapa">
<span class="button miasto1">&nbsp;</span>
<span class="button miasto2">&nbsp;</span>
</div>
[HTML] pobierz, plaintext 

Musisz to sobie oczywiscie dopracowac, ale masz ogolny zarys.

Ten post edytował prowseed 7.01.2012, 22:56:18