Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [CSS][HTML] Problem ze stopką aby była zawsze na dole strony
Bartek2000
post 15.04.2015, 20:22:56
Post #1





Grupa: Zarejestrowani
Postów: 6
Pomógł: 0
Dołączył: 15.04.2015

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

Witam,
Mam taki kod:

[HTML] pobierz, plaintext 
  1. <html>
  2. <body>
  3.    <div id="menu">
  4.    </div>
  5.    <div id="cont">
  6.    </div>
  7.    <div id="footer">
  8.         <p>treść stopki</p>
  9.    </div>
  10. </body>
  11. </html>
[HTML] pobierz, plaintext 



[HTML] pobierz, plaintext 
  1. html {
  2.     height:100%
  3. }
  4. body {
  5.   padding: 0%;
  6.   margin: 0 auto;
  7. }
  8.  
  9. #menu {
  10.   position: fixed;
  11.   background: /*#2980b9*/ black; 
  12.   width: 100%;
  13.   top: 0px;
  14.   height: 90px;
  15. }
  16.  
  17. #cont {
  18.   margin-top: 0%;
  19. }
  20.  
  21. #footer{
  22.     margin: 0 auto;
  23.     position:absolute;
  24.     left: 0;
  25.     width: 100%;  
  26.     height: 7%;
  27.     background-color: black;  
  28. }
  29.  
  30. #footer p{
  31.    font-size: 15px;
  32.    color: white;
  33.    text-align: center; 
  34. }
[HTML] pobierz, plaintext


Kod ten powoduje, że stopka wędruje po ekranie w poziomie dry.gif Raz jest na samym dole, innym razem w 2/3 ekranu w zależności od ilości treści i rozdzielczości sadsmiley02.gif
Czy jest jakiś złoty środek na to, aby stopka trzymała się zawsze dołu strony bez względu na ilość treści?
Go to the top of the page
+Quote Post
Kshyhoo
post 15.04.2015, 20:30:19
Post #2





Grupa: Opiekunowie
Postów: 3 855
Pomógł: 317
Dołączył: 4.01.2005
Skąd: że
fixed


--------------------
Jak poprawnie zadać pytanie | Jak poprawnie zatytułować wątek
Najczęstsze błędy | Błędy E_NOTICE | PHP FAQ | FAQ PHPedia | SQL-Injection | Logowanie i sesje | Hashowanie haseł | Server - od czego zacząć ? | Manual PHP
Alternatywne Forum dla Ekspertów
Nie pomagam na PW, nie mam GG
Go to the top of the page
+Quote Post
Bartek2000
post 15.04.2015, 20:49:27
Post #3





Grupa: Zarejestrowani
Postów: 6
Pomógł: 0
Dołączył: 15.04.2015

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

ok udało się ... jest cały czas na dole.
A co jeśli chciałbym aby stopka była na samym końcu strony a nie cały czas u dołu ekranu?

Ten post edytował Bartek2000 15.04.2015, 20:56:04
Go to the top of the page
+Quote Post
miras
post 15.04.2015, 20:55:13
Post #4





Grupa: Zarejestrowani
Postów: 1 004
Pomógł: 9
Dołączył: 18.01.2011
Skąd: Siedlce

Ostrzeżenie: (30%)
XX---

clear: both; ?


--------------------
ReputeUp.pl - sprzedaż opinii google!
Go to the top of the page
+Quote Post
Kshyhoo
post 15.04.2015, 20:56:32
Post #5





Grupa: Opiekunowie
Postów: 3 855
Pomógł: 317
Dołączył: 4.01.2005
Skąd: że
A:
[CSS] pobierz, plaintext 
  1. position: relative;
  2. bottom: 0;
[CSS] pobierz, plaintext


--------------------
Jak poprawnie zadać pytanie | Jak poprawnie zatytułować wątek
Najczęstsze błędy | Błędy E_NOTICE | PHP FAQ | FAQ PHPedia | SQL-Injection | Logowanie i sesje | Hashowanie haseł | Server - od czego zacząć ? | Manual PHP
Alternatywne Forum dla Ekspertów
Nie pomagam na PW, nie mam GG
Go to the top of the page
+Quote Post
Bartek2000
post 16.04.2015, 19:12:02
Post #6





Grupa: Zarejestrowani
Postów: 6
Pomógł: 0
Dołączył: 15.04.2015

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

Właśnie takie ustawienie:

[HTML] pobierz, plaintext 
  1. #footer{
  2.     bottom: 0;
  3.   position:fixed;
  4.     /*vertical-align: baseline;*/
  5.     left: 0;
  6.     width: 100%;  
  7.     height: 7%;
  8.     background-color: black;  
  9. }
[HTML] pobierz, plaintext


daje efekt stopki zawsze u dołu ekranu, a nie mogę uzyskać efektu, aby była ona zawsze na samym dole strony

Edit:

Chyba to rozwiązuje problem ...

[PHP] pobierz, plaintext 
  1. #footer{
  2.     clear: both; 
  3.     bottom: 0;
  4.  /* position:fixed;*/
  5.     /*vertical-align: baseline;*/
  6.     left: 0;
  7.     width: 100%;  
  8.     height: 7%;
  9.     background-color: black;  
  10. }
[PHP] pobierz, plaintext


