Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [CSS] Stopka u dołu strony
ToCoTo
post 2.03.2013, 19:40:19
Post #1





Grupa: Zarejestrowani
Postów: 5
Pomógł: 0
Dołączył: 2.03.2013

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

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;
}


Ten post edytował ToCoTo 2.03.2013, 19:41:34
Go to the top of the page
+Quote Post

Posty w temacie
- ToCoTo   [CSS] Stopka u dołu strony   2.03.2013, 19:40:19
- - memory   Wystarczy użyć wyszukiwarki, temat poruszany kilka...   2.03.2013, 20:03:27
- - ToCoTo   Szukałem w google, robiłem tak jak pisali ale gdzi...   2.03.2013, 21:41:01
- - HuzarO   Witam, możesz użyć: [HTML] pobierz, plaintext posi...   2.03.2013, 21:57:50
|- - ToCoTo   Cytat(HuzarO @ 2.03.2013, 21:57:50 ) ...   2.03.2013, 22:34:55
- - HuzarO   użyj tego: [HTML] pobierz, plaintext #footer { po...   2.03.2013, 22:52:04
- - ToCoTo   jak jest mało tekstu na stronie to działa slicznie...   2.03.2013, 22:57:18
- - krzysiekk   nie wiem czy o to chodzi?? [HTML] pobierz, plaint...   2.03.2013, 23:07:02
- - ToCoTo   Dzięki ci kolego teraz działa elagancko   2.03.2013, 23:11:23
- - krzysiekk   kolego tu masz drugi ciekawy przypadek [HTML] pob...   2.03.2013, 23:14:59

« 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: Przełącz na: Standardowy · Przełącz na: Linearny+ · Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 19.07.2025 - 17:14
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn