Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> Problem z pozycjonowaniem stopki
Vlad
post 14.06.2009, 23:04:19
Post #1





Grupa: Zarejestrowani
Postów: 2
Pomógł: 0
Dołączył: 14.06.2009

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

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.
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 2)
nmts
post 14.06.2009, 23:50:03
Post #2





Grupa: Zarejestrowani
Postów: 283
Pomógł: 34
Dołączył: 21.03.2008

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

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ć.


--------------------
Free Web Tools - narzędzia dla programistów, webdeveloperów i specjalistów seo...
Go to the top of the page
+Quote Post
Vlad
post 15.06.2009, 07:30:41
Post #3





Grupa: Zarejestrowani
Postów: 2
Pomógł: 0
Dołączył: 14.06.2009

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

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

Ten post edytował Vlad 15.06.2009, 13:55:11
Go to the top of the page
+Quote Post
« Następny starszy · CSS · 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 · Linearny+ · Przełącz na: Drzewo

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

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