Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS] Stopka - złe miejsce na stronie
Forum PHP.pl > Forum > Przedszkole
Turson
14.07.2013, 21:13:34
Mam problem ze zrobieniem stopki tak, aby była w standardowym miejscu, czyli jakieś np. 100px pod ostatnim elementem strony.
Kod który podałem działa, gdy strona jest tak krótka, ze nie zapełnia całej przeglądarki i wtedy faktycznie stopka jest na samym dole.
Problem jest wtedy, gdy strona jest dłuższa że musimy przesunąć scrolla. Efekt jest następujący: http://turson.pl/host/files/4959359.jpg


[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. <head>
  4.  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  5. <title>stronai</title>
  6. <link rel="Shortcut icon" href="images/favicon.png" />
  7. <link rel="stylesheet" href="style.css" type="text/css">
  8. </head>
  9. <body>
  10. <div class="logo_bg">
  11. 	<a href="index.php"><div class="logo"></div></a>
  12. 	<div class="menu">
  13. 		<a href="szukaj.php" class="menua">OGŁOSZENIA</a> •
  14. 		<a href="#" class="menua">KONTO</a> •
  15. 		<a href="#" class="menua">FAQ</a>
  16. 		<a href="#"><div class="dodaj_ogloszenie"></div></a>
  17. 	</div>
  18. </div>
  19. <div class="container">
  20. 	<div class="container_top">
  21. 		<div class="container_lewo">
  22. 			<div class="cnt_text">
  23. 				<div style="font-weight:bold;font-family:verdana;text-align:center">szukaj</div>
  24. 				jeden<br>dwa<br>trzy<br>czteryjeden<br>dwa<br>trzy<br>czteryjeden<br>dwa<br>trzy<br>cztery
  25. 				jeden<br>dwa<br>trzy<br>czteryjeden<br>dwa<br>trzy<br>czteryjeden<br>dwa<br>trzy<br>cztery
  26. 				</form>
  27. 			</div>
  28. 		</div>
  29. 		<div class="container_prawo">
  30. 			<div class="cnt_text">
  31. 				jeden<br>dwa<br>trzy<br>cztery
  32. 			</div>
  33. 		</div>
  34. 	</div>
  35. 	</div>
  36. </div>
  37. <div class="footer">
  38. 	<div class="footer_linki">
  39. 		<a href="index.php">Strona główna</a> | <a href="zasady">Zasady korzystania</a> | <a href="pomoc">Pomoc</a> | <a href="kontakt">Kontakt</a> 
  40. 	</div>
  41. 	<div class="footer_text">
  42. 		Wszystkie prawa zastrzeżone.
  43. 	</div>
  44. </div>
[HTML] pobierz, plaintext 

[CSS] pobierz, plaintext 
  1. html, body{background-color:white;margin:0;padding:0;height:100%;}
  2. a{text-decoration:none:outline:none}
  3. .logo_bg{background:url(images/logo_bg.jpg) repeat-x;width:100%;height:192px;}
  4. .logo{background:url(images/logo.png);width:400px;height:110px;margin-left:100px;float:left}
  5. .logo:hover{background:url(images/logo_hover.png);width:400px;height:110px;}
  6. .menu{font-family:Courier New;float:right;margin-right:150px;;margin-top:60px;color:#a9a9a9;}
  7. .menua{text-decoration:none;color:#1f1f1f;font-size:22px;padding:5px 3px 5px 3px;border:0;text-shadow: 1px 1px 7px #828282;letter-spacing:-1px;margin-right:20px}
  8. .menua:hover{backgroudnd-color:#dcdcdc;text-decoration:none;color:black;text-shadow: 1px 1px 7px #232323;background-color:#d4d4d4}
  9. .dodaj_ogloszenie{background:url(images/dodaj_ogloszenie.png)no-repeat;width:120px;height:50px;float:right;margin-top:-25px;margin-left:30px}
  10. .dodaj_ogloszenie:hover{background:url(images/dodaj_ogloszenie_hover.png)no-repeat;width:120px;height:50px}
  11. .footer{position:absolute;bottom:0;width:100%;box-shadow: 2px 0px 7px #828282;text-align:center;padding: 4px 0 3px 0;}
  12. .footer_text{font-size:15px;font-family:verdana;color:#3f3f3f;letter-spacing:-1px}
  13. .footer_linki{font-size:13px;font-family:verdana;color:#acacac;letter-spacing:7px}
  14. .footer_linki a{letter-spacing:0;font-size:15px;text-decoration:none;color:#3f3f3f;letter-spacing:-1px} .footer_linki a:hover{text-decoration:underline}
  15. .container{width:1000px;padding:0;margin:auto;}
  16. .container_top{margin-top:30px;border-top:1px solid #cecece;height:100%}
  17. .container_lewo{float:left;width:249px;border-right:1px solid #cecece;}
  18. .container_prawo{float:right;width:750px;}
  19. .cnt_text{padding:20px}
  20. .cnt_text select{color:#2e2e2e;border:1px solid #7f7f7f;background:#f6f6f6;font-size:14px;padding:3px 3px 3px 3px;margin:4px;}
[CSS] pobierz, plaintext
php11
14.07.2013, 21:57:28
Dobry wieczór,

Tak na szybko:

[HTML] pobierz, plaintext 
  1.  
  2. .footer {
  3.       box-shadow: 2px 0 7px #828282;
  4.     float: left;
  5.     margin-top: 100px;
  6.     padding: 4px 0 3px;
  7.     text-align: center;
  8.     width: 100%;
  9. }
[HTML] pobierz, plaintext


Nie możesz skorzystać z jakiegoś szablonu bazowego?
grabek93
15.07.2013, 01:39:38
http://blog.codebusters.pl/pl/entry/stopka...ci-z-pomoca-css
fate
15.07.2013, 09:27:15
http://bit.ly/xdoURb
Turson
17.07.2013, 19:41:16
Można to może jakoś zmodyfikować, żeby nie budować podstaw strony od nowa?
php11
17.07.2013, 23:35:05
Darmowych, dobrych szablonów html i nie tylko, jest w sieci wiele.
Znajdź najbardziej Tobie pasujący i przerabiaj...
smile.gif
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.