100%skalowany layout - panel na 3 Divach, I tu poajawiają się problemy Opcje

[Pornolio]

chciałbym zrobić 100% skalowany layout.

Mój plan na głowny panel z treścią wygląda tak (o menu i innych panelach nie piszę):

- jeden główny div, pozycjonowany absolutnie na "procentach" względem 4 boków okna browsera.
- w środku 3 lub 4 Divy z treścią.:
1. topóweczka, absolutnie przyklejona do górnego, lewego i prawego boku diva głównego: własciwośc left, right, top, na 0px.
A w środku, mamy IMG z szerokością na 100% i wysokością na auto.
2. Analogicznie ze stopką, czyli spodem panelu, taki sam div tylko że zamiast top, jest ustawiona własność bottom na 0px.

Teraz wszystko się ładnie skaluje w zależności od wielkości okna browsera

PROBLEMEM JEST TYLKO ŚRODKOWY DIV, LUB DIVY!!!!!!!!!

W środkowym divie jako tło ma być ustawiona jedna pozioma "linijka" grafiki, ale ale, powinna się skalować w poziomie w zalezności od aktualnej wielkości okna i repetować w pionie, więc wykorzystanie własności background-pic odpada, bo tego dziadostwa skalować nie można, a tylko repetować w tą i na zad :-/ Jeśli natomiast wykorzystam obrazek, w środkowym divie to wprawdzie pięknie się skaluje w poziomie ale w żeby się powielał w poziomie, to dobrze zrobić się tego nie da. Dlaczego? Po pierwsze wówczas cały środkowy div rozwali się na całego rodzica (tak nie może być bo to są PNG z przeźroczystością), zamiast ułożyć się pomiędzy górnym i dolnym, a IE wyswieli tylko jedną linie, więc nie rozciągnie go w ogóle.

Czy ktoś ma jakiś pomysł aby rozwiązać problem środkowego diva, tzn:
- Żeby się układał pomiędzy górnym i dolnym.
- Żeby ta pozioma linijka grafiki się skalowała w poziome i rozciągała w pionie
- Żeby jego wysokość ustawiała się automatycznie w zalezności od ilość tekstu.
- Skoro o tekscie mowa to za cholere nie moge go wysunąć nad IMG. Teskt zamykam w SPAN i ustawiam odpowiedni z-index dla SPAN i IMG i ZAWSZE do cholery tekst jest pod spodem zamiast nad grafiką.

A może da się jakoś nałożyć kolejny div z tekstem, tak aby pod spodem był div z grafiką i był przyklejony do tego tekstowego który jest nad nim.

Z tymi pytaniami zwracam się do Was i wiem że nie ucieknę od Jscriptu, choćby po to aby ustawiać wielkość czcionki i marginesy w zależności od wielkości okna przeglądarki.

Ps. Te CSSy są jednak do bani!!!!!
PS2. JEŚLI KTOŚ OBCZAI JAK TO ZROBIĆ BEZ JS, (NIE LICZĄC OBSŁUGI TEKSTU) STAWIAM BROWAR!!!!!!!!!

[Pornolio]

Mortus, dzięki za rzeczowe podejście. Ale chyba nie tędy droga. Panele góra, dół, środek, mają u Ciebie na sztywno pozycjonowanie pionowe ustawione, a jak słusznie zauważyłeś nie ma tu miejsca na to aby środkowy panel zawierał tekst (i był "rozpychany w pionie przez tekst, lub też inny kontener, przyklejony nad środkowym z z-indexem większym i tekstem). Takie ustawienie, jak zaproponowałeś jest dobre przy założeniu że wysokość całęgo panelu jest stała. Tymczasem wysokość ma być uzależniona od środkowego panelu, a ten z kolei od ilości tekstu. Dlatego ja próbuje ustawić wysokości na automat. Dla przykładu jeśli tekstu jest mało, to wysokość górnej części będzie stanowiła np. 25% całości. Jeśli tesktu będzie w opór, to wysokość górnego panelu będzie wynosiła już tylko np. 5%.

Może nakieruje Was drodzy koledzy, na odpowiednie tory. Wydaje mi się że trzeba przekopać specyfikacje na w3 css2.1 ze zwróceniem uwagi na szczególne przypadki pozycjonowania obiektów z wartościami heigh width ( a może i marginesy) ustawione na auto (w całęj rozciągłości obiektu parentnego na auuto). Jak wiecie zachowanie może być różne w zależności od typu obiektu.

Drugi potencjalny kierunek poszukiwań, to ustawianie trybu wyświetlania a'la tabelki.

Szkoda że prop. float nie może przyjmować wartości top/bottom.... Ciągle więc utrzymuje swoje zdanie że css kuleje i nie zanosi się na to że zostanie poprawione, w3.org bardziej poprawiają błedy składniowo/formalne niż funkcjonalność. Prędzej chyba prtzyjmie się jakiś standard oparty na XML, do stylowania xhtmla.

Ah, te stare dobre tabelki, szkoda że crawlery ich tak nie lubią (IMG:style_emoticons/default/sciana.gif)