Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Pomoc w zagnieżdżeniu kolumny
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
kaznodzieja
26.10.2010, 11:52:24
Witam!

Męczę się z tym od wczoraj i nie potrafię nic nowego wymyślić by poprawnie zagnieździć prawą kolumnę. Pewnie wprawne oko i wiedza bardziej doświadczonych kolegów momentalnie wychwycą błąd lub nie dociągnięcia

Strona pod adresem: http://hospicjum.ostrowiec.pl/test/

zawartość html
w źródle strony

zawartość CSS
[HTML] pobierz, plaintext 
  1. *{
  2.    margin: 0;
  3.    padding: 0;
  4.  }
  5. body{
  6.   text-align: center;
  7.   font: 14px Times New Roman, Times, Georgia, serif;
  8.   color: #000000;
  9.   background: #002b91;
  10. }
  11. #container{
  12.   margin: 0 auto;
  13.   width: 850px;
  14.   background: transparent url(../images/content.jpg) repeat-y;
  15.   text-align: left;
  16. }
  17. a img {
  18.   border:0;
  19. }
  20.  
  21.  
  22. #naglowek{
  23.   height: 250px;
  24.   background: transparent url(../images/naglowek.jpg) no-repeat;
  25. }
  26. h1#logo{
  27.   position: relative;
  28.   top: 40px;
  29.   left: 340px;
  30.   width: 515px;
  31. }
  32. h1#logo a{
  33.   display: block;
  34.   height: 150px;
  35.   background: transparent url(../images/logo.jpg) no-repeat;
  36. }
  37. h1#logo a:hover{}
  38.  
  39. ul#menu{
  40.   position: relative;
  41.   top: 70px;
  42.   right: 5px;
  43.   float: right;
  44.   font-size: 18px;
  45.   list-style: none;
  46. }
  47. ul#menu li{
  48.   float: left;
  49.   text-align: center;
  50. }
  51. ul#menu a{
  52.   display: block;
  53.   padding: 3px 0;
  54.   width: 140px;
  55.   color: #000000;
  56.   text-decoration: none;
  57. }
  58. ul#menu a:hover{
  59.   color: #666666;
  60. }
  61.  
  62. #cialo{
  63.  
  64.   border-top: 1px solid #eee;
  65.   border-bottom: 1px solid #eee;
  66.   margin: 0 60px;
  67.   padding: 40px 0;
  68. }
  69.  
  70. #lewa{
  71.   /*float: left;*/
  72.   width: 470px;
  73.   padding-right:5px;
  74. }
  75. #prawa{
  76.   float: right;
  77.   vertical-align : top;
  78.   width: 250px;
  79.   /*margin-left: 150px;*/
  80. }
  81.  
  82. h1{
  83.   font-size: 17px;
  84.   color: #369;
  85. }
  86.  
  87. h2{
  88.   font-size: 14px;
  89.   color: #369;
  90. }
  91. #lewa p, #prawa p{
  92.   margin: 5px 0 20px 0;
  93.   line-height:1.5em
  94. }
  95. div.zdjatka{
  96.   margin-top: 60px;
  97.   text-align: center;
  98. }
  99. div.zdjatka img{
  100.   margin: 0 5px;
  101. }
  102.  
  103. ul#stopka{
  104.   padding: 2px 60px 160px 60px;
  105.   background: transparent url(../images/stopka.jpg) left bottom repeat-x;
  106.   font-size: 9px;
  107.   color: #ccc;
  108.   list-style: none;
  109. }
  110. ul#stopka a{
  111.   color: #ccc;
  112.   text-decoration: none;
  113. }
  114. ul#stopka a:hover{
  115.   text-decoration: underline;
  116. }
  117. li.validate{
  118.   padding-right: 5px;
  119.   float: left;
  120. }
  121. li.copyright{
  122.   float: right;
  123.  }
[HTML] pobierz, plaintext
kamil4u
26.10.2010, 13:51:07
Dodaj CSS:
#left -> float: left;
div.zdjatka -> clear: both;
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.