Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> Umieszczanie DIV'ów dookoła ustalonego DIV'u
K0walD3sign
post 28.05.2010, 21:38:10
Post #1





Grupa: Zarejestrowani
Postów: 25
Pomógł: 0
Dołączył: 22.03.2009

Ostrzeżenie: (0%)
-----

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.

Ten post edytował K0walD3sign 28.05.2010, 21:41:47
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 11)
krzysztof_kf
post 29.05.2010, 10:15:15
Post #2





Grupa: Zarejestrowani
Postów: 1 135
Pomógł: 158
Dołączył: 19.03.2009
Skąd: Toruń

Ostrzeżenie: (0%)
-----

dodaj do body

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


Go to the top of the page
+Quote Post
K0walD3sign
post 29.05.2010, 10:30:02
Post #3





Grupa: Zarejestrowani
Postów: 25
Pomógł: 0
Dołączył: 22.03.2009

Ostrzeżenie: (0%)
-----

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ą?

Ten post edytował K0walD3sign 29.05.2010, 10:30:29
Go to the top of the page
+Quote Post
krzysztof_kf
post 29.05.2010, 10:33:39
Post #4





Grupa: Zarejestrowani
Postów: 1 135
Pomógł: 158
Dołączył: 19.03.2009
Skąd: Toruń

Ostrzeżenie: (0%)
-----

hmmm poświatą chodzi ci o ten pasek pionowy który chcesz żeby przylegał do lewej i do prawej krawędzi ?
Go to the top of the page
+Quote Post
K0walD3sign
post 30.05.2010, 11:15:23
Post #5





Grupa: Zarejestrowani
Postów: 25
Pomógł: 0
Dołączył: 22.03.2009

Ostrzeżenie: (0%)
-----

Tak, właśnie o to mi chodzi.
Go to the top of the page
+Quote Post
zegarek84
post 30.05.2010, 14:17:14
Post #6





Grupa: Zarejestrowani
Postów: 1 332
Pomógł: 294
Dołączył: 12.10.2008
Skąd: Olkusz

Ostrzeżenie: (0%)
-----

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


--------------------
Jeśli twoja ręka rusza do przodu powstrzymaj swój gniew; gdy wyprzedza cię twój gniew - wycofaj rękę.
Go to the top of the page
+Quote Post
K0walD3sign
post 30.05.2010, 15:59:30
Post #7





Grupa: Zarejestrowani
Postów: 25
Pomógł: 0
Dołączył: 22.03.2009

Ostrzeżenie: (0%)
-----

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.
Go to the top of the page
+Quote Post
zegarek84
post 30.05.2010, 16:44:15
Post #8





Grupa: Zarejestrowani
Postów: 1 332
Pomógł: 294
Dołączył: 12.10.2008
Skąd: Olkusz

Ostrzeżenie: (0%)
-----

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


--------------------
Jeśli twoja ręka rusza do przodu powstrzymaj swój gniew; gdy wyprzedza cię twój gniew - wycofaj rękę.
Go to the top of the page
+Quote Post
K0walD3sign
post 30.05.2010, 17:55:51
Post #9





Grupa: Zarejestrowani
Postów: 25
Pomógł: 0
Dołączył: 22.03.2009

Ostrzeżenie: (0%)
-----

Musiałem zrobić coś nie tak, przepraszam za błąd.

Teraz poprawiłem. I wszystko działa. Co zmieniłeś, aby było dobrze?
Go to the top of the page
+Quote Post
zegarek84
post 30.05.2010, 19:02:52
Post #10





Grupa: Zarejestrowani
Postów: 1 332
Pomógł: 294
Dołączył: 12.10.2008
Skąd: Olkusz

Ostrzeżenie: (0%)
-----

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

Ten post edytował zegarek84 30.05.2010, 19:04:58


--------------------
Jeśli twoja ręka rusza do przodu powstrzymaj swój gniew; gdy wyprzedza cię twój gniew - wycofaj rękę.
Go to the top of the page
+Quote Post
K0walD3sign
post 30.05.2010, 20:35:54
Post #11





Grupa: Zarejestrowani
Postów: 25
Pomógł: 0
Dołączył: 22.03.2009

Ostrzeżenie: (0%)
-----

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.
Go to the top of the page
+Quote Post
krzysztof_kf
post 30.05.2010, 20:40:30
Post #12





Grupa: Zarejestrowani
Postów: 1 135
Pomógł: 158
Dołączył: 19.03.2009
Skąd: Toruń

Ostrzeżenie: (0%)
-----

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
Go to the top of the page
+Quote Post
« Następny starszy · CSS · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 20.07.2025 - 06:05
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn