Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Ustawienie w Divach
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
wasyl25
20.07.2010, 21:16:13
Witam. Mam następujący problem. Chciałbym ustawić divy i jpgi w nich zawarte tak aby oblewały dokoła treść. Chciałbym stworzyć coś na kształt tabeli w której mogę poustawiać sobie wybrane elementy. Oto kod ktury napisałem i który nie działa tak jak założyłem:

"

#TRESC
{
display: block;
height: 100%
margin-left: 180px;
margin-right: 260px;
background-color: white ;
padding: 0 0 0 0;
display: block;
border: 0px solid black;
}

<div id="TRESC">
<div style="
width: 100%;
height: 20px;
background: url('gs1.jpg');
border: 0px solid black;">
<div style="
position: relative;
float: left;
margin-left: 0px;
width: 20px;
height: 20px;
background: url('rgl1.jpg');
border: 0px solid black;">
</div>
<div style="
position: relative;
float: right;
margin-left: 0px;
width: 20px;
height: 20px;
background: url('rgp1.jpg');
border: 0px solid black;">
</div>
</div>
<div style="
width: 100%;
height: 20px;
background:;
border: 0px solid black;">
<div style="
position: relative;
float: left;
margin-left: 0px;
width: 20px;
height: 200px;
background: url('bl1.jpg');
border: 0px solid black;">
</div>
<div style="
position: absolute;
float: left;
margin-left: 180px;
margin-right: 261px;
width: auto;
height: 200px;
background-color: white ;
border: 0px solid black;"> TREŚĆ STRONY b TREŚĆ a STRONY b TREŚĆ a STRONY b TREŚĆ a STRONY b TREŚĆ STRONY a TREŚĆ STRONY b TREŚĆ STRONY a TREŚĆ STRONY b TREŚĆ STRONY a TREŚĆ STRONY
</div>
<div style="
position: relative;
float: right;
margin-left: 0px;
width: 20px;
height: 200px;
border-right: 1px solid;
border-color:130f70;">
</div>
</div>


"

Jak widać, ostatnia linia nie jest wyświetlana. Dodatkowo chciałbym aby lewa boczna krawędź miała wysokość sąsiadującego diva z zawartością strony. A ten żeby z kolei swój rozmiar dostosowywał automatycznie do zawartości.

Kombinuje już kilka dni i nie mogę sobie poradzić. podejrzewam że nie jest to skomplikowane, i że temat jest gdzieś na forum. Problem w tym że nie mam ciągłego dostępu do internetu, co utrudnia mi poszukiwania. Z góry dzięki za pomoc. Pozdrawiam
czachor
20.07.2010, 22:02:54
No właśnie nie widać - użyj bbcode, kod jest zupełnie nieczytelny.
wasyl25
22.07.2010, 14:11:41 
[HTML] pobierz, plaintext 
  1.  
  2. #TRESC 
  3. 	{
  4. 	display: block;
  5. 	height: 100%
  6. 	margin-left: 180px;
  7. 	margin-right: 260px;
  8. 	background-color: white ;
  9. 	padding: 0 0 0 0;
  10. 	display: block;
  11. 	border: 0px solid black;
  12. 	}
  13.  
  14.  
  15.  
  16.  
  17. <div id="TRESC">
  18. 		<div style="
  19. 			width: 100%;
  20. 			height: 20px;
  21. 			background: url('gs1.jpg');
  22. 			border: 0px solid black;">
  23. 			<div style="
  24. 				position: relative;
  25. 				float: left;
  26. 				margin-left: 0px;
  27. 				width: 20px;
  28. 				height: 20px;
  29. 				background: url('rgl1.jpg');
  30. 				border: 0px solid black;">
  31.  
  32. 			</div>
  33. 			<div style="
  34. 				position: relative;
  35. 				float: right;
  36. 				margin-left: 0px;
  37. 				width: 20px;
  38. 				height: 20px;
  39. 				background: url('rgp1.jpg');
  40. 				border: 0px solid black;">
  41. 			</div>
  42. 		</div>
  43. 		<div style="
  44. 			width: 100%;
  45. 			height: 20px;
  46. 			background:;
  47. 			border: 0px solid black;">
  48. 			<div style="
  49. 				position: relative;
  50. 				float: left;
  51. 				margin-left: 0px;
  52. 				width: 20px;
  53. 				height: 200px;
  54. 				background: url('bl1.jpg');
  55. 				border: 0px solid black;">
  56. 			</div>
  57. 			<div style="
  58. 				position: absolute;
  59. 				float: left;
  60. 				margin-left: 180px;
  61. 				margin-right: 261px;
  62. 				width: auto;
  63. 				height: 200px;
  64. 				background-color: white ;
  65. 				border: 0px solid black;"> TREŚĆ STRONY b TREŚĆ a STRONY b TREŚĆ a STRONY b TREŚĆ a STRONY b TREŚĆ STRONY a TREŚĆ STRONY b TREŚĆ STRONY a TREŚĆ STRONY b TREŚĆ STRONY a TREŚĆ STRONY
  66. 			</div>
  67.  
  68. 			<div style="
  69. 				position: relative;
  70. 				float: right;
  71. 				margin-left: 0px;
  72. 				width: 20px;
  73. 				height: 200px;
  74. 				border-right: 1px solid; 
  75. 				border-color:130f70;">
  76. 			</div>
  77. 		</div>
  78. 		<div style="
  79. 			display: block;
  80. 			float: bottom;
  81. 			width: 100%;
  82. 			height: 20px;
  83. 			background: url('gs1.jpg');
  84. 			border: 0px solid black;">
  85. 			<div style="
  86. 				float: left;
  87. 				margin-left: 0px;
  88. 				width: 20px;
  89. 				height: 20px;
  90. 				background: url('rgl1.jpg');
  91. 				border: 0px solid black;">
  92. 			</div>
  93. 			<div style="
  94. 				float: right;
  95. 				margin-left: 0px;
  96. 				width: 20px;
  97. 				height: 20px;
  98. 				background: url('rgp1.jpg');
  99. 				border: 0px solid black;">
  100. 			</div>
  101. 		</div>
  102.  
  103. 	</div>
  104.  
  105.  
  106.  
[HTML] pobierz, plaintext
sunpietro
22.07.2010, 15:27:21
a możesz ten kod pokazać na żywo?
poza tym, mam dla Ciebie radę ---> nie wpisuj stylów bezpośrednio w kod HTML, bo od tego są arkusze stylów CSS
wasyl25
26.07.2010, 11:20:21
chyba nikt mi nie pomoże.
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.