Archiv autora: nothrem

Zarovnání na střed v kontejneru

Zarovnat text 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.

Absolutní nebo procentuelní pozicování uvnitř kontejneru

Pokud chcete použít absolutní pozicování nebo nastavení rozměrů pomocí procent, ale pouze v rámci určitého kontejneru (např. zarovnat prvky nalevo od středu – tedy doprava na levé polovině stránky; nechat element vyplnit nadřazený kontejner, apod.), můžete k tomu použít relativní pozici kontejneru:

.container {
    position: relative; 
}
.absoluteChild { 
    position: absolute; right: 0; 
}
.fillChild {
    width: 90%; height: 100%; margin: 0 auto;
}

Po použití zde uvedených CSS stylů dojde k tomu, že absoluteChild bude zarovnáno na pravou stranu kontejneru container, zatímco fillChild bude vyplňovat kontejner na výšku a zabírat 90% jeho šířky (přičemž bude zarovnáno na střed). Oba prvky se budou samozřejmě překrývat díky tomu, že absoluteChild je absolutně pozicované.

Skrolování prstem

Možná to zní divně, ale ani na dotykových zařízeních není výchozí, že lze skrolovat obsah prstem.

Celou stránku samozřejmě posouvat prstem jde, ale pokud do stránky vložíte nějaký kontejner např. s overflow:auto nebo overflow:scroll, tak mobilní prohlížeče tyto styly zpravidla ignorují a zobrazí jen to, co se vejde na obrazovku.

Pro povolení ale stačí použít jednoduchý styl:

.container {
    /* nastaví scrollování na desktopu */
    height: 100%;
    overflow: auto;
    
    /* povolí skrolovat obsah prvku
       pomocí posouvání prstem */
    -webkit-overflow-scrolling: touch;
}

Pozor ale na to, že takto upravený kontejner může na některých zařízeních způsobovat určité problémy (např. posouvání nebude tak plynulé jako když jde o jednoduchou stránku).

Vynucení jednoduchého chování na mobilech

Chytré telefony (iPhone, Android, apod.) mají ve svých prohlížečích celou řadu doplňkových vlastností, které se vám ale ne vždy mohou hodit. Pro jejich vypnutí můžete použít některý (nebo i všechny) z následujících vlastností:

html, body {
    /* zakázání změny velikosti textu
     - užitečné, pokud máte layout přesně
       napasovaný na použité texty */
    -webkit-text-size-adjust: none;

    /* zakáže použití akce tap&hold
      (podržení) pro zobrazení kontextového
       menu - touto akcí se většinou dá
       zkopírovat text stránky, uložit
       obrázek ze stránky, apod. */
    -webkit-touch-callout: none;

    /* zakáže použití akce tap&hold
      (podržení) pro výběr textu - užitečné,
       pokud text tvoří část grafiky a
       není tedy vhodné, aby šel vybrat
       a zkopírovat */
    -webkit-user-select: none;

    /* Povolí Fast-Tap pro rychlé reakce
       odkazů a tlačítek; také vypne zoom
       pomocí double-tap; iOS 9.3+ */
    <code>touch-action: manipulation</code>;
}

HR může pomoci při obtékání

Element HR slouží jako vodorovná čára. Pokud ho ale nepoužíváte a naopak používáte plovoucí prvky (float), občas (nebo spíše často) můžete potřebovat obtékání zastavit (clear).

K tomu lze snadno použít právě element HR, kterému seberete okraj (border):

hr {
    clear: both;
    border: 0 none;
    height: 0;
}

Díky tomu, že HR ve výchozím stylu zabírá pouze jeden pixel na výšku (někdy 2px, protože vytváří stínovanou čáru) a má pouze horní rámeček (border-top), se dá takhle snadno změnit na neviditelný oddělovač plovoucích prvků.