Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Problem z pozycjonowaniem stopki
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
Vlad
14.06.2009, 23:04:19
Probowalem juz roznych rozwiazan znalezionych w sieci, ale zaden sposob nie rozwiazal mojego problemu. Najwyrazniej namieszalem cos wczesniej w css'ie i teraz ciezko mi znalezc co. :/

A mianowicie mam srodkowe menu o zmiennej dlugosci do ktorego jest wrzucany tekst i niestety nie potrafie poprawic tak kodu, aby stopka byla caly czas pod tym menu z niewielkim odstepem, niezaleznie od tego ile bedzie tekstu.

HTML
[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <html>
  3. <head>
  4. 	<META content="text/html; charset=utf-8" http-equiv=Content-Type>
  5. 	<title>My Playground</title>
  6. 	<META http-equiv=Content-Language content=pl>
  7. 	<META NAME="Author" CONTENT="Vlad">
  8. 	<LINK href="style.css" rel=stylesheet type="text/css">
  9. 	<link rel="icon" type="image/x-icon" href="grafika/p.jpg">
  10. 	<link rel="shortcut icon" type="image/x-icon" href="grafika/p.jpg">
  11.  
  12. </head>
  13.  
  14. <body>
  15. <div id="wrapper">
  16. <div id="login">Witaj <b>login.</b> Jesteś teraz zalogowany </div>
  17. <!-- Lewe menu -->
  18. <div id="leftmenu">
  19. 	<div id="leftmenu-tittle"></div>
  20. </div>
  21.  
  22. <!-- Prawe menu -->
  23. <div id="sidebarmenu">
  24. 	<div id="sidebar-title"></div>
  25. 	<a href="index.php">Strona Główna</a><br>
  26. 	<a href="index.php?pokaz=ipsum">Lorem Ipsum</a><br>
  27. 	<a href="index.php?pokaz=upload">Upload</a><br><a href="index.php?pokaz=listowanie_plikow">Pliki na serwerze</a><br><a href="index.php?pokaz=phpinfo">PHP info</a><br><a href="tel2/index.php">Książka telefoniczna</a><br><a href="/zajecia/">Zajęcia PHP</a><br><a href="index.php?pokaz=licznik_odwiedzin">Licznik odwiedzin</a><br><br><form action="/index.php" method="post"><input type="hidden" name="wyloguj" value="true"><input type="submit" value="Wyloguj">	<br>
  28.  
  29. </div>
  30. <!-- koniec prawego menu-->
  31. <div id="logo"></div>
  32. <!--Centralna ramka, w ktorej wszystko sie wyswietla-->
  33. <div id="main">
  34. 	<h1>Welcome. This is my Playground...</h1>
  35. 	<p>This site was made only for testing the PHP language...<br><br></p>
  36. 	</div>
  37. </div>
  38. <!--koniec centralnej ramki-->
  39. <div id="footer">
  40.  
  41. 	Site created by Vlad. This site is valid with <a href="http://validator.w3.org/check?uri=referer">HTML</a> 4.0 and <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> 2.1
  42. </div>
  43. </body>
  44. </html>
[HTML] pobierz, plaintext


CSS
[HTML] pobierz, plaintext 
  1. body 
  2. {
  3. 	background:#331A0F;
  4. 	color: white;
  5. 	font: 90% Arial, sans-serif;
  6. }
  7.  
  8. img
  9. {
  10. 	border: 0;
  11. }
  12.  
  13. #logo
  14. {
  15. 	position: absolute;
  16. 	margin: auto;
  17. 	top: 25px;
  18. 	left: 175px;
  19. 	right: 175px; 
  20. 	width: 620px;
  21. 	height: 160px;
  22. 	background: url("grafika/playground_logo.jpg");
  23. 	z-index: -1;
  24. }
  25.  
  26. #login
  27. {
  28. 	position: absolute;
  29. 	width: 250px;
  30. 	height: 20px;
  31. }
  32. #wrapper
  33. {
  34.     height: 100%;
  35. 	position: relative;
  36. 	padding-bottom:100px;
  37. }
  38.  
  39. #footer
  40. {
  41. 	text-align: center;
  42. 	width: 100%;
  43. 	border-top: 1px dashed white;
  44. 	border-bottom: 1px dashed white;
  45. 	padding-top: 15px;
  46. 	font-size: smaller;
  47. 	position:absolute;
  48. 	bottom: 0;
  49. 	left: 0;
  50. 	height: 30px;
  51. }
  52.  
  53. #footer a,a:visited 
  54. {
  55. 	font-weight:bold;
  56. 	outline-style:none; 
  57. 	text-decoration:none; 
  58. 	background: transparent;
  59. 	color: white;
  60. }
  61. #footer  a:hover 
  62. {
  63. 	font-weight:bold;
  64. 	outline-style:none; 
  65. 	text-decoration:underline; 
  66. 	background: transparent;
  67. 	color: white;
  68. }
  69.  
  70. #footer p
  71. {
  72. 	display: inline;
  73. 	padding-bottom: 10px;
  74. }
  75.  
  76. #leftmenu 
  77. {
  78. 	margin-top: 25px;
  79. 	width:150px;
  80. 	border:1px dashed white; 
  81. 	float:left; 
  82. 	background:#4A1B11; 
  83. 	text-align:center;
  84. 	overflow: hidden;
  85. }
  86.  
  87. #sidebarmenu 
  88. {
  89. 	margin-top: 25px;
  90. 	width:150px;
  91. 	border:1px dashed white; 
  92. 	float:right; 
  93. 	background:#4A1B11; 
  94. 	text-align:center;
  95. }
  96. #main 
  97. {
  98. 	position: absolute;
  99. 	top: 203px;
  100. 	left: 175px;
  101. 	right: 175px; 
  102. 	border:1px dashed white; 
  103. 	padding:5px;
  104. 	width: 620px;
  105. 	margin: auto;
  106. 	background:#4A1B11; 
  107. 	height: auto;
  108. 	text-align: justify;
  109. }
  110.  
  111. #sidebar-title
  112. {
  113. 	background: #40110F url("grafika/menu.jpg") 50% no-repeat;
  114. 	width: 150px;
  115. 	height: 24px;
  116. 	text-align:center; 
  117. 	font-weight:bold;
  118. }
  119. #leftmenu-tittle
  120. {
  121. 	background: #40110F url("grafika/sidebar.jpg") 50% no-repeat;
  122. 	border-top: 5px solid #40110F;
  123. 	width: 150px;
  124. 	height: 24px;
  125. 	text-align:center; 
  126. 	font-weight:bold;
  127. }
  128.  
  129. a,a:visited 
  130. {
  131. 	font-weight:normal;
  132. 	outline-style:none; 
  133. 	text-decoration:none; 
  134. 	color: white;
  135. } 
  136. a:hover 
  137. {
  138. 	background:white; 
  139. 	color: #4A1B11;
  140. }
[HTML] pobierz, plaintext


Aktualnie stopk jets caly czas w jednym miejscu i jezeli jest wiecej tekstu w divie main to nachodzi on na stopke. Z gory dzieki, za jakakolwiek pomoc.
nmts
14.06.2009, 23:50:03
Przekombinowałeś z pozycjonowaniem absolutnym. Ustaw relative dla footer i main, wywal top: 203px; które zasłania footer. I dodaj <div id='footer'> do wrappera, bo obecnie jest za nim. Do tego przerwa dla footer'a, którą chciałeś margin-top:10px; i będzie działać. Resztę bloków też możesz relatywnie poustawiać.
Vlad
15.06.2009, 07:30:41
Miales racje, dzieki wielkie za pomoc, relatywne pozycjonowanie jednak sprawia mniej problemow tongue.gif
Pozostal tylko jeden maly szczegol. Jak zrobic, zeby stopka byla na samym dole strony nawet jezeli tekstu jest za malo zeby ja tam przesunac. Nie chce jeszcze bardziej zwiekszac marginesu dolnego w main, bo wtedy bede mial duza przerwe jezeli bedzie duzo tekstu.

Tak to wyglada teraz przy malej ilosci tekstu, stopka znajduje sie zaraz za ostatnim div'em. Da sie cos z tym zrobic? smile.gif Przy duzej ilosci tekstu dziala idealnie.
http://img151.imageshack.us/img151/9800/my...12450470391.png


EDIT:

Udalo mi sie samemu znalezc sposob. Dodalem margin-bottom do prawego menu ktore nie zmienia swojej dlugosci a do stopki dodalem clear:both. Teraz smiga elegancko 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.