Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [HTML][CSS] Stopka na dole strony, Zawsze na samym dole
Macok
post 13.09.2008, 11:18:23
Post #1





Grupa: Zarejestrowani
Postów: 100
Pomógł: 0
Dołączył: 31.08.2006

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

Mam problem ze stopką na stronie.
Jeżeli treść strony jest dłuższa niż wysokość ekranu to stopka prawidłowo ustawia się na dole.
Ale co zrobić, żeby ustawiała się na dole również gdy treść strony jest krótsza?
Próbowałem czegoś takiego:
[HTML] pobierz, plaintext 
  1. position: absolute;
  2. bottom: 0;
[HTML] pobierz, plaintext
Ale wtedy zawsze ustawia się na dole okna przeglądarki i jeżeli treść jest długa to najeżdza na resztę strony.
Go to the top of the page
+Quote Post
kazag
post 13.09.2008, 12:05:12
Post #2





Grupa: Zarejestrowani
Postów: 180
Pomógł: 12
Dołączył: 30.04.2007

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

ja robiąc stopkę umieszczam ją divie zawierającym całą stronę i nadaje
Kod
clear:both;
, dzięki czemu stopka, bez zadnych absolutów, zawsze jest od razu pod trescią, nawet, jeśli treść ma jedną linijkę.


--------------------
Okoczia - jedyne w Polsce wirtualne państwo indiańskie.
kazag.net - i coś o mnie.
Go to the top of the page
+Quote Post
Macok
post 13.09.2008, 12:25:58
Post #3





Grupa: Zarejestrowani
Postów: 100
Pomógł: 0
Dołączył: 31.08.2006

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

No wiem że wtedy jest pod treścią, ale chodzi mi o to żeby była zawsze na samym dole okna przeglądarki, a w ten sposób co ty mówisz to jeżeli treść będzie miała 1 linijke to stopka ustawi sie gdzieś na środku strony
Go to the top of the page
+Quote Post
Szunaj85
post 13.09.2008, 13:32:15
Post #4





Grupa: Zarejestrowani
Postów: 392
Pomógł: 7
Dołączył: 11.05.2008

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

Spróbuj na div-ach. Najprościej jeśli div-y na stronie będą pozycjonowane względem siebie. Stopkę robisz w prosty sposób i zawsze powinna wyświetlać się na samym dole strony:
[HTML] pobierz, plaintext 
  1. div {
  2.   position: relative;
  3. }
  4. #stopka {
  5.   clear: both;
  6. }
[HTML] pobierz, plaintext


Ten post edytował Szunaj85 13.09.2008, 13:33:59


--------------------
Jeśli Ci pomogłem wciśnij Jeśli mi pomożesz wcisnę
Go to the top of the page
+Quote Post
Macok
post 13.09.2008, 20:44:27
Post #5





Grupa: Zarejestrowani
Postów: 100
Pomógł: 0
Dołączył: 31.08.2006

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

Czyli mam ustawić "position: relative" dla wszystkich div'ów na stronie!?
Go to the top of the page
+Quote Post
Shili
post 13.09.2008, 21:55:36
Post #6





Grupa: Zarejestrowani
Postów: 1 085
Pomógł: 231
Dołączył: 12.05.2008

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

Nie, nie trzeba
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="content-type" content="text/html; charset=iso-8859-2" />
  5.  
  6. <style>
  7.     * {margin: 0; padding: 0;}
  8.     html {height: 100%;}
  9.     body {position: relative; text-align: center; min-height: 100%; height: auto !important; height: 100%;}
  10.     #main {width: 500px; margin: 0 auto; padding-bottom: 30px; text-align: left;}
  11.     #content {border: solid 1px black; padding: 10px;}
  12.     #footer {border: solid 1px red; width: 500px; position: absolute; bottom: 0; left: 50%; margin-left: -250px;}
  13. </style>
  14. </head>
  15. <body>
  16.     <div id="main">
  17.         <div id="content">
  18.             Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam justo ante, lacinia nec, dignissim nec, posuere quis, augue. Donec dignissim. Mauris sem eros, pellentesque et, pulvinar vulputate, varius eget, tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In hac habitasse platea dictumst. Sed eu est. Ut fringilla ligula. Nullam vehicula tellus vitae erat. Donec orci. Nam quis pede. Vivamus eleifend metus vel diam. Ut vulputate turpis nec nisl. Donec neque leo, faucibus in, ornare eu, semper a, massa.<br/>
  19.         </div>
  20.     </div>
  21.     <div id="footer">
  22.         A tutaj stopka.
  23.     </div>
  24. </body>
  25. </html>
[HTML] pobierz, plaintext


Oto przykład. Na IE6 nie radzę wchodzić - sam kod działa, jeśli tekstu od początku do końca jest tyle samo, to znaczy jeśli nie jest dodawany dynamicznie, jak w tym przykładzie. Innymi słowy normalnie będzie działać jak trzeba, w przykładzie z bliżej mi nieznanych przyczyn źle renderuje.

