Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> Problem z pozycjonowaniem stopki
Vlad
post
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
Vlad
post
Post #2





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 (IMG:http://forum.php.pl/style_emoticons/default/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? (IMG:http://forum.php.pl/style_emoticons/default/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 (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

Ten post edytował Vlad 15.06.2009, 13:55:11
Go to the top of the page
+Quote Post

Posty w temacie
- Vlad   Problem z pozycjonowaniem stopki   14.06.2009, 23:04:19
- - nmts   Przekombinowałeś z pozycjonowaniem absolutnym. Ust...   14.06.2009, 23:50:03
- - Vlad   Miales racje, dzieki wielkie za pomoc, relatywne p...   15.06.2009, 07:30:41

« Następny starszy · CSS · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 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 Aktualny czas: 17.10.2025 - 13:38
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn