Witam,

Chciałbym osiągnąć efekt automatycznego umieszczania banderoli nad
obrazkiem na stronie WWW. Obrazek pobierany jest z CMS i posiada
nieprzewidywalne rozmiary. Banderola ma być nad nim załóżmy 20px od jego
dolnej krawędzi. Jak dokonać automatycznego pozycjonowania banderoli w CSS
względem dolnej krawędzi (bez ingerowania w CMS, bez JS)?

Zobrazowanie:

<div class="thumbnail" style="background-image:url(URL_Z_CMS);
width:SZEROKOSC_Z_CMSpx; height:WYSOKOSC_Z_CMSpx">
<div></div>
</div>

Wewnętrzny <div> będzie zawierał jako tło fragment paska banderoli -
półprzeźroczysty prostokąt z cieniem w PNG 32 powtarzany w poziomie. DIV
może posiadać więc narzuconą wysokość w pikselach i szerokość 100%. Może
też jedno i drugiem mieć ustawione na 100% a pozycjonować będziemy samo
tło. W obu tych wariantach nie bardzo potrafie dać sobie radę.

do góry

On Sun, 25 Jul 2010 12:13:47 +0200, Marek wrote:

> Chciałbym osiągnąć efekt automatycznego umieszczania banderoli nad
> obrazkiem na stronie WWW.

A do czego ci takie banderolowanie potrzebne? Bo jeżeli do zabezpieczenia
się przed kradzieżą obrazków, to zapomnij o CSS. CSSa zawsze można
wyłączyć, a obrazek i tak pobrać bez twojej banderoli. Jedyne sensowne
rozwiązanie to rozwiązanie server-side. Banderola (znak wodny?) powinien
być już w obrazku, a nie "nad" nim.
No chyba że interesuje cię apekt czysto wizualny, to wtedy oczywiście CSS
się nada, ale to może ktoś inny ci już pomoże.


--
Pozdrawiam
Zbyszek Malec

do góry

On 2010-07-25 12:13, Marek wrote:
> Zobrazowanie:
>
> <div class="thumbnail" style="background-image:url(URL_Z_CMS);
> width:SZEROKOSC_Z_CMSpx; height:WYSOKOSC_Z_CMSpx">
> <div></div>
> </div>

zobacz cos takiego :

.thumbnail{
background: #CAC;
position: relative;
}

.thumbnail div{
background: #EDA;
width: 100%;
height: 50px;
position: absolute;
bottom: 0;
}

do góry