[CSS] Pomoc z layoutem.

0

Witam.

Chciałbym sobie przenieść do jednego DIV'a, pełniącego funkcję kontenera, taką grafikę:

user image

Muszę to zrobić tak, aby się dobrze grafika wyświetlała podczas rozszerzania strony w poziomie oraz aby cały DIV zwiększał swoją wysokość w zależności od zawartości, która będzie umieszczona w środku. Górny fragment grafiki nie jest wazny bo będzie zasłonięty. Wymyśliłem zatem taki układ:

user image

W zielonych divach dam sobie mały obrazek z powtarzaniem "repeat-y", w niebieskim będzie dolna krawędź grafiki, a czerwony DIV będzie przechowywał zawartość i tym samym określał wysokość całości.

Kod źródłowy:

<div id="main" style="padding: 20px 20px 20px 20px; position: relative; top: -20px; background-color: yellow;">
        <div id="left_side" style="position: absolute; top: 0px; left: 0px; z-index: 2; float: left; width: 15px; height: 100%; background-color: red;"></div>
        <div id="right_side" style="position: absolute; top: 0px; right: 0px; z-index: 2; float: left; width: 15px; height: 100%; background-color: blue;"></div>
        <div id="footer" style="position: absolute; bottom: 0px; left: 0px; z-index: 2; width: 100%; height: 15px;  background-color: cyan;"></div>

        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In est nibh, vehicula a, viverra ut, sagittis ut, lacus. Pellentesque purus. Proin lacus. Suspendisse tincidunt erat ac ante. Vestibulum metus felis, volutpat eu, aliquet et, mollis ut, sem. Curabitur iaculis ipsum. Sed ac ipsum. Vivamus elementum, enim at rhoncus sodales. (...)
</div>

Wynik w FireFoxie (jak zwykle wszystko OK):
user image

Wynik w IE (jak zwykle coś nie tak :P):
user image

Wiem, że problemy ze stópką wynikają z błędnego traktowania przez IE standardu dotyczącego "Box Model'u" i z tym sobie chyba poradzę.

Ale kompletnie nie wiem jak zrobić, aby dwa boczne DIVy (widoczne na ostatnim obrazku w lewym i prawym górnym rogu) dostosowały swoją wysokość do tego głównego DIV'a... Height 100% jak widać nie działa. Próbowałem ustawiać pozycję za pomocą "bottom", ale też nie pomogło. Macie jakieś pomysły?? Takich grafik widuje się od groma na necie, więc na bank ktoś już się z tym uporał, ale mi nigdzie nie wpadły w łapy tutoriale dotyczące tego problemu, a nie wiem jak szukać dokładnie.

Pozdrawiam.

P.S. Z CSSa nie jestem wybitny, więc sorkie za głupoty ;-)
P.P.S. Dodam, że już wiele potu i wysiłku kosztował mnie szkielet tej strony tak jak jest, więc nie chciałbym zmieniać ogólnej koncepcji dla tego jednego DIV'a, więc proszę o "nieinwazyjne" rady ;-)

0

nieinwazyjna rada: nie wystarczy wsadzić choćby   w te divy ?
inwazyjna "rada":

<style>
.dol { background: white url(http://img112.imageshack.us/img112/474/dolma9.gif) bottom center repeat-x; width: 60% }
.lewo { background: url(http://img151.imageshack.us/img151/5089/lewoiv9.gif) center left repeat-y }
.prawo { background: url(http://img151.imageshack.us/img151/9885/prawoiz2.gif) center right repeat-y }
.dollewo { background: url(http://img151.imageshack.us/img151/6321/dollewoyb3.gif) bottom left no-repeat }
.dolprawo { background: url(http://img151.imageshack.us/img151/5072/dolprawoec9.gif) bottom right no-repeat }

.tresc { padding: 15px 15px 35px 15px }
</style>

<div class="dol">
<div class="lewo">
<div class="prawo">
<div class="dollewo">
<div class="dolprawo">
<div class="tresc">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In est nibh, vehicula a, viverra ut, sagittis ut, lacus. Pellentesque purus. Proin lacus. Suspendisse tincidunt erat ac ante. Vestibulum metus felis, volutpat eu, aliquet et, mollis ut, sem. Curabitur iaculis ipsum. Sed ac ipsum. Vivamus elementum, enim at rhoncus sodales. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In est nibh, vehicula a, viverra ut, sagittis ut, lacus. Pellentesque purus. Proin lacus. Suspendisse tincidunt erat ac ante. Vestibulum metus felis, volutpat eu, aliquet et, mollis ut, sem. Curabitur iaculis ipsum. Sed ac ipsum. Vivamus elementum, enim at rhoncus sodales. (...)
</div>
</div>
</div>
</div>
</div>
</div>

trochę gorzej z semantycznością

0

Super!!! Rozwiązanie inwazyjne sprawdziło się wyjątkowo dobrze! Dzięki wielkie!! :D

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0