Pokud vytváříte graficky bohaté stránky, určitě se vám již někdy stalo, že jednotlivé části obrázku, které jsou vložené do samostatných buněk tabulky, obsahují mezi sebou rušivé mezery, respektive na sebe nenavazují. Problém je to určitě nepříjemný, nicméně – snadno vyřešitelný.

Pokud vám není příliš jasné z popisu ke článku, o co vlastně jde, snad vám pomůže následující ukázka a zdrojový kód:

<table cellspacing=“0″ cellpadding=“0″ border=“0″>
<tr>
   <td>
<img src=“obrazek1.gif“ width=“100″ height=“100″ alt=““ border=“0″>
<img src=“obrazek2.gif“ width=“100″ height=“100″ alt=““ border=“0″>
<img src=“obrazek3.gif“ width=“100″ height=“100″ alt=““ border=“0″>
   </td>
</tr>
</table>

Mezi obrázky jsou mezery, které jsou v tomto případě nežádoucí. Je to díky tomu, že jednotlivé tagy <IMG> jsou umístněny na novém řádku, respektive, jsou odřádkovány pomocí klávesy ENTER. V HTML je sice jedno, jak je zdrojový kód naformátován, ale v tomto případě to prostě jedno není. Jaké je řešení? Velmi jednoduché – jednotlivé <IMG> tagy umístěte těsně za sebou, bez jakýchkoliv mezer a nezapomeňte je také „přilepit“ k tagům <TD> a </TD>:

<table cellspacing=“0″ cellpadding=“0″ border=“0″>
<tr>
   <td><img src=“obrazek1.gif“ width=“100″ height=“100″ alt=““ border=“0″><img src=“obrazek2.gif“ width=“100″ height=“100″ alt=““ border=“0″><img src=“obrazek3.gif“ width=“100″ height=“100″ alt=““ border=“0″></td>
</tr>
</table>

Jak vidíte, funguje to a samotný postup je triviální. Samotné obrázky jsou ale ve stránce vloženy způsobem, jakoby nezáleželo na jejich vzájemné pozici. Lepším (a doporučeným) postupem pro umístňování rozřezaných obrázků do stránky je vložení těchto obrázků do samostaných buněk tabulky, čímž tak máte větší kontrolu nad jejich pozicí na stránce vůči ostatním prvkům na stránce. Stejně jako v minulém případě ale musíte vložit tag <IMG> ihned za <TD> a </TD>, a nevkládat mezi ně žádnou mezeru anebo ENTER. Správné řešení vypadá takto:

<table cellspacing=“0″ cellpadding=“0″ border=“0″>
<tr>
<td><img src=“navazovani03.gif“ width=“100″ height=“100″ alt=““ border=“0″></td>
<td><img src=“navazovani02.gif“ width=“100″ height=“100″ alt=““ border=“0″></td>
<td><img src=“navazovani01.gif“ width=“100″ height=“100″ alt=““ border=“0″></td>
</tr>
</table>

A na závěr – zajímá vás, co se stane, když mezi jednotlivé <TD> a jednotlivé <IMG> vložíte mezeru anebo dokonce ENTER? Obrázky na sebe v prohlížeči nemusí vůbec navazovat ve vodorovném směru (vzniknou nechtěné mezery), a v některých prohlížečích můžou být obrázky dokonce vůči sobě posunuty ve svislém směru.

Přeji vám hezký den.

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.

4 Příspěvků v diskuzi

  1. Možná to je trochu jiné téma, ale přesto se zeptám – na svém webu jsem vytvořil tabulku, kde je v jednom jejím řádku několik obrázků, každý slouží jako odkaz. Problém je, že ve Firefoxu a IE se kolem jednotlivých obrázků objeví modré orámování, zatímco Chrome nemá problém. Jak na věc? Díky za radu.

Odpovědět