Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS]clear:both nie działa dla stopki
Forum PHP.pl > Forum > Przedszkole
teflon_z_patelni
18.09.2009, 00:59:17
Witam, 

tworzę stronke z wykorzystaniem CSS: <div> z zawartością i po prawej <div> "pomocniczy" chciałbym aby pod tym była wyświetlana stopka. 

Chciałem to zrobić za pomocą clear: both, ale ta właściwość nie działa... Korzystam na stronie ze skryptu 'news asystent', który w <div> po prawej wprowadza troche bajzlu, ale myślę, że to nie jest przyczyną problemu.

CSS (wklejam cały) - pogrubione klasy odpowiadające poszczególnym<div>:

[HTML] pobierz, plaintext 
  1. body {
  2.  color:white;
  3.  background-color: #000000;
  4.  font-family:Arial, Helvetica, sans-serif;
  5.  
  6. }
  7.  a:link {color: #BEB4B4; text-decoration:none}
  8.  a:visited {color: #BEB4B4; text-decoration: none}
  9.  :link {color: #BEB4B4; text-decoration:none}
  10.  :visited {color: #BEB4B4; text-decoration:none}
  11.  a:hover {color: silver; text-decoration: underline}
  12.  a:active {color:#FFFFFF; text-decoration: none}
  13.  
  14. h1 {
  15.  font-family: Verdana;
  16.  font-size: 16;
  17.  background-color: #655F5F;
  18.  border-style: solid;
  19.  border-width:1;
  20.  border-color:white;
  21.  color: white;
  22.  padding: 3 15;
  23. }
  24.  
  25. img {
  26. border-style:none;
  27. }
  28. INPUT {
  29. border: 1px black solid;
  30. background: #CCD9E6;
  31. }
  32.  
  33. TEXTAREA {
  34. border: 1px black solid;
  35. background: #CCD9E6;
  36. SCROLLBAR-FACE-COLOR: #CCD9E6;
  37. SCROLLBAR-HIGHLIGHT-COLOR: #CCD9E6;
  38. SCROLLBAR-SHADOW-COLOR: #CCD9E6;
  39. SCROLLBAR-ARROW-COLOR: black;
  40. SCROLLBAR-BASE-COLOR: black;
  41. SCROLLBAR-3d-light-color: #CCD9E6;
  42. SCROLLBAR-dark-shadow-color: #CCD9E6;
  43. }
  44. #bottom {
  45.  clear: both;
  46.  left: 10px;
  47.  right: 10px; 
  48. }
  49. #right {
  50.  position: absolute;
  51.  right: 10px;
  52.  top: 10px;
  53.  width: 300px;
  54.  float: right;
  55. }
  56. #topright {
  57.  position: absolute;
  58.  right: 35%;
  59.  top: 15px;
  60. }
  61. #top {
  62.  position: absolute;
  63.  left: 10px;
  64.  top: 10px;
  65.  float: left;
  66. }
  67. #content {
  68.  position:absolute;
  69.  top: 300px;
  70.  left: 40px;
  71.  right: 340px;
  72.  bottom: 5px;
  73.  float: left;
  74. }
  75.  
  76.  
  77. #hr {
  78.  position: absolute;
  79.  left: 32px;
  80.  right: 339px;
  81.     top: 265px;
  82.  background: url("gfx/hr.png") repeat-x;
  83.  
  84. }
  85. #hr_l {
  86.  position: absolute;
  87.  left: 10px;
  88.     top: 265px;
  89. }
  90. #hr_r {
  91.  position: absolute;
  92.  right: 320px;
  93.  top: 265px;
  94. }
  95.  
[HTML] pobierz, plaintext


plik index.php - pogrubione wspomniane <div>:

[PHP] pobierz, plaintext 
  1. <HTML>
  2. <HEAD>
  3. <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-2">
  4. <title>Acoustic Travel Band</title>
  5. <link rel="stylesheet" type="text/css" href="atb_style.css" />
  6. </HEAD>
  7. <BODY bgcolor="#ffffff">
  8.  
  9.  
  10.  
  11. <div id="top" style="z-index: 4">
  12. <img src="gfx/menu.png" border="0" usemap="#Map" style="float:left ">
  13. <map name="Map">
  14.   <area shape="rect" coords="97,175,170,213" href="#">
  15.   <area shape="rect" coords="168,147,248,199" href="#">
  16.   <area shape="rect" coords="248,108,368,177" href="#">
  17.   <area shape="rect" coords="203,199,342,257" href="#">
  18. </map>
  19.  
  20. </div>
  21.  
  22. <div id="topright" style="z-index: 3">
  23. <img src="gfx/title.png">
  24. </div>
  25.  
  26.  
  27. <div id="hr" style="z-index: 4">
  28. <p>&nbsp;</p>
  29.  
  30. </div>
  31.  
  32. <div id="hr_l" style="z-index: 4">
  33. <img src="gfx/hr_l.png">
  34. </div>
  35.  
  36. <div id="hr_r" style="z-index: 4">
  37. <img src="gfx/hr_r.png">
  38. </div>
  39.  
  40. <div id="right" style="z-index: 5">
  41. <? include "news/news.php" ?>
  42. <br><a href="http://www.myspace.com/acoustictravelband" target="_blank"><img src="gfx/myspace-icon.png" style="float:left; margin: 0 5">Acoustic Travel Band<div style="font-size:60%">na Myspace</div></a>  
  43. </div>
  44.  
  45. <div id="content">
  46. <?
  47. include("content/selector.php");
  48. ?>
  49. </div>
  50.  
  51.  
  52. <div id="bottom">########################Footer############################</div>
  53. </BODY>
  54. </HTML>
  55.  
[PHP] pobierz, plaintext


'bottom' ma być pod 'content' i 'right', a jest całkiem u góry - walczę z tym od godziny, przeszukałem forum, przeczytałem, że czasem tak sie dzieje gdy jest gdzieś ustawione "height", ale w tym przypadku nie jest - nie wiem już co robić - będę wdzięczny za pomoc

A tu link, jak to wygląda:

Link do www



pozdrawiam, RL

seth-kk
18.09.2009, 01:28:06
pozbadz sie position: absolute
teflon_z_patelni
18.09.2009, 03:17:47
Dzięki wielkie smile.gif #content wywaliłem a jego zawartość umieściłem w tym co menu trzyma i już gra smile.gif



raz jeszcze dzięki!

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.