Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS] Stopka u dołu strony
Forum PHP.pl > Forum > Przedszkole
ToCoTo
2.03.2013, 19:40:19
Nie mogę sobie poradzić aby stopka była na dole strony niezależnie ile tekstu jest w "page" i "sidebar"

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  5. <title>Title</title>
  6. <meta name="keywords" content="" />
  7. <meta name="description" content="" />
  8. <link href="style.css" rel="stylesheet" type="text/css" media="screen" />
  9. </head>
  10. <body>
  11. <div id="header-wrapper">
  12. 	<div id="header">
  13. 		<div id="menu">
  14. 		</div>
  15. 	</div>
  16. </div>
  17. <div id="page">
  18. 	<div id="content">
  19. 		<div class="post">
  20. 			<h2 class="title">Jakiś tekst, może tytuł ?</h2>
  21. 			<div class="entry">
  22. 				<p>Jest dostępnych wiele różnych wersji Lorem Ipsum, ale większość zmieniła się pod wpływem dodanego humoru czy przypadkowych słów, które nawet w najmniejszym stopniu nie przypominają istniejących. Jeśli masz zamiar użyć fragmentu Lorem Ipsum, lepiej mieć pewność, że nie ma niczego „dziwnego” w środku tekstu. Wszystkie Internetowe generatory Lorem Ipsum mają tendencje do kopiowania już istniejących bloków, co czyni nasz pierwszym prawdziwym generatorem w Internecie. Używamy zawierającego ponad 200 łacińskich słów słownika, w kontekście wielu znanych sentencji, by wygenerować tekst wyglądający odpowiednio. To wszystko czyni „nasz” Lorem Ipsum wolnym od powtórzeń, humorystycznych wstawek czy niecharakterystycznych słów.</p>
  23. 				<p>Jest dostępnych wiele różnych wersji Lorem Ipsum, ale większość zmieniła się pod wpływem dodanego humoru czy przypadkowych słów, które nawet w najmniejszym stopniu nie przypominają istniejących. Jeśli masz zamiar użyć fragmentu Lorem Ipsum, lepiej mieć pewność, że nie ma niczego „dziwnego” w środku tekstu. Wszystkie Internetowe generatory Lorem Ipsum mają tendencje do kopiowania już istniejących bloków, co czyni nasz pierwszym prawdziwym generatorem w Internecie. Używamy zawierającego ponad 200 łacińskich słów słownika, w kontekście wielu znanych sentencji, by wygenerować tekst wyglądający odpowiednio. To wszystko czyni „nasz” Lorem Ipsum wolnym od powtórzeń, humorystycznych wstawek czy niecharakterystycznych słów.</p>
  24.  
  25.  
  26. 			</div>
  27. 		</div>
  28. 	</div>
  29. 	<div id="sidebar">
  30. 		<ul>
  31. 			<li>
  32. 				<h2>123123231231</h2>
  33. 				<p>Jest dostępnych wiele różnych wersji Lorem Ipsum, ale większość zmieniła się pod wpływem dodanegoJest dostępnych wiele różnych wersji Lorem Ipsum, ale większość zmieniła się pod wpływem dodanego</p>
  34. 			</li>
  35.  
  36. 			<li>
  37. 				<h2>234234423</h2>
  38. 				<ul>
  39. 				<p>Jest dostępnych wiele różnych wersji Lorem Ipsum, ale większość zmieniła się pod wpływem dodanegoJest dostępnych wiele różnych wersji Lorem Ipsum, ale większość zmieniła się pod wpływem dodanego</p>
  40. </ul>
  41.  
  42. 			</li>
  43. 		</ul>
  44. 	</div>
  45. 	<div style="clear: both;">&nbsp;</div>
  46. </div>
  47. <div id="footer">
  48. 	<p>Stopka</p>
  49. </div>
  50. </body>
  51. </html>
[HTML] pobierz, plaintext


Kod
body {
    margin: 0;
    padding: 0;
    height:100%;
    background: #000000 url(images/img01.jpg) repeat left top;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #ffffff;
}

h1, h2, h3 {
    margin: 0;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-weight: normal;
    color: #ffffff;
}

h1 { font-size: 44px; }

h2 { font-size: 20px; }

h3 { }

p, ul, ol {
    margin-top: 0;
    line-height: 240%;
    text-align: justify;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 11px;
}

ul, ol { }

blockquote { }

a { color: #ffffff;text-decoration: none; }

a:hover { text-decoration: none; }

a img {
    border: none;
}

img.left {
    float: left;
    margin: 7px 30px 0 0;
}

img.right {
    float: right;
    margin: 7px 0 0 30px;
}

hr { display: none; }


/* Header */


#header {
    height: 80px;
    margin: 0 auto;
    padding: 0 20px;
    background: url(images/img02.jpg) repeat;
    border-bottom: 4px solid #ffffff;
}

/* Menu */

#menu {
    float: left;
    width: 790px;
    height: 40px;
}

#menu ul {
    margin: 0;
    padding: 25px 0 0 20px;
    list-style: none;
    line-height: normal;
}

#menu li {
    display: block;
    float: left;
}

#menu a {
    display: block;
    float: left;
    margin-right: 17px;
    padding: 5px 12px;
    text-decoration: none;
    font: 14px Georgia, "Times New Roman", Times, serif;
    color: #ffffff;
    
}

#menu a:hover {

    text-decoration: underline;
    background: #060606;
    text-decoration: none

}

#menu .current_page_item a {

    background: #060606;
    color: #FFFFFF;
}


/* Page */

#page {
    margin: 0 auto;
    padding: 0 40px;
}


/* Content */

#content {
    float: left;
    width: 75%;
    margin-top: 10px;
}

/* Post */

.post {
    margin-bottom: 25px;
}

.post .title {
    margin-bottom: 3px;
    padding: 2px 0px 2px 15px;
    background: url(images/img03.jpg) repeat left top;
}

.post .meta {
    margin: 0 0 3px 0;
    padding: 2px 30px 2px 15px;
    font: italic 10px Georgia, "Times New Roman", Times, serif;
    color: #ffffff;
}

.post .meta a { color: #ffffff; }

.post .entry {
    padding: 25px 15px;
}

.post .links {
    margin: 0 250px 0 0;
    padding: 0 0 0 0px;
}

.post .links .comments {
}

.post .links .permalink {
    padding-left: 17px;
}

/* Sidebar */

#sidebar {
    float: right;
    width: 20%;
    margin-top: 10px;
    padding-left: 30px;
}

#sidebar ul {
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: normal;
}

#sidebar li {
    margin-bottom: 30px;
    padding: 0 0 20px 0px;
}

#sidebar li ul {
    line-height: 200%;
}

#sidebar li li {
    margin: 0;
    padding: 0 0 0 15px;
}

#sidebar p {
    padding: 0 15px;
}

#sidebar h2 {
    margin: 0 0 20px 0px;
    padding: 6px 0 6px 15px;
    background: url(images/img03.jpg) repeat left top;
    font-size: 18px;
}


#sidebar p {
    line-height: 200%;
}


/* Footer */

#footer {
position:realive;
  bottom:0;
  width:100%;
    margin: 0 auto;
    padding: 0;
    background: url(images/img02.jpg) repeat;
    border-top: 4px solid #ffffff;
}

#footer p {
    margin: 0;
    padding: 10px 0;
    text-align: center;
    line-height: normal;
    color: #FFFFFF;
}

#footer a {
    color: #FFFFFF;
}
memory
2.03.2013, 20:03:27
Wystarczy użyć wyszukiwarki, temat poruszany kilka razy
ToCoTo
2.03.2013, 21:41:01
Szukałem w google, robiłem tak jak pisali ale gdzieś robię bładu i nie wiem gdzie.
HuzarO
2.03.2013, 21:57:50
Witam, możesz użyć:
[HTML] pobierz, plaintext 
  1. position: absolute; bottom: 0px;
[HTML] pobierz, plaintext

ale według mnie jest to niepraktyczne, ja używam html5, więc mam gotowe znaczniki. Możesz także przypisać kontenerowi min-height: na tyle aby footer był na dole strony.
ToCoTo
2.03.2013, 22:34:55
Cytat(HuzarO @ 2.03.2013, 21:57:50 ) *
Witam, możesz użyć:
[HTML] pobierz, plaintext 
  1. position: absolute; bottom: 0px;
[HTML] pobierz, plaintext

ale według mnie jest to niepraktyczne, ja używam html5, więc mam gotowe znaczniki. Możesz także przypisać kontenerowi min-height: na tyle aby footer był na dole strony.

uzyłem tego parametru co mi podałeś ale nie działa. Co do min-height to estetyka bedzie brzydka jak wiecej tekstu bedzie. Kurde nie mam pomysłu. Ktoś widzi błąd w tym css-ie ?
HuzarO
2.03.2013, 22:52:04
użyj tego:

[HTML] pobierz, plaintext 
  1. #footer {
  2. 	position:absolute;
  3. 	bottom:0px;
  4. 	width:100%;
  5.     margin: 0 auto;
  6.     padding: 0;
  7.     background: url(images/img02.jpg) repeat;
  8.     border-top: 4px solid #ffffff;
  9. }
[HTML] pobierz, plaintext


u mnie działa, a co do tego .css'a to masz tam kilka błędów literówek, np: position: realive w #footer.
ToCoTo
2.03.2013, 22:57:18
jak jest mało tekstu na stronie to działa slicznie, wystaczy dodac troche wiecej i dzieja sie takie cuda http://sv070.sendspace.pl/cache/img/2013/0...0.1100x1100.jpg
krzysiekk
2.03.2013, 23:07:02
nie wiem czy o to chodzi?? 
[HTML] pobierz, plaintext 
  1.  
  2.  
  3. /* Footer */
  4.  
  5. /* --- CLEARFOOTER ----------------------------------------------------------- */
  6. div#clearfooter {
  7.     clear: both;
  8.     height: 100px; /* FIX: sticky footer */
  9. }
  10.  
  11. /* --- FOOTER ---------------------------------------------------------------- */
  12.  
  13.  
  14.  
  15. #footer {
  16.   width:100%;
  17.     margin: 0 auto;
  18.     padding: 0;
  19.     background: #ccc url(images/img02.jpg) repeat;
  20.     border-top: 4px solid #ffffff;
  21. }
  22.  
  23. #footer p {
  24.     margin: 0;
  25.     padding: 10px 0;
  26.     text-align: center;
  27.     line-height: normal;
  28.     color: #FFFFFF;
  29. }
  30.  
  31. #footer a {
  32.     color: #FFFFFF;
  33. }
  34.  
  35.  
[HTML] pobierz, plaintext


i potem w html pod koniec

[HTML] pobierz, plaintext 
  1.  
  2. 			</li>
  3. 		</ul>
  4. 	</div>
  5. 	<div id="clearfooter"></div><!-- #clearfooter end -->
  6. </div>
  7. <div id="footer">
  8. 	<p>Stopka</p>
  9. </div>
  10. </body>
  11. </html>
[HTML] pobierz, plaintext
ToCoTo
2.03.2013, 23:11:23
Dzięki ci kolego teraz działa elagancko smile.gif
krzysiekk
2.03.2013, 23:14:59
kolego tu masz drugi ciekawy przypadek

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  5. <title>Title</title>
  6. <meta name="keywords" content="" />
  7. <meta name="description" content="" />
  8. <link href="style.css" rel="stylesheet" type="text/css" media="screen" />
  9. <style type="text/css">
  10.        html, body {
  11.   margin:0;
  12.   padding:0;
  13.   height:100%;
  14.  }
  15.  #container {
  16.   min-height:100%;
  17.   position:relative;
  18.  }
  19.  #header {
  20.   background:#fbb5b8;
  21.   padding:10px;
  22.  }
  23.  #middle {
  24.   padding:10px;
  25.   padding-bottom:60px; /* Wysokość nagłówka */
  26.  }
  27.  #footer {
  28.   position:absolute;
  29.   bottom:0;
  30.   width:100%;
  31.   height:60px;  /* Wysokość nagłówka */
  32.   background:#b5fbbd;
  33.  }
  34. </style>
  35. </head>
  36. <body>
  37. <div id="container">
  38.    <div id="header"></div>
  39.    <div id="middle"><p>dddd</p><p>dddd</p></div>
  40.    <div id="footer"></div>
  41. </div>
  42. </body>
  43. </html>
[HTML] pobierz, plaintext


ale to tak na przyszłość 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.