Archiv štítku: center

Formátování, HTML, Obrázky, Pozicování

Obrázek v DIVu bez okrajů

Napsat komentář

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ů →

HTML, Pozicování

Centrovaný modální dialog bez JS

Napsat komentář

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 →

HTML, Pozicování

Jak vyplnit prostor mezi plovoucímy prvky?

Napsat komentář

Pokud používáte plovoucí prvky, asi narazíte na problém, že prvky, které je obtékají se chovají poněkud podivně a zasahují i do prostoru rezervovaného pro plovoucí prvky:

Left
Right
center
center
center

 

V případě textu obtékajícího obrázek, což je nejčastější použití v článcích, je to efekt očekávaný, ale co dělat, když potřebujete, např. ve speciálním layoutu webové aplikace, aby prostřední prvek vyplnil prostor mezi plovoucími prvky a přitom do nich nepřesahoval?

Řešení je kupodivu velice jednoduché – stačí prostředními prvku nastavit oveflow:hidden a prohlížeč, aby zabránil překrývání plovoucího prvku obsahem toho prostředního, změní jeho šířku.

Left
Right
center
center
center

 

Pokračování textu Jak vyplnit prostor mezi plovoucímy prvky? →

HTML, Pozicování

Zobrazení stránky přes celé okno prohlížeče

Napsat komentář

U moderních stránek je často potřeba zobrazit obsah tak, aby vyplnil celé okno prohlížeče (např. kvůli pozadí, vycentrování horizontálně i vertikálně apod.). Většina designérů a programátorů většinou zkusí jako první krok CSS:

body { width: 100%; height: 100%; }

A když to nepřinese požadovaný efekt, tak přejdou k Javascriptu a velikost okna počítají dynamicky.

K tak drastickým řešením ale není důvod a stejného efektu lze dosáhnout i pomocí CSS, jen je potřeba vědět, co nastavit:

html, body { width: 100%; height: 100%; }

Stačí kromě BODY nastavit styl i na HTML, které každou stránku obklopuje, a jako zázrakem se celá stránka roztáhne. Pak již můžete nastavit pozadí automaticky zvětšené a centrované na okno prohlížeče:

body {
    background: url('/images/page-bg.png')
            no-repeat scroll center center
            transparent;
    background-size: contain;
}

Nebo oblíbený obsah ve sloupci uprostřed stránky:

body {
    max-width: 1024px;
    margin: 1em auto;
}

Nebo patičku stránky zobrazenou vždy u dolního okraje okna (i když je obsah stránky menší):

body {
    /* zamezí překrytí obsahu patičkou */
    margin-bottom: 1EM;
}
#footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%; /* nebo auto */
    height: 1EM;
}

Pozor na to, že pokud byste chtěli do BODY nastavit padding pro odsazení, bude problém s nastavením šířky (a výšky) na 100%. Ve výchozím nastavení se totiž padding nepočítá do šířky prvku a tak by jeho výsledná šířka byla { 100% + levý padding + pravý padding }.

Aby prohlížeč správně vypočetl 100% šířku, je potřeba změnit jeho výpočet na border-box:

body {
    width: 100%;
    height: 100%;
    padding: 1em; /* odsazení od okrajů */
    box-sizing: border-box; /* započítej
          padding do width a height */
}