Obrázky na stránce bez rušivých mezer

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:

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>:

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:

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.