Umieszczanie DIV'ów dookoła ustalonego DIV'u Opcje

[K0walD3sign]

Witam was. Od dłuższego czasu mam taki dręczący mnie problem. Dostałem layout do pocięcia i zakodowania, ale że nie podoba mi się kodowanie photoshopa(które i tak trzeba przepisywać od zera) napisałem layout wg. wymiarów z lay'a od nowa.

I tak. Wszystko znajdujące się na stronie jest w DIV'ie o 'wszystko', w którym umieściłem div 'menu' posiadający w sobie menu i będący tak jak by nad pozostałymi divami. Pod spodem jest div, który trzyma wszystkie divy(logo, lewa, prawa, środek, stopka) i nazywa się 'container'.
Jako, że layout, który ciąłem miał dookoła divu container poświatę, którą chciałem wstawić na końcu - zostawiłem to na koniec.
Teraz chciałbym dodać tę poświatę po lewej i prawej stronie containera tak, aby nie przemieszczać go. Chodzi konkretnie o kolejne div'y przylegające do niego.

Adres strony:
http://fajne-suki.pl/wopr/

I tam właśnie, gdzie jest 'aaaaaaaaaaaaa' i taka poświata to chciałbym to przykleić do lewej części diva tego białego tak, aby go nie przesuwać. Z prawej strony chciałbym zrobić to samo. Jak to zrobić w CSS, aby było dobrze? Ewentualnie coś w html. Chodzi poprostu o rozwiązanie tego problemu - kompatybilnością z przeglądarkami i resztą zajmę się później - teraz postanowiłem zrobić właśnie to.

Aha - tu link do stylu:
http://fajne-suki.pl/wopr/styl.css
#l oznacza tą lewą część(poświatę).
#container to środek.
#wszystko to cała ta strona.

Licze na waszą pomoc!

UWAGA! Tutaj pokazuję sam projekt - http://wopr-ilawa.pl/wopr/glowna.png .
Z takim wyjątkiem, że górna część(logo, napisy start władze itepe) będą we flashu.

Ten post edytował K0walD3sign 28.05.2010, 21:41:47

[K0walD3sign]

Musiałem zrobić coś nie tak, przepraszam za błąd.

Teraz poprawiłem. I wszystko działa. Co zmieniłeś, aby było dobrze?

[zegarek84]

Co zmieniłeś, aby było dobrze?

opisze mniej więcej co pamiętam gdyż nie mam Twojego starego kodu pod ręką ;]...

na początek zmieniłem pozycjonowanie przy #container ze statycznego [statyczne zeruje pozycjonowania] na relatywne bez żadnych dodatkowych przesunięć by mieć punkt odniesienia dla cieni... wtedy pojawił się problem z menu - zostało przysłonięte - popatrzałem i miałeś pozycjonowanie absolutne [które zostawiłem] i tu można było "bawić się" z własnością z-index którego jakoś nigdy nie używam i wolę zamienić kolejność w dokumencie - czyli kolejne to wyciąłem menu w html'u i zamieściłem je za #container [jeśli coś ma identyczny z-index lub nie ustawiony to jakby dodatkowy z-index dla tych samych poziomów jest ustalany z biegu kodu - to co jest najniżej w strukturze węzłów kodu ma najwyższe pozycjonowanie z-index]...

jak już wspomniałem że chciałem mieć punkt odniesienia to wyciąłem i przeniosłem do kontenera <div id="l"></div> i nadałem tu pozycjonowanie absolutne z przesunięciem w lewo i ustawieniem u góry [na poczatku top:0px] - masz tam co i jak... domyśliłem się, że prawy obrazek [cień] to images/r.png więc dorzuciłem warstwę w kontenerze <div id="r"></div> i w pozycjonowaniu absolutnym ustawiłem z prawej strony...

dodatkowo wielkość całości kontenera była większa niż height ustawiony [cień wtedy był za krótki] więc wywaliłem tam tą wysokość by się sama policzyła po rozepchaniu... ale jako, że stopkę trochu inaczej zrobiłeś to wtedy cień mi się zrobił za długi... popatrzyłem na wysokość tej stopki i cień podniosłem ustawiając przy #l i #r zamiast top: 0px to ustawiłem ujemnie podnosząc w górę na top:-90px....

ps. musisz sobie to podociągać i dać od dołu albo jakieś zaokrąglenie albo przeciągnąć [opuścić cień zmieniając top] trochę inaczej cienia do prostej linii coby tam nie było tego pustego kwadratu

Ten post edytował zegarek84 30.05.2010, 19:04:58