AlejTech/Blog/Ako naštýlovať pekný objekt, ktorý sa vertikálne prispôsobí obsahu
Prejsť na navigáciu

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.

Tento článok zahŕňa témy:
objekt, css, html, kód, pozadie, background, div, height, IE6, IE hack, výška

Komentáre (5)

pridať komentár


V komentároch môžete používať BB kód .

Komentár č. 1autor: Sue (web)5.7.2011, 11:24

dakujem, clanocek bol uzitocny. Chcem sa spytat, existuje podobna moznost aj pre png obrazky, kedy potrebujem mat kvoli pozadiu obrazky na rohoch priesvitne?

Komentár č. 2autor: Justína (web)6.7.2011, 9:48

Pre PNG by som použila iný postup.
Keďže PNG by sa prekrývali, nie je možné použiť skladanie objektu z vnorených divov.
Použila by som tri divy za sebou, niečo ako:
<div id="top"></div>
<div id="content">
...obsah...
</div>
<div id="bottom"></div>

Divy top a bottom by mali nastavenú pevnú šírku a výšku a obsahovali by len pozaďový obrázok spodnej a vrchnej časti skladačky. Podľa obsahu by sa prispôsoboval len stredný div.

Komentár č. 3autor: Sue (web)6.7.2011, 12:42

dakujem, hej, nieco take ma napadlo, ze by mohlo fungovat. :)

Komentár č. 4autor: recepty (web)5.10.2011, 10:25

super tip , diky za dobry napad !

Komentár č. 5autor: LinkLia (web)20.12.2012, 17:44

tak niektore veci som pouzil, dakujem ze inspiraciu.

Poraďte sa s nami o službách, ktoré potrebujete. My vám pripravíme konkrétnu cenovú ponuku.

Kontaktujte nás

Oceňujem prístup tímu spoločnosti AlejTech, ktorý okamžite reaguje na moje otázky a rieši podnety z našej strany.

Tomáš Božik
riaditeľ IT v kurze