Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Umieszczanie DIV'ów dookoła ustalonego DIV'u
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
K0walD3sign
28.05.2010, 21:38:10
Witam was. Od dłuższego czasu mam taki dręczący mnie problem. Dostałem layout do pocięcia i zakodowania, ale że nie podoba mi się kodowanie photoshopa(które i tak trzeba przepisywać od zera) napisałem layout wg. wymiarów z lay'a od nowa.

I tak. Wszystko znajdujące się na stronie jest w DIV'ie o 'wszystko', w którym umieściłem div 'menu' posiadający w sobie menu i będący tak jak by nad pozostałymi divami. Pod spodem jest div, który trzyma wszystkie divy(logo, lewa, prawa, środek, stopka) i nazywa się 'container'.
Jako, że layout, który ciąłem miał dookoła divu container poświatę, którą chciałem wstawić na końcu - zostawiłem to na koniec.
Teraz chciałbym dodać tę poświatę po lewej i prawej stronie containera tak, aby nie przemieszczać go. Chodzi konkretnie o kolejne div'y przylegające do niego.

Adres strony:
http://fajne-suki.pl/wopr/

I tam właśnie, gdzie jest 'aaaaaaaaaaaaa' i taka poświata to chciałbym to przykleić do lewej części diva tego białego tak, aby go nie przesuwać. Z prawej strony chciałbym zrobić to samo. Jak to zrobić w CSS, aby było dobrze? Ewentualnie coś w html. Chodzi poprostu o rozwiązanie tego problemu - kompatybilnością z przeglądarkami i resztą zajmę się później - teraz postanowiłem zrobić właśnie to.

Aha - tu link do stylu:
http://fajne-suki.pl/wopr/styl.css
#l oznacza tą lewą część(poświatę).
#container to środek.
#wszystko to cała ta strona.

Licze na waszą pomoc!

UWAGA! Tutaj pokazuję sam projekt - http://wopr-ilawa.pl/wopr/glowna.png .
Z takim wyjątkiem, że górna część(logo, napisy start władze itepe) będą we flashu.
krzysztof_kf
29.05.2010, 10:15:15
dodaj do body

[CSS] pobierz, plaintext 
  1.  
  2. body { 
  3. margin: 0px;
  4. padding: 0px;
  5. }
  6.  
[CSS] pobierz, plaintext


K0walD3sign
29.05.2010, 10:30:02
Dzięki, krzysztof_kf. To miałem wstawić, ale wyleciało mi z głowy.

