Archiv rubriky: Pozicování

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.

Co nedělat při návrhu webu ve Photoshopu

Navrhovat web ve Photoshopu je špatný nápad, ale když váš grafik s ničím jiným neumí dělat, nemáte na výběr. V takovém případě ale existuje řada věcí, kterým by se měl grafik vyhnout nebo je naopak vzít v úvahu, aby bylo možné jeho práci použít pro vytvoření webové stránky.

Pokračování textu Co nedělat při návrhu webu ve Photoshopu

Detekce polohovacích zařízení

Pomocí @media můžete vytvořit responzivní layout v závislosti na šířce obrazovky, čímž můžete celkem dobře poznat, jestli uživatel pracuje na mobilu, tabletu nebo desktopu a podle toho uzpůsobit další prvky (např. větší ikony na mobilu).

V posledních letech ale narážíme na zařízení, která se této definici vymykají. Např. Note zařízení, která mají mobilní displej (320px), ale jdou ovládat hodně přesným perem. Nebo naopak dotykové monitory, které mají 4k rozlišení, ale ovládají se pouze prstem (takže na 16x16px ikonu se prakticky nedá kliknout). Navíc některá zařízení jsou již schopna detekovat ukázání prstem (hover) nebo sílu stisku (3D touch).

Pokračování textu Detekce polohovacích zařízení

Animace zobrazení obrázku na pozadí

Obrázek v pozadí prvku lze použít jako náhražku obyčejného obrázku (image) na celou řadu věcí, s jednou výjimkou – zobrazení nebo skrytí obrázku na pozadí není možno animovat pomocí transition (podle W3C je možno animovat pouze barvu a pozici).

Nebo existuje nějaký způsob, jak dát prvku obrázek do pozadí (např. sprite) a zároveň animovat jeho zobrazení? Samozřejmě bez použití JS.

Pokračování textu Animace zobrazení obrázku na pozadí

Proměnné v CSS již dnes

Možnost používat CSS proměnné (někdy známé jako CSS Makra) je starý požadavek, který se do teď řešil různými generátory jako jsou SASS nebo LESS. Ty ale mají tu nevýhodu, že stále generují statické definice, které nelze (jednoduše) měnit za běhu programu (tedy na straně klienta).

W3C ale již pracuje na nové specifikaci CSS Custom Properties for Cascading Variables, která umožní využívání proměnných a dokonce i jejich snadnou změnu na straně klienta a tedy dynamickou hromadnou změnu stylů.

A i když jde stále jen o návrh, proměnné můžete již nějakou dobu používat ve Firefoxu (plná podpora v 42+) a také nově v Chrome 49+, Safari 9.1+ a iOS 9.3+. Microsoft podporu zvažuje.

UPDATE: V Edge 15 (Windows Creators Edition) jsou Custom properties plně podporovány. Jediný (stále používaný) prohlížeč, který je tedy neumí, je IE11 (podle statistik v době vydání Creators edition používá IE11 dvakrát tolik lidí než Edge).

Pokračování textu Proměnné v CSS již dnes

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.

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

jQuery width() vs. css(‚width‘) při border-box

Nastavit nebo přečíst šířku prvku přes jQuery lze dvěma (zdánlivě rovnocennými) způsoby:

$el.width('100%');
$el.css('width', '100%');
$el.css({width: '100%'}); //alternativní zápis
                          // předchozího způsobu

Ve většině případů se chovají stejně – v tomto případě prostě nastaví prvku šířku na 100% jeho rodiče.
Pokud ale danému prvky nastavíte vlastnost box-sizing na border-box, najednou se začnou výsledky těchto zůsobů rozcházet a pokud je střídáte pro nastavení stejné velikosti (např. protože kód psali dva různí programátoři, a každý preferuje jiný zápis), může se prvek chovat dost podivně.

Pokračování textu jQuery width() vs. css(‚width‘) při border-box