Šachovnicový výpis položek

Cílem je vytvořit výpis položek, kdy obrázek a jeho popis je na střídačku. Na lichém řádku je popis vlevo a obrázek vpravo, na sudém řádku obráceně.

  • Výška obrázku i textu je neznámá.
  • Někdy může být vyšší obrázek, jindy text.
  • Výška řádku je určena tím, co je vyšší.
  • Nižší položka je potom svisle centrovaná.
  • Při zobrazení na malé obrazovce, kdy se obrázek a popis nevejdou vedle sebe, má být vždy popis nad obrázkem.

Mělo by to vypadat nějak takto:

Šachovnicový výpis položek s různou výškou

Centrování

Kvůli svislému centrování je jasné, že bude třeba použít tabulkové hodnoty vlastnosti display. Šlo by použít i flexboxy, ale ty fungují až od IE 10.

Vytvoří se tedy CSS tabulka:

.tabulka {
    display: table; 
    width: 100%;
}
.radek {
    display: table-row;
}
.bunka {
    display: table-cell; 
    vertical-align: middle; 
    width: 50%; 
    text-align: center;
}

Živá ukázka

Pro zobrazení na malých zařízeních se potom tabulka „rozláme“.

@media (max-width: 600px) {
    .bunka, .radek, .tabulka {
        display: block; 
        width: auto; 
        text-align: left;
    }
}

Prohození sloupců

Po vycentrování zbývá jen prohodit sloupce sudých řádků. Od IE 9 pro jejich zaměření funguje selektor n-tého potomka:

.radek:nth-child(even) {
  /* styly pro sudý řádek */
}

To even znamená anglicky sudý, lichý je potom odd. Pro případnou funkčnost v IE 8 je nutné příslušné třídy přidat ručně (serverovým skriptem).

Vlastnost transform: translate

Od IE 9 jde používat tzv. CSS transformace. Jedna z nich se jmenuje translate a umí přesouvat objekty na stránce.

Na sudých řádcích potom takto můžeme obsah vlevo dostat doprava posunutím o 100 % šířky:

transform: translate(100%, 0);

Analogicky dostat obsah zprava doleva. Tentokrát odečtením 100 % šířky:

transform: translate(-100%, 0)

Druhý parametr funkce translate určuje svislé posunutí, to je nulové, protože potřebujeme posouvat jen vodorovně.

Živá ukázka

Relativní posicování

Podobného efektu jde ale obdobným způsobem docílit i relativním posicováním s daleko lepší podporou.

Živá ukázka

Změna směru textu

S originálním řešením přišel Chamurappi. To spočívá ve využití CSS vlastnosti direction, která určuje, jestli je text psán (standardně) zleva doprava (ltr – left to right) nebo naopak zprava doleva (rtl – right to left).

Když totiž tabulce nastavíme direction zprava do leva, prohodí se pořadí sloupců. Pro buňky se direction zase vrátí, aby se text správně zobrazoval, a sloupce jsou elegantně prohozeny.

Měnit direction je nutné pro celou tabulku, nestačí to jen pro samostatný řádek.

Živá ukázka

Tento postup jde kromě skutečných tabulek využít i u „CSS tabulek“, čímž vznikne asi nejlepší řešení tohoto problému.

Živá ukázka

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

Zvýraznění řádků a sloupců tabulky

Zvýraznění sloupců/řádků tabulky po najetí

Jak při najetí myší na tabulku zvýraznit příslušné sloupce a řádky.

CSS mapa s popisky

Body s popisky na mapě

Statická obrázková mapa s vlastními body a :hover popisky.

Zvýraznění aktivní kotvy

Zvýraznění aktivované kotvy (:target)

Pokud se v rámci stránky používají odkazy na jednotlivé #části, může být vhodné zvýrazněním ukázat, kam odkaz mířil.

Baterka v CSS a JavaScriptu

Vytvoření efektu baterky v CSS a JS

Jak jednoduše vytvořit na stránce efekt baterky? Tedy ztmavit web a prohlížet ho jakýmsi průzorem.

Kreslení v CSS

„Kreslení“ pomocí CSS

Jak vytvářet jednoduché tvary místo obrázků prostým CSS?

Komentáře