Archiv štítku: container

Zarovnání na střed v kontejneru

Zarovnání textu na střed není (doufám) problém; stačí použít:

.center { text-align: center; }

Problém ale nastane, pokud chceme zarovnat kontejner uvnitř jiného kontejneru. S tím nám pomůže automatický margin:

.parent {
    display: block;
    width: 300px;
}
.child {
    display: block;
    width: 200px;
    margin: 0 auto;
}

Nastavením marginu na auto říkáme prohlížeči, že chceme, aby obě protilehlá odsazení měla stejnou velikost. Tím logicky vznikne efekt zarovnání na střed.

Automatický margin platí pouze na element typu block; naopak zarovnání textu platí na inline elementy.

Vertikální zarovnání

Horizontální (zleva doprava) je jednoduché, ale se zarovnáním zhora dolu se trochu zapotíte – tedy pokud vám nestačí podpora jen v novějších prohlížečích (IE11+, Firefox 28+, Chrome 21+, Safari 9+):

.parent { 
    display: flex;
    flex-flow: column;
    align-content: center;
    width: 300px; 
} 
.child { 
    display: block; 
    width: 200px; 
    flex: 0 0 200px;
} 

Flexbox je nový nástroj na vytváření layoutu a jednou z jeho vlastností je to, že dokáže zarovnávat prvky uvnitř kontejneru.

Pokud chcete flexbox využít i v IE10, musíte použít speciální zápis (tzv. Tweener):

.parent { 
    display: -ms-flexbox;
    -ms-flex-flow: column;
    -ms-flex-align: center;
    width: 300px; 
} 

Ještě existuje jedna stará verze flexboxu pro Safari 3.1+ a Firefox 4+:

 
.parent { 
    display: -webkit-box;
    display: -moz-box;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-box-align: center;
    -moz-box-align: center;
    width: 300px; 
} 

Zarovnání více prvků

Výše uvedené kódy ale platí jen v případě, že uvnitř kontejneru je jen jeden prvek. Pokud jich máte více a chcete je vedle sebe zarovnané na střed (nebo nahoru či dolu), můžete flexbox použít jen v novějších prohlížečích:

.parent { 
    display: flex;
    flex-flow: row;
    align-content: center;
    justify-content: center;
    width: 300px; 
} 
.child1, .child2 { 
    display: block; 
    width: 100px; 
    flex: 0 0 100px;
} 

Pomocí align-content a justify-content pak můžete řídit, kam se prvky zarovnají. Více viz popis Flexboxu.

Zarovnání jako text

Pro starší prohlížeče můžete zarovnat pouze text pomocí vlastnosti vertical-align. Aby tato vlastnosti fungovala i na blokové prvky, musíte na prvky použít display: inline-block:

 
.parent { 
    display: block;
    width: 300px; 
} 
.child1, .child2 {
    display: inline-block;
    text-align: center;
    vertical-align: center;
    width: 100px;

Hodnota inline-block je podporována od IE8 a Firefox 3, což by dnes už neměl být problém. Firefox 2 podporuje -moz-inline-block.

Pokud byste potřebovali podporu i ve starších prohlížečích (IE7) nebo vertikální zarovnání z nějakého důvodu nefungovalo, budete muset použít tabulkový layout:

 
.parent { 
    display: table;
    width: 300px; 
} 
.child1, .child2 {
    display: table-cell;
    text-align: center;
    vertical-align: center;
    width: 100px; /* bude mít 150px!!! */

Pozor ale na to, že zatímco u flexbox a inline-block je možné zarovnat prvky na střed při zachování dané velikosti, tak u tabulky musí sloupce vyplnit celý prostor. Výše uvedená tabulka tedy bude mít sloupce 150px široké. Pokud byste chtěli zachovat sloupce 100px široké, museli byste šířku tabulky snížit na 200px a přidat jí margin: 0 auto. V tabulce se též prvky nemohou automaticky zalomit na další řádek.

Absolutní zarovnání

Pokud máte kontejner s pevnou velikostí a v něm jen jeden prvek, můžete ho zarovnat pomocí absolutního pozicování:

 
.parent() {
    position: relative;
    width: 300px;
    height: 200px;
}
.child {
    position: absolute;
    width: 200px;
    height: 100px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Pozici nahoře nebo vlevo nastavíte tím, že top nebo left nastavíte na nulu a dáte nulovou odpovídající hodnotu translate. Pozici dole nebo vpravo pak nastavíte tak, že top nebo left nastavíte na auto a přidáte bottom: 0 nebo right: 0.

Grid, aneb revoluce tabulkového layoutu

Jak přišel Grid na svět? Když se před pár lety (mezi 2009 – 2012) objevil ve W3C specifikaci CSS Flexbox layout, byl to první náznak toho, že dlouho používaným tabulkovým a plovoucím layoutům odzvonilo. Přesto ale flexbox nedokáže všechno vzhledem k tomu, že je založen na plovoucím uspořádání prvků. Složitější layouty se tak museli řešit vkládáním několika flexboxů do sebe a responzivita na tom byla dost špatně.

Proto se velice záhy rozhodlo W3C pro další nový layout, který by byl přímo zaměřen na vytváření responzivního layoutu – CSS Grid Layout. Bylo to opravdu záhy, poslední working draft (návrh) flexboxu je z října 2012 a první návrh gridu se objevil v listopadu 2012 (ale stejně jako u flexboxu existují i starší návrhy z předchozích let, ze kterých ten konečný čerpá). Na návrzích Flexboxu a Gridu navíc pracovali ti samí lidé, takže se oba pěkně doplňují, místo aby spolu soupeřili.

Grid layout se samozřejmě již nějakou dobu používá, ale zatím je to vždy jen nadstavba nad nějakým tabulkovým nebo plovoucím layoutem, který je obalený sadou CSS tříd pro umístění položek. Příkladem je Bootstrap Grid, který využívá plovoucí kontejnery (float: left) různých šířek umístěné do 12 sloupců.

Do září roku 2016 byl W3C Grid vyvíjen a byl dostupný pouze pro testování ve Firefoxu (options:layout.css.grid.enabled) a Chrome/Opera (flags:experimental Web Platform). Od roku 2017 (přesněji asi od března) by měl být již dostupný pro všechny uživatele, konkrétně ve Firefox 52+, Chrome 57+, Opera 43+ a Safari 10.1.

Internet Explorer 10/11 a Edge 12+ podporují jiný návrh z roku 2011 (známý jako Grid Align) – viz konec tohoto článku. V dubnu 2017 začal Microsoft pracovat na W3C verzi, která je experimentálně dostupná od buildu 16226. Pokud půjde vše dobře, mohl by Edge podporovat W3C grid v průběhu roku 2018.

Pokračování textu Grid, aneb revoluce tabulkového layoutu

ARIA jako CSS nástroj

Specifikace ARIA vznikla pro zpřístupnění webu postiženým uživatelům, kteří jsou odkázáni na různá zařízení jako jsou čtečky textu (text-to-speech), braillovo displeje či speciální ovládací joysticky nebo klávesnice.

ARIA = Accessible Rich Internet Application (Přístupná webová aplikace)

Specifikace ale obsahuje celou řadu rolí a vlastností, které můžete přiřazovat prvkům v HTML, můžete se na ně v CSS odkazovat přes selektor vlastnosti a v Javaskriptu je používat pro ukládání stavu prvků. Navíc WAI-ARIA je již součástí HTML5 specifikace, takže uvedením < !DOCTYPE html> je ARIA automaticky zahrnuto ve stránce (pro HTML4 bylo potřeba uvést správné DTD).

Pokračování textu ARIA jako CSS nástroj

Obrázek v DIVu bez okrajů

Pokud umístíte obrázek do DIVu za tím účelem, aby se DIV velikostí přizpůsobil obrázku (a umožnil např. zadání více borderů, nebo absolutní pozicování přes obrázek), někdy se setkáte s tím, že DIV má dole malý okraj, který přesně nesedí na obrázku. Navíc se tento okraj nedá najít v debuggeru, protože nejde o padding ani margin.

<div class="imgWrapper">
    <!-- autosize DIV around IMG -->
    <img src="..." />
</div>

Pokračování textu Obrázek v DIVu bez okrajů

Absolutně pozicovaný odkaz nefunguje na IE9?

Internet Explorer 9, který je stále rozšířený na počítačích s Windows XP a neaktualizovaných Vista a Windows 7, obsahuje jednu nepěknou chybu, která může uživatelům vašich stránek zabránit ji správně používat.

Chyba spočívá v tom, že odkaz, který je absolutně pozicovaný, nedostane správně nastavenu hodnotu z-index a v důsledku toho bude skrytý za ostatními prvky:

.linkContainer { width: 100px; height: 50px }
.linkContainer > * {
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0;
    z-index: 10;
}
/* display link above everything else */
.linkContainer > a { z-index: 11; }

V tomto případě bude mít v IE9 odkaz skutečný z-index = 1, takže jakýkoliv jiný prvek v kontejneru znemožní kliknout na něj.

Oprava je celkem jednoduchá – pokud do odkazu přidáte nějaký obrázek na pozadí, donutíte IE9 trochu více přemýšlet o tom, jak odkaz zobrazit a správně mu nastaví požadovaný z-index.

/* display link above everything else */
.linkContainer > a {
    z-index: 11;
    background: url('link.png') transparent;
}

Tento trik funguje i s prázným nebo dokonce neexistujícím obrázkem:

/* display link above everything else */
.linkContainer > a {
    z-index: 11;
    background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7) transparent;
/* 1x1px průhledný GIF */
} 

nebo

/* display link above everything else */
.linkContainer > a {
    z-index: 11;
    background: url(#) transparent;
/* # odkazuje na vlastní HTML stránku,
   což není validní obrázek a proto
   se v pozadí nic nezobrazí */
} 

Pokud nemůže řešit opravu pro konkrétní odkazy, stačí na začátek prvního CSS souboru (nebo na začátek HTML stránky) přidat obecnou definici:

a { background: url(#); /* Fix IE9 anchor */ }

Pokud bude tato definice skutečně na začátku, opraví automaticky všechny (potencionálně rozbité) odkazy a zároveň umožní ostatním CSS definicím definovat vlastní barvy a pozadí specifickým odkazům.

Ani tohle nepomohlo?

V některých případech se může zdát, že z-index v IE9 nejde nastavit některým (dalším) prvkům.

To je pravděpodobně způsobeno tím, že se pokoušíte umístit prvek absolutně přes nějaký z uživatelského pohledu důležitý prvek. V takovém případě IE9 zabrání znepřístupnění tohoto prvku tím, že zruší z-index prvkům, které by ho překrývali.

Za uživatelsky důležité jsou považovány formulářové prvky (input, select, atd.), videa, Java objekty a podobné prvky, které nativně reagují na kliknutí a jiné události myši.

Jak změnit obrázek přes CSS

Jestli děláte pro svou stránku šablony, jistě víte, že součástí šablony jsou často i různé grafiky, ikony a obrázky.

Pokud je stránka správně udělaná a připravená, není to problém, protože většina grafiky bude dělaná přes background-image a ikony přes sprity.

Co ale dělat v případě, že na stránce je natvrdo napsaný IMG s obrázkem, který potřebujete změnit?

Pokračování textu Jak změnit obrázek přes CSS

Proč nefunguje line-height?

Nastavíte prvku menší velikost písma a příslušnou line-height, ale prohlížeč line-height ignoruje a zobrazuje řádky příliš daleko od sebe?

<div>
    Lorem ipsum dolor sit amet,
    <span>
        consectetur adipiscing elit. ...
    </span>
</div>
div {
    font-size:32px;
    line-height:1.4EM;
}
span {
    font-size:12px;
    line-height:1EM;
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque bibendum ullamcorper nibh, mattis laoreet eros consectetur a. Nam aliquam venenatis tellus a cursus. In et mattis eros, eget ullamcorper nisi. Donec interdum iaculis feugiat. In a lobortis nulla. Proin egestas dolor id lorem semper, vitae viverra sapien scelerisque. Integer consequat venenatis nibh, id egestas ligula mollis eu. Cras vitae justo hendrerit, pretium elit sit amet, volutpat metus. Donec et sagittis nunc. Cras luctus turpis sed risus molestie, ac eleifend urna tristique. Aenean a nunc fermentum, bibendum nibh in, rutrum tellus. Aliquam dictum nunc quis leo tempor, vitae molestie tortor viverra.

Pokračování textu Proč nefunguje line-height?

Centrovaný modální dialog bez JS

Chcete zobrazit modální dialog ve stránce, který je vždy centrovaný do středu obrazovky? To asi budete potřebovat hodně skriptů na jeho otevření, vypočtení velikosti, vycentrování a jeho udržování v obraze (např. při otočení telefonu). Viz demo.

Ale co kdyby tohle všechno šlo udělat jen pomocí HTML a CSS, nebylo by to super?

A představte si, že to jde!

Pokračování textu Centrovaný modální dialog bez JS

Flexbox: Layout budoucnosti

Celkový layout (rozložení) stránky se z historicky-technických důvodů dělá různě: tabulkou, plovoucímu prvky či JavaScriptem.

Moderní prohlížeče ale nabízejí jednu metodu (s gridem jsou vlastně dvě), která dokáže prvky na stránce uspořádat tak, aby si zachovali svůj vzhled a zároveň se přizpůsobily stránce.

Pokračování textu Flexbox: Layout budoucnosti