Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [xhtml] Scroll w divie (overflow: auto), amibitne zadanie ;)
Seth
post
Post #1





Grupa: Przyjaciele php.pl
Postów: 2 335
Pomógł: 6
Dołączył: 7.03.2002

Ostrzeżenie: (0%)
-----

Tak mniej wiecej wyglada struktura mojej strony:


Zrodla XHTMLa


Problem jest troche nietypowy:
otoz zalozenie jest takie, ze strona ma jakby swoja okreslona wysokosc: ktora ma wartosc 100% wielkosci okna - czyli nie moga sie pojawic zadne "glowne" scrolle.
Top i Footer maja swoje stale miejsca: Top oczywiscie zawsze na gorze, a Footer zawsze na dole - nawet jak uzytkownik zmieni wielkosc okna footer zawsze bedzie na dole.
Content zkolei ma miec szerokosc taka aby miescil sie miedzy Top, a Footer - nie moze miec wiekszej.
I teraz gdy w Content tresci bedzie na tyle duzo, ze bedzie sie z niego "wylewac" maja sie pojawic scrolle (zaznaczone na obrazku) tak aby mozna bylo owy tekst przewinac ( czyli overflow: auto ).

Jednym slowem zalozenie jest takie aby strona wygladala jak aplikacja okienkowa, ktorej oczywiscie nie trzeba przewijac calej w dol winksmiley.jpg

Problem polega jednak na tym, ze Content mimo, ze ma ustawione overflow: auto nie pokazuje scrolla gdy tekst wyplywa z Content tylko przechodzi przez footer i dalej wyswietla tresc - co oczywiscie rozwala cala koncepcje :/



Strasznie jest mi to potrzebne, a siedze juz dluzszy czas (co widac po godzinie posta winksmiley.jpg) i nie moge dojsc gdzie jst blad (a moze tak sie nie da zrobic :? )

Jezeli ktos jest w stanie podac rozwiazanie badz nakierowac na jakis link byl bym bardzo wdzieczny.


P.S.
Oczywiscie zrodla layu sa zubozone wzgledem oryginalu ale podstawowa struktura mniej wiecej jest taka sama.
Go to the top of the page
+Quote Post
revyag
post
Post #2





Grupa: Przyjaciele php.pl
Postów: 2 258
Pomógł: 16
Dołączył: 21.09.2004
Skąd: Kielce

Ostrzeżenie: (0%)
-----

Dodaj:
Kod
body{
    height:100%;
}

i ustaw procentowa wyskosc contentu:
Kod
#content{
    height:70%;
}

powinno byc ok.

Ten post edytował revyag 23.10.2004, 08:36:09


--------------------
-------------

------
Go to the top of the page
+Quote Post
Seth
post
Post #3





Grupa: Przyjaciele php.pl
Postów: 2 335
Pomógł: 6
Dołączył: 7.03.2002

Ostrzeżenie: (0%)
-----

Co prawda pod IE jest taki efekt (ale tez nie do konca taki jakbym oczekiwal) to pod firefoxem juz nie dziala sad.gif


Edit >--------------------------------------

Znalazlem ! snitch.gif
Moze komus sie przyda, wiec podaje strone gdzie szczegolowo opisane sa konstrukcje layoutu opartego o div'y tak aby wygladal jak z iframeami:
http://www.fu2k.org/alex/css/frames/
smile.gif
Go to the top of the page
+Quote Post
revyag
post
Post #4





Grupa: Przyjaciele php.pl
Postów: 2 258
Pomógł: 16
Dołączył: 21.09.2004
Skąd: Kielce

Ostrzeżenie: (0%)
-----

Jeśli dodasz:
Kod
html{
    height:100%;
}

i
Kod
#container{
    height: 70%;
}

i
Kod
#content{
    height:100%;
}

będzie ok smile.gif


--------------------
-------------

------
Go to the top of the page
+Quote Post
Seth
post
Post #5





Grupa: Przyjaciele php.pl
Postów: 2 335
Pomógł: 6
Dołączył: 7.03.2002

Ostrzeżenie: (0%)
-----