EDIT
Koledzy to jednak nie działa.
Stopka nie trzyma się dołu strony closedeyes.gif
Moglibyście mi podpowiedzieć jak uzyskac taki efekt? aby bez względu na wysokość kontentu (ustawiam go zawsze na height: auto;) stopka była na dole ekranu, bez opcji position: fixed;?
bottom 0; powoduje że trzyma się pod kontentem.

Ten post edytował Bartek2000 16.04.2015, 19:13:23
Go to the top of the page
+Quote Post
Kshyhoo
post 16.04.2015, 19:17:50
Post #7





Grupa: Opiekunowie
Postów: 3 855
Pomógł: 317
Dołączył: 4.01.2005
Skąd: że
Musi działać:
[HTML] pobierz, plaintext 
  1. <body>
  2. 	<div id="wrapper">
  3. 		<div id="header"></div>
  4. 		<div id="content"></div>
  5. 		<div id="footer"></div>
  6. 	</div>
  7. </body>
[HTML] pobierz, plaintext 

[CSS] pobierz, plaintext 
  1. html,
  2. body {
  3. 	margin:0;
  4. 	padding:0;
  5. 	height:100%;
  6. }
  7. #wrapper {
  8. 	min-height:100%;
  9. 	position:relative;
  10. }
  11. #header {
  12. 	background:#ededed;
  13. 	padding:10px;
  14. }
  15. #content {
  16. 	padding-bottom:100px; /* Height of the footer element */
  17. }
  18. #footer {
  19. 	background:#ffab62;
  20. 	width:100%;
  21. 	height:100px;
  22. 	position:absolute;
  23. 	bottom:0;
  24. 	left:0;
  25. }
[CSS] pobierz, plaintext


--------------------
Jak poprawnie zadać pytanie | Jak poprawnie zatytułować wątek
Najczęstsze błędy | Błędy E_NOTICE | PHP FAQ | FAQ PHPedia | SQL-Injection | Logowanie i sesje | Hashowanie haseł | Server - od czego zacząć ? | Manual PHP
Alternatywne Forum dla Ekspertów
Nie pomagam na PW, nie mam GG
Go to the top of the page
+Quote Post
Bartek2000
post 18.04.2015, 14:03:39
Post #8





Grupa: Zarejestrowani
Postów: 6
Pomógł: 0
Dołączył: 15.04.2015

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

Cytat(Kshyhoo @ 16.04.2015, 20:17:50 ) *
[CSS] pobierz, plaintext 
  1. html,
  2. #content {
  3. 	padding-bottom:100px; /* Height of the footer element */
  4. }
  5. #footer {
  6. 	background:#ffab62;
  7. 	width:100%;
  8. 	height:100px;
  9. 	position:absolute;
  10. 	bottom:0;
  11. 	left:0;
  12. }
[CSS] pobierz, plaintext


W związku z coraz mniejszą rozdzielczością, chcę zmniejszyć wysokość stopki ze 100 na 50px, więc zrobiłem tak:
[CSS] pobierz, plaintext 
  1. html,
  2. #content {
  3. 	padding-bottom:50px; /* Height of the footer element */
  4. }
  5. #footer {
  6. 	background:#ffab62;
  7. 	width:100%;
  8. 	height:50px;
  9. 	position:absolute;
  10. 	bottom:0;
  11. 	left:0;
  12. }
[CSS] pobierz, plaintext


Efekt?
stopka zmniejszyła wysokość o 50 px, ale odstaje od dołu strony 50px.
Co tu jest nie tak?
Go to the top of the page
+Quote Post
Kshyhoo
post 18.04.2015, 14:09:40
Post #9





Grupa: Opiekunowie
Postów: 3 855
Pomógł: 317
Dołączył: 4.01.2005
Skąd: że
Przecież jak wół stoi: /* Height of the footer element */.


--------------------
Jak poprawnie zadać pytanie | Jak poprawnie zatytułować wątek
Najczęstsze błędy | Błędy E_NOTICE | PHP FAQ | FAQ PHPedia | SQL-Injection | Logowanie i sesje | Hashowanie haseł | Server - od czego zacząć ? | Manual PHP
Alternatywne Forum dla Ekspertów
Nie pomagam na PW, nie mam GG
Go to the top of the page
+Quote Post
Bartek2000
post 18.04.2015, 14:47:11
Post #10





Grupa: Zarejestrowani
Postów: 6
Pomógł: 0
Dołączył: 15.04.2015

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

No to przecież wpisałem tam 50px i w stopce też dałem 50px!
Go to the top of the page
+Quote Post
Kshyhoo
post 18.04.2015, 14:54:03
Post #11





Grupa: Opiekunowie
Postów: 3 855
Pomógł: 317
Dołączył: 4.01.2005
Skąd: że
Coś zchrzaniłeś, bo to działający kod.


--------------------
Jak poprawnie zadać pytanie | Jak poprawnie zatytułować wątek
Najczęstsze błędy | Błędy E_NOTICE | PHP FAQ | FAQ PHPedia | SQL-Injection | Logowanie i sesje | Hashowanie haseł | Server - od czego zacząć ? | Manual PHP
Alternatywne Forum dla Ekspertów
Nie pomagam na PW, nie mam GG
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 - 02:53
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn