Witam,

Mam problem z pocięciem layoutu. Uproszczoną jego wersję przedstawiam tutaj:




Chodzi o to, że są 3 bloki:

- blok1 ma stałą szerokość i wysokość
- blok2 znajduje się pod blokiem1 i jego wysokość regulowana jest aktualną wysokością bloku3.

- blok3 jest przeźroczysty i jest umieszczony jak to pokazano na obrazku. Jego wysokość jest zależna od zawartości.

Pytanie: Czy istnieje możliwość w XHTML/CSS aby umieścić w ten sposób blok3 nad dwoma pozostałymi blokami aby nachodził na nie, a jednocześnie aby zwiększał dynamicznie wysokość swoją i bloku2 ?

Nie wiem czy jest to możliwe w css i html, na pewno w JS.

A nie dało by rady rozdzielić tego bloku na dwie części bądź złożyć 1 i 2 w jeden i co najwyżej podzielić tłem?

Tak ale nie w taki sposób w jaki większość myśli (zabawa z position)

[HTML] pobierz, plaintext 
<div id="blok2">
    <div id="blok1">
        <div id="blok3">
 
        </div>
    </div>
</div>
[HTML] pobierz, plaintext 

[CSS] pobierz, plaintext 
#blok2
{
/* wstaw jego tlo */
}
 
#blok1
{
/* wstaw tlo obrazkowe o zadanej wysokosci i daj mu no-repeat */
padding: 20px; /* padding stanowi odstep dla blok3 */
}
 
#blok3
{
/* dodajesz mu odpowiedni opacity */
}
[CSS] pobierz, plaintext 

Faktycznie, to działa. Wielkie dzięki za pomoc.
Dla zainteresowanych - efekt można zobaczyć tutaj: http://www.2lo.rsi.pl/lay003/

Korzystając z okazji, mam jeszcze pytanie odnośnie przezroczystości. Otóż, jak widać, wszystkie elementy (tekst i obrazek) umieszczone w warstwie, która ma ustawioną przeźroczystość, również są przeźroczyste.

Czy da się zrobić tak, aby blok3 był przeźroczysty, a elementy w nim zawarte nie?

Tak, ale to dużo kombinowania z javascriptem. Dlatego lepiej, żeby zamiast opacity dla elementu #blok3 zastosował półprzezroczystego .pnga jako tło (w twoim przypadku może być nawet obrazek o rozmiarach 1x1).

Świetnie! Wszystko gra. Dziękuję.