Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]Div nie dostosowywuje swojej wysokosci do zawartosci
Forum PHP.pl > Forum > Przedszkole
DerekDX
23.11.2010, 22:55:00
Witam,
jak w temacie:
mam diva który zawiera w sobie 2 obiekty: menu i ramkę w której jest wyświetlana zawartość strony mimo ze te w obiekty sa zawarte w tym divie to on żyje swoim życiem oto kod:
[HTML] pobierz, plaintext 
  1. /*------------------------------------CONTENT---------------------------------------------*/
  2. #content {
  3. 	margin-left:auto;
  4. 	margin-right:auto;
  5. 	width:1000px;
  6. 	height:auto;
  7. 	margin-top:5px;
  8. 	position:relative;
  9. }
  10.  
  11. div.content_gora_lewo {
  12. 	color:#FFF;
  13. 	background: url('images/naroznik_gora_lewo1.png') no-repeat top left;
  14. }
  15.  
  16. div.content_gora_prawo {
  17. 	background: url('images/naroznik_gora_prawo1.png') no-repeat top right;
  18. }
  19.  
  20. div.content_gora_prawo h1 {
  21. 	background: url('images/border_gora1.png') repeat-x top;
  22. 	margin: 0 12px 0 12px;
  23. 	height: 56px;
  24. 	line-height: 14px;
  25. 	font:Arial, Helvetica, sans-serif;
  26. 	font-size:16px;
  27.  
  28. }
  29.  
  30. div.content_gora_prawo h1 span {
  31. 	position:relative; top:500px;
  32. }
  33. div.content_gora_prawo h1 span p {
  34. 	padding-top:3px;
  35. 	padding-right:10px;
  36. 	float:right;
  37. }
  38.  
  39. div.content_gora_prawo h1 span p a {
  40. 	color:#CCC;
  41. }
  42. div.content_lewo {
  43. 	background: url('images/border_lewo1.png') repeat-y left;
  44. }
  45.  
  46. div.content_prawo {
  47. 	background: url('images/border_prawo1.png') repeat-y right;
  48. }
  49.  
  50. div.content_srodek {
  51. 	padding-top:100px;
  52. 	background:#fff;
  53. 	margin:0 14px 0 14px;
  54. }
  55.  
  56. div.content_srodek {
  57. 	color:#000;
  58. 	padding:20px 20px 20px 20px;
  59. }
  60. div.content_dol_lewo {
  61. 	background:url('images/naroznik_dol_lewo1.png') no-repeat bottom left;
  62. }
  63.  
  64. div.content_dol_prawo {
  65. 	background:url('images/naroznik_dol_prawo1.png') no-repeat bottom right;
  66. }
  67.  
  68. div.content_dol {
  69. 	background:url('images/border_dol1.png') repeat-x bottom;
  70. 	height:9px;
  71. 	margin:0 12px 0 12px;
  72. }
  73.  
  74.  
  75. div.zawartosc {
  76. 	width:730px;
  77. 	position:relative;
  78. 	padding-left:10px;
  79. 	padding-right:10px;
  80. 	height:auto;
  81. 	float:right;
  82. 	display:block;
  83. 	border-style:solid;
  84. 	border-width:thin;
  85. }
  86.  
  87. /*------------------------------------MENU-----------------------------------------------*/
  88. ul, ul li {
  89. 	display: block;
  90. 	list-style: none;
  91. 	margin: 0;
  92. 	padding: 0;
  93. 	float:left;
  94. }
  95.  
  96. ul {
  97. 	width: 150px;
  98. 	padding: 2px 2px 1px 2px;
  99. 	background-color: #9ce;
  100. 	border: 3px double #28e;
  101. }
  102.  
  103. ul li {
  104. 	border-bottom: 1px solid #9ce;
  105. }
  106.  
  107. ul a:link, ul a:visited {
  108. 	display: block;
  109. 	width: 127px;
  110. 	text-decoration: none;
  111. 	padding: 7px;
  112. 	font-weight: bold;
  113. 	background-color: #27c;
  114. 	color: #def;
  115. 	border-left: 10px solid #25b;
  116. }
  117.  
  118. ul a:hover {
  119. 	width: 117px;
  120. 	background-color: #28e;
  121. 	color: #fff;
  122. 	border-left: 20px solid #26d;
  123. }
[HTML] pobierz, plaintext


To co jest w bloku content jest to div nadrzędny a blok MENU i div zawartość są w nim zawarte.
A oto HTML:
[HTML] pobierz, plaintext 
  1. <body>
  2. <div id="header"></div>
  3.  
  4. <div id="content">
  5. 	<div class="content_gora_lewo">
  6. 		<div class="content_gora_prawo">
  7. 			<h1><span><p>Jesteś zalogowany jako </a></p></span></h1>
  8.  
  9. 		</div>
  10. <div class="content_lewo">
  11. 			<div class="content_prawo">
  12. 				<div class="content_srodek">
  13. <ul>
  14. 	<li></li>
  15. 	<li></li>
  16. 	<li></li>
  17. 	<li></li>
  18.         <li></li>
  19. </ul>
  20.  
  21. 	<div class="zawartosc">
  22.  
  23. </div>
  24. </div>
  25. </div>
  26. </div>
  27. <div class="content_dol_lewo">
  28. <div class="content_dol_prawo">
  29. <div class="content_dol">
  30. </div>
  31. </div>
  32. </div>
  33. </div>
  34. </div>
  35. </body>
  36. </html>
[HTML] pobierz, plaintext
rocktech.pl
23.11.2010, 23:05:20
Wszytko płynie ...
[CSS] pobierz, plaintext 
  1. .clear {
  2.     clear:both;
  3. }
[CSS] pobierz, plaintext


To działa na div.content zakładam ze to ten div żyje własnym życiem.
[HTML] pobierz, plaintext 
  1. <br class="clear" />
  2. </div>
  3. </body>
  4. </html>
[HTML] pobierz, plaintext
DerekDX
23.11.2010, 23:17:51
pousuwałem selektory float z klasy "zawartosc" i "ul, ul li" i teraz nadrzedny div content ładnie się dostosowuje ale teraz oby dwa obiekty (class "zawartosc" i menu) są pod sobą a chce aby były obok siebie
rocktech.pl
23.11.2010, 23:25:30
Wszystko gra dodaj właściwości float na te 2 elementy. Jeżeli dalej coś się wyświetla nie po twojej myśli pokombinuj z <br class="clear" /> i będzie ok.
DerekDX
23.11.2010, 23:33:23
Cytat(rocktech.pl @ 23.11.2010, 23:25:30 ) *
dodaj właściwości float na te 2 elementy.


Właśnie je usunąłem chwyt z clear:both nie działą
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.