Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: odstępy w tabeli ...
Forum PHP.pl > Forum > Po stronie przeglądarki > HTML \ XHTML
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...

  1. <table style="width: 600px; height: 500px; padding: 0px;" border="0" cellspacing="0" cellpadding="0">
  2. <tr>
  3. <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>
  4. <td><img src="{{media url="wysiwyg/1b.png"}}" alt="" /></td>
  5. <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>
  6. <td><img src="{{media url="wysiwyg/1d.png"}}" alt="" /></td>
  7. <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>
  8. <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>
  9. <td><img src="{{media url="wysiwyg/1g.png"}}" alt="" /></td>
  10. <td><img src="{{media url="wysiwyg/1h.png"}}" alt="" /></td>
  11. </tr>
  12. <tr>
  13. <td><img src="{{media url="wysiwyg/2a.png"}}" alt="" /></td>
  14. <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>
  15. <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>
  16. <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>
  17. <td><img src="{{media url="wysiwyg/2e.png"}}" alt="" /></td>
  18. <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>
  19. <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>
  20. <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>
  21. </tr>
  22. <tr>
  23. <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>
  24. <td><img src="{{media url="wysiwyg/3b.png"}}" alt="" /></td>
  25. <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>
  26. <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>
  27. <td><img src="{{media url="wysiwyg/3e.png"}}" alt="" /></td>
  28. <td><img src="{{media url="wysiwyg/3f.png"}}" alt="" /></td>
  29. <td><img src="{{media url="wysiwyg/3g.png"}}" alt="" /></td>
  30. <td><img src="{{media url="wysiwyg/3h.png"}}" alt="" /></td>
  31. </tr>


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:
  1. .button {
  2. width:150px; /*szerokosc*/
  3. height:30px;
  4. position:absolute;
  5. display:block;
  6. }
  7. .miasto1 { top:100px; left:200px; }
  8. .miasto2 { top:200px; left:300px; }
  9. [...]

Powinno starczyc; i tak buduj przyciski
  1. <div id="mapa">
  2. <span class="button miasto1">&nbsp;</span>
  3. <span class="button miasto2">&nbsp;</span>
  4. </div>


Musisz to sobie oczywiscie dopracowac, ale masz ogolny zarys.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.