Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][HTML]Problem ze sticky footer
Forum PHP.pl > Forum > Przedszkole
Age1869
8.08.2011, 00:12:48
Witam, potrzebuję zrobić stopkę, która będzie zawsze na dole, jak będzie mało treści. A jak będzie dużo treści, trzeba żeby była widoczna dopiero po przewinięciu na dół. Zatem szukałem sticky footer w googlach i znalazłem np: http://css-tricks.com/snippets/css/sticky-footer/

Dodałem to do swojej strony: http://www.iterly.com/joomla i nie działa... (można zobaczyć w produkty).

Jeżeli chodzi o CSS to go po prostu wkleiłem, pozmieniałem tylko wysokości na odpowiednie. No i divy pododawałem oczywiście, dokładnie tak, jak każą na tej stronie...

Pomożecie?

Wrzucę tutaj pusty index.php bez contentu joomli:

[HTML] pobierz, plaintext 
  1. <?php defined('_JEXEC') or die;?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  3.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml" 
  5.    xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
  6. 	<head>
  7. 	<jdoc:include type="head" />
  8. 	<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/iterly/css/template.css" type="text/css" />
  9. 		<link href="favicon.ico" rel="shortcut icon">    
  10.  
  11. 	</head>
  12. <body>
  13. <center><div id="wrap"><div id="main" class="clearfix">
  14. <div id="wysun_mnie"><jdoc:include type="modules" name="wysuwane" style="xhtml" /></div>
  15. <div id="logowanie"><center><h3 id="logrej">Logowanie&nbsp&nbsp&nbsp Rejestracja</h3></center><jdoc:include type="modules" name="logowanie" style="xhtml" /></div>
  16. <div id="calosc">
  17. <div id="header"><img src="templates/iterly/images/logo.png" /></div>
  18. <div id="menu"><jdoc:include type="modules" name="menu" style="xhtml" /></div>
  19. <div id="tekst"><jdoc:include type="component" style="xhtml" /></div>
  20. </div><div class="push"></div></div></div>
  21. <div id="footer"><center><div id="footi"><div id="footr"><a href=""><img src="templates/iterly/images/fejs.png"></a><a href=""><img src="templates/iterly/images/twit.png"></a><a href=""><img src="templates/iterly/images/iti.png"></a></div></div></div>
  22. </center>
  23. </body>
  24. </html>
[HTML] pobierz, plaintext


i kawałek CSSa, który miał odpowiadać za sticky footer:

[HTML] pobierz, plaintext 
  1. #footer {
  2. 	height: 188px;
  3. 	width: 100%;
  4. 	background:  url('../images/stopka.png') repeat-x center top;	
  5. 	position: relative;
  6. 	margin-top: -188px; /* negative value of footer height */
  7. 	height: 188px;
  8. 	clear:both;
  9. }
  10. * { margin:0; padding:0; } 
  11.  
  12. html, body, #wrap { height: 100%; }
  13.  
  14. body > #wrap {height: auto; min-height: 100%;}
  15.  
  16. #main { padding-bottom: 188px; }  /* must be same height as the footer */
  17.  
  18.  
  19.  
  20. /* CLEAR FIX*/
  21. .clearfix:after {content: ".";
  22.         display: block;
  23.         height: 0;
  24.         clear: both;
  25.         visibility: hidden;}
  26. .clearfix {display: inline-block;}
  27. /* Hides from IE-mac \*/
  28. * html .clearfix { height: 1%;}
  29. .clearfix {display: block;}
  30. /* End hide from IE-mac */
[HTML] pobierz, plaintext


Czekam na odpowiedź i z góry dzięki za pomoc
lobopol
8.08.2011, 06:51:13
Użyj tego raczej się połapiesz:
http://ryanfait.com/resources/footer-stick...bottom-of-page/
Age1869
8.08.2011, 10:57:46
@lobopol

już z tego korzystałem, ale teraz jeszcze raz spróbowałem i działa wreszcie, problemem były znaczniki <center> poza obrębem diva wrap ;]
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.