Ako naštýlovať pekný objekt, ktorý sa vertikálne prispôsobí obsahu

Ako naštýlovať pekný objekt, ktorý sa vertikálne prispôsobí obsahu

Na webstránkach sa zvyčajne vyskytuje množstvo objektov, ktorých obsah je vizuálne odlíšený od okolitých objektov.

Dizajnér pri tvorení grafiky občas narazí na situáciu, keď potrebuje nakresliť pekný objekt, ale nevie presne, akú bude mať na stránke funkciu. Nevie teda, aký bude mať objekt obsah, a teda ani aký dlhý môže byť.


Objekt môže byť relatívne krátky.

Alebo môže byť naopak veľmi dlhý.


V takom prípade existuje niekoľko spôsobov, ako takýto objekt naštýlovať. Každý spôsob má svoje výhody a nevýhody.


Vytvorenie takéhoto objektu sa môže niekomu zdať triviálne, pozrime sa ale pre istotu ako na to. ;]

Ako prvé potrebujeme grafickú časť

Aby mohol byť obsah objektu akokoľvek dlhý, prakticky do nekonečna, bude sa náš objekt O skladať z troch obrázkov.

Horná časť:

obj-top


Opakujúce sa pozadie o výške 1 px:

obj-bg

Pozadie, ktoré sa opakuje a teda umožňuje ľubovoľnú výšku objektu, musí byť vhodne navrhnuté. Nemalo by obsahovať nijaké časti, ktoré pri opakovaní narušia vizuál objektu.

S pozadím sa dajú dosiahnuť nádherné efekty. V našom prípade má výšku len 1 px, samozrejme ale môže byť hocijaké.

Spodná časť:

obj-bottom

HTML kód

Objekt poskladáme z troch vnorených divov:

<div class="obj-bg">
    <div class="obj-top">
       <div class="obj-bottom">
          <p>Text v objekte.</p>
       </div>
    </div>
</div>

CSS štýlovanie

Kľúčom k vytvoreniu tohto objektu je správne naštýlovanie všetkých troch divov.


Začneme divom s classom obj-bg,  teda objektom s opakujúcim sa pozadím.

.obj-bg {
    background: transparent url(img/obj-bg.jpg) repeat-y 0 0;
    width: 462px;
    padding: 0;
    margin: 0;
}

Kľúčovými sú opakovanie obrázku po ypsilonovej osi a nastavenie paddingu na 0.


Nasleduje druhý div, vnorený do prvého, s classom obj-top.

.obj-top {
    background: transparent url(img/obj-top.jpg) no-repeat 0 0;
    width: 462px;
    padding: 0;
    margin: 0;
}

Obrázok obj-top.jpg sa zobrazí pred opakujúcim sa pozadím. Jeho position je nastavená na 0 0, teda vľavo hore.


Poslendým divom je obj-bottom, ktorý uzavrie náš objekt.

V prípade tohto najvnútornejšieho divu „doštýlujeme“ obsah divu.

.obj-bottom {
    background: transparent url(img/obj-bottom.jpg) no-repeat bottom left;
    width: 422px;
    padding: 20px 20px 50px 20px;
    margin: 0;
    min-height: 71px;
}

Aby sme zabezpečili pekné umiestnenie textu v objekte, nastavíme vhodný padding zo všetkých strán.

Dĺžka textu a dodatočné štýlovanie

Keďže nevieme, aký dlhý bude text, musíme zvážiť aj možnosť, že bude veľmi krátky. V takomto prípade by mohol byť text aj príliš krátky, a horné a spodné pozadie divov by sa začali prekrývať.

Preto nastavíme aj minimálnu výšku divu, t.j. min-height.

Všekty tri pozaďové obrázky majú dohromady výšku 141 px [obj-bg.jpg + obj-top.jpg + obj-bottom.jpg].

Spolu s horným a dolným paddingom 20 px a 50 px na minimálnu výšku zostáva presne 71 px.

Dodatok pre IE6

Internet Explorer 6 je u nás stále ešte široko používaný.

Keďže IE6 nepozná min-height, je dobré použiť malý IE hack. Doplníme poslednú časť v obj-bottom:

.obj-bottom {
    background: transparent url(img/obj-bottom.jpg) no-repeat bottom left;
    width: 422px;
    padding: 20px 20px 50px 20px;
    margin: 0;
    min-height: 71px;
    _height: 71px;
}

Podčiarkovník pred height spôsobí, že pevne nastavenú výšku bude brať do úvahy len IE6. IE6 má zároveň tú skvelú vlastnosť, že v prípade, že obsah objektu túto výšku prekročí, div sa sám natiahne.

Záver

Toto jednoduchý spôsob ako naštýlovať objekt, ktorý sa vertikálne prispôsobí svojmu obsahu. Umožňuje vertikálne natiahnutie do nekonečna a pri správnej kombinácii troch pozaďových obrázkov dovoľuje použiť široké spektrum vizuálnych efektov.

Skôr ako začneme: nahliadnite do spracovania vašich osobných údajov

Súbory cookies používame najmä na anonymnú analýzu návštevnosti a vylepšovanie našich web stránok. Ak si nastavíte blokovanie zápisu cookies do vášho prehliadača, je možné, že web sa spomalí a niektoré jeho časti nemusia fungovať úplne korektne. Viac info k spracúvaniu cookies.