Hmm... moja radosc byla przed wczesna...
revyag: to co podales dziala i juz zaczynam chwytac o co chodzi z ta wysokoscia w div'ach z tym, ze wynik nie zadowala mnie.

Chcial bym aby wysokosc tego contentu byla dopasowywana do footera, a 70% to tak nie bardzo to robi winksmiley.jpg
Przy duzych rozdzielczosciach mam spory odstep od footera, a chce miec dokladnie 10 px.
Go to the top of the page
+Quote Post
revyag
post
Post #6





Grupa: Przyjaciele php.pl
Postów: 2 258
Pomógł: 16
Dołączył: 21.09.2004
Skąd: Kielce

Ostrzeżenie: (0%)
-----

Nie wiem czy da się to ominąć, bo oczywiste jest, że przy wyższej rozdzielczości, wysokość podana w procentach będzie większa, tym samy odstęp między footerem i containerem też będzie większy. Ustalonego rozmiaru w pikselach też nie można podać, bo inaczej będzie to wyglądać w 1024x768 a inaczej 1280x1024.
Jedyne rozwiązanie jakie mi w tej wchwili przychodzi do głowy to użycie javascriptu. Wykryć jaka jest rozdzieloczość i względem tej rozdzielczości podawać wysokość containera.
Minusy tego rozwiązanie są takie, że strona się napewno nie zwaliduje, no i trzeba te wysokości dobrać doświadczalnie (ale to już chyba nie jest duży problem).


--------------------
-------------

------
Go to the top of the page
+Quote Post
Seth
post
Post #7





Grupa: Przyjaciele php.pl
Postów: 2 335
Pomógł: 6
Dołączył: 7.03.2002

Ostrzeżenie: (0%)
-----

Dzieki smile.gif
Go to the top of the page
+Quote Post
Michał Fikus
post
Post #8





Grupa: Zarejestrowani
Postów: 31
Pomógł: 0
Dołączył: 17.03.2003
Skąd: Wejherowo

Ostrzeżenie: (0%)
-----

A ja zrobiłbym to inaczej.

a) TOP

musi mieć position: absolute; top: 0px; ... wiadomo. z-index: 10; (liczba przykladowa, byleby wieksza od containera)

cool.gif CONTAINER (podobnie MENU)

height: 100%;
A co byłoby bardzo ważne i przynosiło porządany przez Ciebie efekt: padding-top: ilespx;
Podobnie z padding-bottom: ilespx; ew. z-index: 5; (mniej niż TOP)

c) FOOTER

I tu znowu Twoje position: absolute; z-index: 10;

Mam nadzieje, że choć krótko, to jednak zrozumiale.

Właściwie chyba nawet z-index nie będzie potrzebny, ale podaje, gdyż nie sprawdzałem tego rozwiązania, a jeśli bez nie zadziała, to z z-indexem powinno już być wszystko ok.
Go to the top of the page
+Quote Post
ikioloak
post
Post #9





Grupa: Zarejestrowani
Postów: 416
Pomógł: 0
Dołączył: 8.01.2004

Ostrzeżenie: (0%)
-----

Spotkalem sie z bardzo podobna sytuacja i trafilem tutaj. Albo nie umiem sie posluzyc radami z powyzszych postow, albo one nie dzialaja. Zaczalem sie bawic w to troche z innej strony i skutek niemalze idealny.
Roznica taka nie na xhtml'u, wiec wszystko oparte na tabelkach. Tylko content pozostal div'em tak jak u Setha. Sprawe rozwiazalo cos mniej wiecej takiego:

[HTML] pobierz, plaintext 
  1. <body onresize="javascript:document.getElementById('content').style.height=window.outerHeight-100; document.getElementById('content').style.width=window.outerWidth-200">
[HTML] pobierz, plaintext


Moze i nieladnie bo o onresize z tego co sie orientuje w3c nic nie mowi, ale wazne ze dziala. Acha, z tego co pamietam do doctype'a tez musialem wyrzucic bo z tym albo na IE albo na FF nie pradzilo.
Go to the top of the page
+Quote Post
« Następny starszy · HTML \ XHTML · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 22.08.2025 - 11:34
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn