Witam.
Pierwszy raz się spotykam z zaawansowanym tworzeniem strony internetowej. Kiedyś trochę liznąłem tylko CMS Joomla, ale nie oparło się to w żaden sposób o tworzenie szablonów, tylko modyfikację niektórych elementów: usunięcie tekstu, zmiana rozmiaru i tyle. Podstawową stronę HTML też napiszę, ale to coś w rodzaju dzieci w szkole które się dopiero uczą co to jest. Tak samo z PHP, tworzyłem jedynie skrypty ciągnące dane do Androida.
A teraz przejdę do problemu. Nie będzie to mój jeden zapewne, (parę już rozwiązałem w oparciu o inne strony), tak samo mam problemy z nie działającymi skryptami JavaScript, ale to kiedy indziej.
Tworzę layout:
<body>
<div id="sidebar" style="position:absolute; height:100%; width:400px; left:0;">
</div>
<div id="page">
<div id="header" style="position:relative; width:100%; top:0;">
</div>
<div id="custom_content" style="position:relative; width:33%; float:left;">
...
</div>
<div id="post_content" style="position:relative; width:66%; float:right;">
{block:posts}
<div id="post" style="position:relative; margin:16px;">
...
</div>
{/block:posts}
</div>
</div>
<div id="bottom" style="position:absolute; bottom:0; width:100%;">
</div>
<div id="top" style="position:fixed; top:0; width:100%;">
</div>
</body>
Cała strona prócz elementu TOP przesuwa mi się do góry, top jako jedyny jest ciągle obecny i poprzez z-index, ustawiony na pierwszym planie, tak samo sidebar, za pomocą skryptu jest wyciągany. Problem pojawia się mianowicie wtedy, kiedy chcę sobie panel BOTTOM ustawić.
Strona Tumblr, wyświetla zdublowane posty, czyli dubluje {block:posts} w kontenerze POST_CONTENT, niestety, scrollując stronę przesuwa mi się całość zawarta w PAGE ale, może i dobrze zważając na część HEADER która też ma zostać przewinięta w górę.
+------------------------------------------------------------------+
| TOP |
+-----------+------------------------------------------------------+
| SIDEBAR | HEADER |
| | |
| | |
| +------------------------------------------------------+
| | |
| | +----------+ +---------------------------------+ |
| | | | | | |
| | | | | | |
| | +----------+ | | |
| | | | |
| | +----------+ | | |
| | | | +---------------------------------+ |
| | | | |
| | +----------+ +---------------------------------+ |
| | | | |
| +------------------------------------------------------+
| | BOTTOM (can not be here) |
+-----------+------------------------------------------------------+
. ............ . . .
. . . . . .
. . . ................................... .
. ............ .
. .
. .. .. .. .
. .
........................................................
. BOTTOM (must be here) .
........................................................
Obecnie podczas scrollowania, BOTTOM przesuwa mi się także, wraz z postem, znajdującym się w miejscu BOTTOM, mogę też ustawić jego pozycję na relative ale wtedy pojawia się pod HEADER i tak samo się zachowuje. Pozycji fixed nie chciałbym ustawiać z tego powodu, gdyż element byłby tam utwierdzony na stałe. Chciałbym go wstawić na sam dół postów. Niestety po przytwierdzeniu go na dole POST_CONTENT, jego rozmiar także zostaje zmieniony, ale pozycja znajduje się już w odpowiednim miejscu.
Co mam zrobić aby BOTTOM był na samym dole i bez wrzucania go do POST_CONTENT?