Autor Zpráva
Kry5
Profil
Zdar,
po delší době řeším zase jeden problém, který už jsem určitě někdy vyřešil, ale teď absolutně nevím jak na to :-). Jde o to, že mám pozadí pro text . Jednak jeho horní část o výšce 239px, pak prostřední část, která se opakuje po ose y a pak dolní část, která vše zakončuje.

Problém je samozřejmě s částí horní. Udělal jsem si div (prázdný), tomu jsem ji nastavil jako pozadí. Pak bych samozřejmě mohl zbytek obsahu posunout nahoru, ale to by pak ta opakující se střední část překryla tu horní. Nebo bych to mohl relativně napozicovat a tim pádem by zůstalo střední pozadí správně pod tím horním a posunul by se jen obsah, ale tam je problém v tom, že by na konci stránky přebývalo nějaký těch 239px opakujícího se pozadí.

Pro lepší pochopení příkládám ukázku kodu (dolní část neřeším, to už je detail):
<div id="inzerat">
    <div id="headBack"></div>
    <div id="inzeratRest">
        <div id="inzeratName">
                Veškerý obsah...
        </div>
    </div>
</div>



#inzerat {
    width: 756px;
    background: url('../webimg/inzerat-back-middle.png') top center repeat-y;
}

#headBack {
    width: 756px;
    height: 239px;
    background: url('../webimg/inzerat-back-top.png') top center no-repeat;
}

#inzeratRest { /* toto je to druhé uváděné řešení, při kterém, ale dole přebývá oněch 239px opakujícího se pozadí */
    position: relative;
    top: -239px;
}
Someone
Profil
Myslím si, že Živá ukázka by nebyla na škodu.
joe
Profil
Snad takhle by to mělo jít:

#inzerat {
    width: 756px;
    background: url('../webimg/inzerat-back-middle.png') top center repeat-y;
    position: relative;
    min-height: 239px; /* + vyska toho spodniho okraje */
    _height: 239px; /* + vyska toho spodniho okraje */
}

#headBack {
    width: 756px;
    height: 239px;
    background: url('../webimg/inzerat-back-top.png') top center no-repeat;
    position: absolute;
    left: 0;
    top: 0;
}

#inzeratRest { /* .. tady asi nic */ }
Kry5
Profil
joe:
Díky moc to funguje, jen jsem musel do #inzeratRest přidat position: relative; bez toho byl ten obsah překrytej.

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0