Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> Umieszczanie DIV'ów dookoła ustalonego DIV'u
K0walD3sign
post
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
zegarek84
post
Post #2





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
Go to the top of the page
+Quote Post

Posty w temacie
- K0walD3sign   Umieszczanie DIV'ów dookoła ustalonego DIV'u   28.05.2010, 21:38:10
- - krzysztof_kf   dodaj do body [CSS] pobierz, plaintext  body...   29.05.2010, 10:15:15
- - K0walD3sign   Dzięki, krzysztof_kf. To miałem wstawić, ale wylec...   29.05.2010, 10:30:02
- - krzysztof_kf   hmmm poświatą chodzi ci o ten pasek pionowy który ...   29.05.2010, 10:33:39
- - K0walD3sign   Tak, właśnie o to mi chodzi.   30.05.2010, 11:15:23
- - zegarek84   nie łatwo było odnaleźć się w kodzie - brak wcięć ...   30.05.2010, 14:17:14
- - K0walD3sign   Zegarek, tutaj adres do tego co mi podałeś: http:/...   30.05.2010, 15:59:30
|- - zegarek84   Cytat(K0walD3sign @ 30.05.2010, 16:59...   30.05.2010, 16:44:15
- - K0walD3sign   Musiałem zrobić coś nie tak, przepraszam za błąd. ...   30.05.2010, 17:55:51
|- - zegarek84   Cytat(K0walD3sign @ 30.05.2010, 18:55...   30.05.2010, 19:02:52
- - K0walD3sign   O dziwo, zrozumiałem wiele z twojego postu. A co ...   30.05.2010, 20:35:54
- - krzysztof_kf   Cytat(K0walD3sign @ 30.05.2010, 21:35...   30.05.2010, 20:40:30

« Następny starszy · CSS · Następny nowszy »
 

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

 

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

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

RSS Aktualny czas: 10.10.2025 - 07:07
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn