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!!!!!!!!!

[mortus]

Tyle, że to co zaprezentowałeś, to żadna technika, a jedynie niewłaściwe podejście. Ciekaw jestem, w którym miejscu wstawisz właściwą treść strony?

Nie wszystkie elementy na stronie internetowej można (da się skalować). Przykładem może być np. jakiś moduł aktualności, który z założenia jest kolumną o szerokości 300px. Przecież zmniejszenie szerokości tej kolumny o np. 75% spowoduje, że będzie ona nieczytelna.

No niestety nie ma innego sposobu na powtarzanie tła w pionie, jak tylko atrybut repeat-y stylu. Rozwiązaniem Twojego problemu może być podzielenie środkowego diva na dwa, przy czym ten węższy w tle (background-image) będzie miał fragment obrazka zawierający tę pionową linię i tło będzie się powtarzać w pionie. Oczywiście musisz ustalić szerokość dla obu tych div'ów.

Najlepiej pokaż obrazek (layout) i powiedz, co rozumiesz przez skalowalność. Zauważ, że jeśli Twój obrazek będzie miał szerokość 1024px i ktoś spróbuje go wyświetlić na monitorze, który obsługuje rozdzielczość np. 1400x900px, to obrazek będzie zniekształcony i nieczytelny.

Źle mówię?