Ramki już nie ma, tylko co teraz zrobić z tą poświatą?
krzysztof_kf
29.05.2010, 10:33:39
hmmm poświatą chodzi ci o ten pasek pionowy który chcesz żeby przylegał do lewej i do prawej krawędzi ?
K0walD3sign
30.05.2010, 11:15:23
Tak, właśnie o to mi chodzi.
zegarek84
30.05.2010, 14:17:14
nie łatwo było odnaleźć się w kodzie - brak wcięć itd.... chyba mniej więcej o to chodziło... - musisz sobie tam na dole poprawić...
[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-type" content="text/html; charset=iso-8859-2">
  4. <title>Wopr Iława - </title>
  5. <style>
  6. body {
  7. font-family: "Arial";
  8. margin: 0px;
  9. padding: 0px;
  10. }
  11. #wszystko {
  12. width:100%;
  13. height:100%;
  14. text-align: center;
  15. background-color: #799EBF;
  16. }
  17.  
  18. #container {
  19. position: relative;
  20. float: none;
  21. width: 855px;
  22.  
  23. display: block;
  24. margin: 0 auto;
  25. padding:0px;
  26. text-align: left;
  27. }
  28. #logo {
  29. width: 100%;
  30. height: 269px;
  31. background-color: #EFEFEF;
  32. }
  33. #lewa {
  34. float: left;
  35. width: 160px;
  36. height: auto !important;
  37. height: 812px;
  38. min-height: 812px;
  39. display: inline;
  40. background: #F2F2F2 url('images/bgl.png') repeat-y left;
  41. }
  42. #tresc {
  43.  
  44. float: left;
  45. width: 535px;
  46. height: auto !important;
  47. height: 812px;
  48. min-height: 812px;
  49. display: inline;
  50. background-color: #F2F2F2;
  51. }
  52. #prawa {
  53. float: right;
  54. width: 160px;
  55. height: auto !important;
  56. height: 812px;
  57. min-height: 812px;
  58. display: inline;
  59. background: #F2F2F2 url('images/bgr.png') repeat-y right;
  60. }
  61. #stopka {
  62. width: 100%;
  63. height: 133px;
  64. clear:both;
  65. background-image: url('images/stopka.png');
  66. background-repeat: no-repeat;
  67. background-position: center;
  68. }
  69. #menu {
  70. top: 300px;
  71. left: 150px;
  72. width: 184px;
  73. height: 424px;
  74. position: absolute;
  75. }
  76.  
  77. dl, dt, dd {
  78. 	display: block;
  79. 	margin: 0;
  80. 	padding: 0;
  81. }
  82. dl {
  83. width: 100%;
  84. }
  85. dt {
  86. height: 68px;
  87. width: 100%;
  88. background-image: url('images/m_gora.gif');
  89. background-repeat: no-repeat;
  90. font-size: 16pt;
  91. font-family: Comic Sans MS;
  92. }
  93. dd {
  94. width: 100%;
  95. height: 26px;
  96. background-image: url('images/m_link.gif');
  97. background-repeat: no-repeat;
  98. color: white;
  99. text-align: left;
  100. }
  101.  
  102. .mnu {
  103. padding: 16px;
  104. color: white;
  105. text-decoration: none;
  106. font-family: "Arial";
  107. font-size: 12pt;
  108. }
  109. .mnu :hover :visited {
  110. color: white;
  111. text-decoration: bold;
  112. font-family: "Arial";
  113. font-size: 12pt;
  114. }
  115. .wpis {
  116. width: 478px;
  117. height:190px;
  118. border: 1px solid;
  119. background-color: #FF0000;
  120. }
  121. .tyt {
  122. width: 476px;
  123. height: 24px;
  124. background-color: #0D3151;
  125. border-bottom: 1px solid #475B6C;
  126. color: #FFFFFF;
  127. text-align: left;
  128. padding-left: 15px;
  129. }
  130. .tresc {
  131. width: 474px;
  132. height: 142px;
  133. background-color: #F2F2F2;
  134. border-bottom: 1px solid #475B6C;
  135. color: #000000;
  136. text-align: justify;
  137. padding: 2px 10px 2px 10px;
  138. }
  139. .podp {
  140. width: 476px;
  141. height: 24px;
  142. background-color: #F2F2F2;
  143. color: #005287;
  144. text-align: right;
  145. padding-right: 15px;
  146. }
  147. .tabelatekst {
  148. border: 1px solid #475B6C;
  149. font-size: 10pt;
  150. }
  151. #topl, #topr, #botl, #botr {
  152. 	position: absolute;
  153. 	height: 9px; /* rozmiary grafiki - mozna pomniejszyc */
  154. 	width: 9px;
  155. 	display: block;
  156. }
  157.  
  158. #topl {
  159. 	top: 0px;
  160. 	left: 0px;
  161. 	background: url('images/tl.png');
  162. }
  163. #topr {
  164. 	top: 0px;
  165. 	right: 0px;
  166. 	background: url('images/tr.png');
  167. }
  168. #botl {
  169. 	bottom: 0px;
  170. 	left: 0px;
  171. 	background: url('images/bl.png');
  172. }
  173. #botr {
  174. 	bottom: 0px;
  175. 	right: 0px;
  176. 	background: url('images/br.png');
  177. }
  178. #l {
  179. position: absolute;
  180. top: -90px;
  181. left: -24px;
  182. margin: 0px;
  183. width: 24px;
  184. height: 100%;
  185. padding: 0px;
  186. background-image: url('images/l.png');
  187. background-position: right;
  188. background-repeat: repeat-y;
  189. }
  190. #r {
  191. position: absolute;
  192. top: -90px;
  193. right: 0px;
  194. margin: 0px;
  195. width: 24px;
  196. height: 100%;
  197. padding: 0px;
  198. background-image: url('images/r.png');
  199. background-position: right;
  200. background-repeat: repeat-y;
  201. }
  202. </style>
  203. </head>
  204. <body>
  205.  
  206. <div id="wszystko">
  207.  
  208.  
  209.  
  210.   <div id="container">
  211. 	<div id="l"></div>
  212. 	<div id="r"></div>
  213. 	<div id="logo">#logo</div>
  214.  
  215. 	<div id="lewa">#lewa</div>
  216. 	<div id="tresc">
  217. 		<table class="tabelatekst" cellspacing="0">
  218. 			<tr valign="middle">
  219. 				<td class="tyt">Tytuł i tak dalej.</td>
  220. 			</tr>
  221.  
  222. 			<tr valign="middle">
  223. 				<td class="tresc">Tutaj wpisuje się tekst, który dostarcza wielu informacji i wrażeń czytającym.</td>
  224.  
  225. 			</tr>
  226.  
  227. 			<tr valign="middle">
  228. 				<td class="podp">Napisany przez Kowal, 23:20 19 maja 2010r.</td>
  229. 			</tr>
  230. 		</table>
  231. 	</div>
  232. 	<div id="prawa">#prawa</div>
  233.  
  234. 	<div id="stopka"></div>
  235.  </div>
  236.  
  237.  <div id="menu">
  238. <dl>
  239. <dt>Menu</dt>
  240.  
  241. <dd><a href="czcionki.html" class="mnu">>> Baza</a></dd>
  242. <dd><a href="tekst.html" class="mnu">>> Ratownicy</a></dd>
  243. <dd><a href="tlo.html" class="mnu">>> Kursy</a></dd>
  244. <dd><a href="marginesy.html" class="mnu">>> Szkolenia</a></dd>
  245. <dd><a href="obramowanie.html" class="mnu">>> Instruktorzy</a></dd>
  246. <dd><a href="czcionki.html" class="mnu">>> Drużyny</a></dd>
  247. <dd><a href="tekst.html" class="mnu">>> Sprzęt</a></dd>
  248. <dd><a href="tlo.html" class="mnu">>> Kąpieliska</a></dd>
  249. <dd><a href="marginesy.html" class="mnu">>> Stopnie WOPR</a></dd>
  250.  
  251. <dd><a href="obramowanie.html" class="mnu">>> Przyrzeczenie</a></dd>
  252. <dd><a href="czcionki.html" class="mnu">>> Obstawy imprez</a></dd>
  253. <dd><a href="tekst.html" class="mnu">>> Bezpieczne lato</a></dd>
  254. <dd><a href="tlo.html" class="mnu">>> Pierwsza pomoc</a></dd>
  255. <dd><a href="marginesy.html" class="mnu">>> Sponsorzy</a></dd>
  256. </dl>
  257. <img src="images/m_dol.gif" width="184" height="16" border="0" align="bottom" alt="">
  258.   </div>
  259. </div>
  260. </body>
  261. </html>
[HTML] pobierz, plaintext
K0walD3sign
30.05.2010, 15:59:30
Zegarek, tutaj adres do tego co mi podałeś:
http://fajne-suki.pl/wopr/index2.html

Jak widać, DIV'y nie dopasowały się wielkością i poprzestawiały. Chciałbym to jakoś uniknąć.

Co do wcięć - wszystko pisane od ręki, więc nie wszędzie znalazły się miejsca na wcięcia.
zegarek84
30.05.2010, 16:44:15
Cytat(K0walD3sign @ 30.05.2010, 16:59:30 ) *
Zegarek, tutaj adres do tego co mi podałeś:
http://fajne-suki.pl/wopr/index2.html

Jak widać, DIV'y nie dopasowały się wielkością i poprzestawiały. Chciałbym to jakoś uniknąć....

tak, jasne - zajebiście skopiowałeś powyższy kod ;D... a może zanim umieścisz to w zewnętrznym arkuszu styli nic nie kombinuj i skopiuj toćka w toćkęquestionmark.gif - kliknij na napis plaintext [zresztą skopiowałem Ci tutaj linka...]

dopiero potem coś zmieniaj - to coś mi teraz pokazał i napisał, że to moje dzieło to masakra jakaś ;D
K0walD3sign
30.05.2010, 17:55:51
Musiałem zrobić coś nie tak, przepraszam za błąd.

Teraz poprawiłem. I wszystko działa. Co zmieniłeś, aby było dobrze?
zegarek84
30.05.2010, 19:02:52
Cytat(K0walD3sign @ 30.05.2010, 18:55:51 ) *
Co zmieniłeś, aby było dobrze?
opisze mniej więcej co pamiętam gdyż nie mam Twojego starego kodu pod ręką ;]...

na początek zmieniłem pozycjonowanie przy #container ze statycznego [statyczne zeruje pozycjonowania] na relatywne bez żadnych dodatkowych przesunięć by mieć punkt odniesienia dla cieni... wtedy pojawił się problem z menu - zostało przysłonięte - popatrzałem i miałeś pozycjonowanie absolutne [które zostawiłem] i tu można było "bawić się" z własnością z-index którego jakoś nigdy nie używam i wolę zamienić kolejność w dokumencie - czyli kolejne to wyciąłem menu w html'u i zamieściłem je za #container [jeśli coś ma identyczny z-index lub nie ustawiony to jakby dodatkowy z-index dla tych samych poziomów jest ustalany z biegu kodu - to co jest najniżej w strukturze węzłów kodu ma najwyższe pozycjonowanie z-index]...

jak już wspomniałem że chciałem mieć punkt odniesienia to wyciąłem i przeniosłem do kontenera <div id="l"></div> i nadałem tu pozycjonowanie absolutne z przesunięciem w lewo i ustawieniem u góry [na poczatku top:0px] - masz tam co i jak... domyśliłem się, że prawy obrazek [cień] to images/r.png więc dorzuciłem warstwę w kontenerze <div id="r"></div> i w pozycjonowaniu absolutnym ustawiłem z prawej strony...

dodatkowo wielkość całości kontenera była większa niż height ustawiony [cień wtedy był za krótki] więc wywaliłem tam tą wysokość by się sama policzyła po rozepchaniu... ale jako, że stopkę trochu inaczej zrobiłeś to wtedy cień mi się zrobił za długi... popatrzyłem na wysokość tej stopki i cień podniosłem ustawiając przy #l i #r zamiast top: 0px to ustawiłem ujemnie podnosząc w górę na top:-90px....

ps. musisz sobie to podociągać i dać od dołu albo jakieś zaokrąglenie albo przeciągnąć [opuścić cień zmieniając top] trochę inaczej cienia do prostej linii coby tam nie było tego pustego kwadratu
K0walD3sign
30.05.2010, 20:35:54
O dziwo, zrozumiałem wiele z twojego postu.

A co sądzisz o ogólnym zakodowaniu strony? DIV połączony z tabelkami itp.
Mam teraz problem z umieszczeniem Flash'a jako jeden z boksów.
Wygląda on identycznie jak menu, aczkolwiek nie ma dokończonych ramek. Nie wiem jak to zrobić.
http://fajne-suki.pl/wopr/

Zobacz, te telefony alarmowe.
krzysztof_kf
30.05.2010, 20:40:30
Cytat(K0walD3sign @ 30.05.2010, 21:35:54 ) *
O dziwo, zrozumiałem wiele z twojego postu.

A co sądzisz o ogólnym zakodowaniu strony? DIV połączony z tabelkami itp.
Mam teraz problem z umieszczeniem Flash'a jako jeden z boksów.
Wygląda on identycznie jak menu, aczkolwiek nie ma dokończonych ramek. Nie wiem jak to zrobić.
http://fajne-suki.pl/wopr/

Zobacz, te telefony alarmowe.



Trochę flash jest graficznie inny tzw za mała szerokość do Tego obrazka
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.