CSS trik: Element z buňky umístěný mimo pozici tabulky
Aktualizujeme v těchto dnech sekci Cykly a festivaly na webu holešovického kina OKO a objevil se přitom zajímavý kodérský oříšek — jak umístit element nacházející se v buňce tabulky mimo její tělo?
Následuje rozlousknutí. Není to žádná věda a bude to krátké, slibuji.
Cílem je stav viditelný na první obrázku. (Naživo můžete vidět na stránce filmu, teď třeba Muziky.)
Strážce sémantiky obsahu ve mě říká, aby štítek s označením cyklu („Baby Bio”) byl součástí řádku tabulky. Jak ale dosáhnout toho, aby jej návštěvník v prohlížeči viděl umístěný mimo její tělo?
Pomůžeme si absolutně pozicovaným „kotvícím” elementem, který bude v HTML kódu rodičem našeho štítku. Samotný štítek pak relativně napozicujeme do patřičných míst.
Řešení je vizualizováno v druhém obrázku — rodičovský element je modrý (šipka v něm je ilustrační) a náš štítek pak oranžový:
Zjednodušený CSS kód:
.blue {
position: relative;
width: 1px;
height: 1px;
}
.orange {
position: absolute;
width: 300px;
right: -317px;
top: 5px;
}
Otestováno všude možně — budete si v různých prohlížečích muset pohrát s pozicí, ale principielně funguje i v IE6.