Wiem, że jest to na position: absolute, co może się nie spodobać, jednakże nie widzę innego wyjścia, żeby zawsze był na dole strony, bez względu na ilość tekstu. No chyba, że w grę wchodzi java script, ale to rozwiązanie, chociaż może nie do końca eleganckie zadziała nawet tam gdzie js jest wyłączona ^^
Poza tym było to wspomniane już w pierwszym poście, więc chyba nie ma nic przeciwko winksmiley.jpg

Ten post edytował Shili 13.09.2008, 21:59:00
Go to the top of the page
+Quote Post
--Macok--
post 14.09.2008, 16:00:22
Post #7





Goście
Próbowałem tym sposobem, ale zobacz co się stanie jak treść strony będzie długa i przekroczy wysokość ekranu.
Stopka zakryje treść dry.gif
Go to the top of the page
+Quote Post
Shili
post 14.09.2008, 16:34:13
Post #8





Grupa: Zarejestrowani
Postów: 1 085
Pomógł: 231
Dołączył: 12.05.2008

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

Naprawdę próbowałeś? Poklikaj sobie na przykładzie na "dodaj więcej treści" (jak już pisałam - pod ie6 ma problemy z dynamicznym dokładaniem treści, więc tak nie radzę próbować, ale normalnie działa) i sprawdź.

U mnie podany w przykładzie sposób działa na Firefoksie 3, Operze 9.51, Chromie, IE6/7 i Safari. I w żadnym stopka nie przykrywa treści.
Go to the top of the page
+Quote Post
Macok
post 14.09.2008, 21:05:21
Post #9





Grupa: Zarejestrowani
Postów: 100
Pomógł: 0
Dołączył: 31.08.2006

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

No dobra dzięki, spróbuje.
Zadam jeszcze 1 pytanie troche z innej beczki:
Chcę żeby wysokość mojej strony zawsze byla rowna wysokości ekranu.
Mam 2 divy treść i stopkę.
Jeżeli ustawie w treści height: 70%; w stopce height: 20%; a między nimi margin: 10%; to będzie działać?
A jeżeli nie to jak osiągnąć taki efekt?
Go to the top of the page
+Quote Post
Shili
post 14.09.2008, 21:09:11
Post #10





Grupa: Zarejestrowani
Postów: 1 085
Pomógł: 231
Dołączył: 12.05.2008

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

Cytat
Jeżeli ustawie w treści height: 70%; w stopce height: 20%; a między nimi margin: 10%; to będzie działać?
Będzie. A na czymś Ci nie działa? Aż z ciekawości sprawdziłam to na najpopularniejszych przeglądarkach i każda dobrze renderuje 0o
Go to the top of the page
+Quote Post
Macok
post 14.09.2008, 21:16:41
Post #11





Grupa: Zarejestrowani
Postów: 100
Pomógł: 0
Dołączył: 31.08.2006

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

No dobra dzięki koniec tematu.
Oczywiście punkcik dla ciebie smile.gif
Go to the top of the page
+Quote Post
rybik
post 14.09.2008, 21:50:40
Post #12





Grupa: Zarejestrowani
Postów: 99
Pomógł: 15
Dołączył: 29.07.2006

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

Kilka uwag które moga sie przydac przy okazji:

- height: ileś% zadziała tylko gdy nadrzędny element ma ustawioną wysokość (może mieć też w %), nie dotyczy tagu <html> który wysokości nie musi mieć, żeby body mogło używać

- floatujące elementy bez ustawionej wysokości lubia pozbawiać nadrzędnego diva wysokości automatycznej, wynikającej z treści w środku, tak jakby zewnętrzny miał height 0, pomimo, ze wewnętrzny ma 3 akapity tekstu. Zwykle pomaga div środkowy z clear:both

- poprawny kod powinien zawierać position: relative dla każdego floatera
Go to the top of the page
+Quote Post
Macok
post 15.09.2008, 20:01:24
Post #13





Grupa: Zarejestrowani
Postów: 100
Pomógł: 0
Dołączył: 31.08.2006

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

Chce dopasować wysokość strony do wysokości ekranu i mam problem.
Jak już napisał rybik, aby ustawic wysokość elementu na x%, to nadrzedny element musi mieć ustawioną wysokość.
I tu problem, bo nie wiem jak wysoki jest ekran użytkownika, a jak daje 100% to nie działa.
Co zrobić?
Go to the top of the page
+Quote Post
Shili
post 15.09.2008, 20:28:28
Post #14





Grupa: Zarejestrowani
Postów: 1 085
Pomógł: 231
Dołączył: 12.05.2008

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

Podaj cały kod - zobaczy się. Bo działać powinno winksmiley.jpg
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · 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 Wersja Lo-Fi Aktualny czas: 26.04.2025 - 00:33
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn