Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [CSS]Schamet z DIV-ów
david8213
post 24.02.2021, 12:41:26
Post #1





Grupa: Zarejestrowani
Postów: 308
Pomógł: 0
Dołączył: 9.12.2009

Ostrzeżenie: (10%)
X----


Próbuję zrobić coś takiego i mi nie wychodzi.
Czy są jakieś programy graficzne które zrobią mi z DIVów jak ponizej w CSS ?



Ten post edytował david8213 24.02.2021, 12:41:50
Go to the top of the page
+Quote Post
LowiczakPL
post 24.02.2021, 21:20:59
Post #2





Grupa: Zarejestrowani
Postów: 531
Pomógł: 55
Dołączył: 3.01.2016
Skąd: Łowicz

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


Pokaż kod jaki masz, co tam w nim nie wyszło, pomogę naprawić bo robiłem takie cuda.


--------------------
Szukam zleceń Symfony, Laravel, Back-End, Front-End, PHP, MySQL ...
Go to the top of the page
+Quote Post
david8213
post 25.02.2021, 07:59:42
Post #3





Grupa: Zarejestrowani
Postów: 308
Pomógł: 0
Dołączył: 9.12.2009

Ostrzeżenie: (10%)
X----


Zrobiłem to tak jak poniżej.
Można to jakoś uprościć ?
Kolory nie muszą być identyczne smile.gif
Z obramowaniem jest problem

  1.  
  2. body {
  3. margin: 0 auto;
  4. }
  5.  
  6.  
  7. .box1 {
  8. width: 100%;
  9. height: 100%;
  10. display: flex;
  11. align-items: center;
  12. justify-content: center;
  13. background-color: grey;
  14. }
  15.  
  16. .box2 {
  17. width: 600px;
  18. height: 400px;
  19. margin-top: -2.5em;
  20. margin-left: 4.5em;
  21. }
  22. .green {
  23. float: left;
  24. width: 30%;
  25. height: 20%;
  26. background-color: green;
  27. }
  28.  
  29. .green2 {
  30. float: left;
  31. width: 30%;
  32. height: 20%;
  33. background-color: green;
  34. display: flex;
  35. justify-content: center;
  36. }
  37.  
  38. .orange {
  39. float: left;
  40. width: 30%;
  41. height: 20%;
  42. background-color: #fab949;
  43. display: flex;
  44. align-items: center;
  45. justify-content: center;
  46. }
  47.  
  48. .yellow {
  49. float: left;
  50. width: 22%;
  51. height: 20%;
  52. background-color: #fae248;
  53. display: flex;
  54. align-items: center;
  55. justify-content: center;
  56. }
  57.  
  58. .yellow2 {
  59. float: left;
  60. width: 22%;
  61. height: 20%;
  62. background-color: #eeff41;
  63. display: flex;
  64. align-items: center;
  65. justify-content: center;
  66. }
  67.  
  68. .red {
  69. float: left;
  70. width: 30%;
  71. height: 20%;
  72. background-color: red;
  73. display: flex;
  74. align-items: center;
  75. justify-content: center;
  76. }
  77.  
  78. .red2 {
  79. float: left;
  80. width: 30%;
  81. height: 10%;
  82. background-color: red;
  83. }
  84.  
  85. .grey {
  86. float: left;
  87. width: 50%;
  88. height: 100%;
  89. background-color: grey;
  90. }
  91.  
  92. .rozowy {
  93. float: left;
  94. width: 30%;
  95. height: 100%;
  96. background-color: #ffc0cb;
  97. display: flex;
  98. align-items: center;
  99. justify-content: center;
  100. }
  101.  
  102. .blue {
  103. float: left;
  104. width: 30%;
  105. height: 10%;
  106. background-color: blue;
  107. }
  108.  
  109. .blue2 {
  110. float: left;
  111. width: 30%;
  112. height: 20%;
  113. background-color: blue;
  114. display: flex;
  115. align-items: center;
  116. justify-content: center;
  117. }
  118.  
  119. .blue3 {
  120. float: left;
  121. width: 30%;
  122. height: 10%;
  123. background-color: blue;
  124. }
  125.  
  126. .fiolet {
  127. float: left;
  128. width: 8%;
  129. height: 20%;
  130. background-color: #871F78;
  131. }
  132.  
  133. .fiolet2 {
  134. float: left;
  135. width: 8%;
  136. height: 20%;
  137. background-color: #871F78;
  138. }
  139.  
  140. .fiolet3 {
  141. float: left;
  142. width: 30%;
  143. height: 14%;
  144. background-color: #871F78;
  145. display: flex;
  146. align-items: center;
  147. justify-content: center;
  148. }
  149.  
  150. .brazowy {
  151. float: left;
  152. width: 30%;
  153. height: 10%;
  154. background-color: #8E2323;
  155. }
  156.  
  157. .brazowy2 {
  158. float: left;
  159. width: 30%;
  160. height: 10%;
  161. background-color: #8E2323;
  162. display: flex;
  163. justify-content: center;
  164. }
  165.  
  166. .szary {
  167. float: left;
  168. width: 30%;
  169. height: 4%;
  170. background-color: #cccc99;
  171. }
  172.  
  173. .szary2 {
  174. float: left;
  175. width: 38%;
  176. height: 20%;
  177. background-color: #cccc99;
  178. display: flex;
  179. align-items: center;
  180. justify-content: center;
  181. /* border: 3px solid black; */
  182. }
  183.  
  184. .szary3 {
  185. float: left;
  186. width: 38%;
  187. height: 6%;
  188. background-color: #cccc99;
  189. }
  190.  
  191. .mietowy {
  192. float: left;
  193. width: 22%;
  194. height: 20%;
  195. background-color: #669900;
  196. display: flex;
  197. align-items: center;
  198. justify-content: center;
  199. }
  200.  
  201. .White {
  202. float: left;
  203. width: 22%;
  204. height: 6%;
  205. background-color: white;
  206. }
  207.  
  208.  
  209.  
  210. <div class="box1">
  211. <div class="box2">
  212. <div class="orange">1</div>
  213. <div class="green"></div>
  214. <div class="red">3</div>
  215.  
  216. <div class="rozowy">4</div>
  217. <div class="green2">2</div>
  218. <div class="red2"></div>
  219. <div class="blue"></div>
  220.  
  221. <div class="yellow">5</div>
  222. <div class="fiolet"></div>
  223. <div class="blue2">6</div>
  224.  
  225. <div class="yellow2">7</div>
  226. <div class="fiolet2"></div>
  227. <div class="blue3"></div>
  228.  
  229. <div class="brazowy"></div>
  230. <div class="fiolet3">8</div>
  231.  
  232. <div class="brazowy2">9</div>
  233. <div class="szary"></div>
  234.  
  235. <div class="mietowy">10</div>
  236. <div class="szary2">11</div>
  237. <div class="white">12</div>
  238.  
  239. <div class="szary3"></div>
  240. </div>
  241. </div>
  242. </body>
  243.  




Ten post edytował david8213 25.02.2021, 09:04:59
Go to the top of the page
+Quote Post
LowiczakPL
post 25.02.2021, 10:48:49
Post #4





Grupa: Zarejestrowani
Postów: 531
Pomógł: 55
Dołączył: 3.01.2016
Skąd: Łowicz

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


Ten sposób pozycjonowania DIV uniemożliwia dodanie oczekiwanego obramowania.
Takie schematy robiłem na pozycjonowaniu absolutnym, nakładałem element na ten pod nim stosując z-index.



--------------------
Szukam zleceń Symfony, Laravel, Back-End, Front-End, PHP, MySQL ...
Go to the top of the page
+Quote Post
david8213
post 25.02.2021, 12:17:47
Post #5





Grupa: Zarejestrowani
Postów: 308
Pomógł: 0
Dołączył: 9.12.2009

Ostrzeżenie: (10%)
X----


Miałbyś czas coś takiego zrobic smile.gif ?
Go to the top of the page
+Quote Post
LowiczakPL
post 25.02.2021, 22:05:58
Post #6





Grupa: Zarejestrowani
Postów: 531
Pomógł: 55
Dołączył: 3.01.2016
Skąd: Łowicz

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


Zrób sobie kontener o rozmiarze X i Y position: relative
a w nim umieszczaj div position absolute; top:Y; left:Y; z-index:X

lepjej zrobić coś samemu bo wtedy się uczysz, niż wziąć gotowca i pozbyć się całej otoczki nauki

Ale spoko zaraz zrobię wstęp, mojego pomysłu jak podpasi to dokończysz sobie.

To początek podpowiadający jak to możesz zrobić, uważam że resztę dodasz bez najmniejszego problemu.

  1. <!DOCTYPE html>
  2.  
  3. .container {
  4. width:600px;
  5. height:600px;
  6. background-color: yellow;
  7. position: relative;
  8. }
  9. .bdr {
  10. webkit-box-shadow: inset 0px 0px 0px 4px red;
  11. -moz-box-shadow: inset 0px 0px 0px 4px red;
  12. box-shadow: inset 0px 0px 0px 4px red;
  13. }
  14.  
  15. .d1 {
  16. width: 200px;
  17. height: 100px;
  18. position: absolute;
  19. z-index: 1;
  20. background-color: green;
  21. }
  22. .d2 {
  23. width: 200px;
  24. height: 200px;
  25. position: absolute;
  26. left: 200px;
  27. z-index: 1;
  28. background-color: #866a6a;
  29. }
  30. .d8 {
  31. width: 200px;
  32. height: 260px;
  33. position: absolute;
  34. top: 200px;
  35. left: 200px;
  36. z-index: 1;
  37. background-color: #651068;
  38. }
  39. .d5 {
  40. width: 150px;
  41. height: 100px;
  42. position: absolute;
  43. z-index: 1;
  44. background-color: #dfa620;
  45. }
  46. .d7 {
  47. width: 150px;
  48. height: 100px;
  49. position: absolute;
  50. top: 97px;
  51. z-index: 1;
  52. background-color: #e1c47f;
  53. }
  54.  
  55. <div class="container bdr">
  56. <div class="d1 bdr"></div>
  57. <div class="d2 bdr"></div>
  58. <div class="d8 bdr">
  59. <div class="d5 bdr"></div>
  60. <div class="d7 bdr"></div>
  61. </div>
  62. </div>
  63.  
  64. </body>
  65. </html>


--------------------
Szukam zleceń Symfony, Laravel, Back-End, Front-End, PHP, MySQL ...
Go to the top of the page
+Quote Post
david8213
post 27.02.2021, 10:55:47
Post #7





Grupa: Zarejestrowani
Postów: 308
Pomógł: 0
Dołączył: 9.12.2009

Ostrzeżenie: (10%)
X----


Udało się smile.gif Dzięki za pomoc.


  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4.  
  5. <style>
  6.  
  7. body { margin: 0 auto; }
  8.  
  9. .box {
  10. position: absolute;
  11. display: flex;
  12. align-items: center;
  13. justify-content: center;
  14. background-color: white;
  15. width:100%;
  16. height:100%;
  17. margin-top: -0.0em;
  18. margin-left: em;
  19. }
  20. .container {
  21. width:547px;
  22. height:570px;
  23. background-color: yellow;
  24. position: relative;
  25.  
  26. }
  27. .bdr {
  28. webkit-box-shadow: inset 0px 0px 0px 4px red;
  29. -moz-box-shadow: inset 0px 0px 0px 4px red;
  30. box-shadow: inset 0px 0px 0px 4px red;
  31. }
  32.  
  33. .salon {
  34. width: 204px;
  35. height: 475px;
  36. position: absolute;
  37. top: 96px;
  38. z-index: 2;
  39. background-color: #e1c47f;
  40. }
  41.  
  42. .jadalnia {
  43. width: 204px;
  44. height: 100px;
  45. position: absolute;
  46. top: 292px;
  47. z-index: 2;
  48. background-color: ###;
  49. }
  50.  
  51. .kuchnia {
  52. width: 204px;
  53. height: 133px;
  54. position: absolute;
  55. top: 435px;
  56. z-index: 2;
  57. background-color: ###;
  58. }
  59.  
  60. .sypialnia {
  61. width: 200px;
  62. height: 200px;
  63. position: absolute;
  64. left: 200px;
  65. z-index: 2;
  66. background-color: #e1c47f;
  67. }
  68.  
  69. .holl {
  70. width: 200px;
  71. height: 243px;
  72. position: absolute;
  73. top: 196px;
  74. left: 200px;
  75. z-index: 2;
  76. background-color: #e1c47f;
  77. }
  78.  
  79. .garderoba {
  80. width: 150px;
  81. height: 100px;
  82. position: absolute;
  83. z-index: 2;
  84. background-color: #e1c47f;
  85. }
  86. .lazienka2 {
  87. width: 150px;
  88. height: 100px;
  89. position: absolute;
  90. top: 96px;
  91. z-index: 2;
  92. background-color: #e1c47f;
  93. }
  94.  
  95. .wiatrolap {
  96. width: 150px;
  97. height: 94px;
  98. position: absolute;
  99. top: 435px;
  100. left: 200px;
  101. z-index: 2;
  102. background-color: #e1c47f;
  103. }
  104.  
  105. .taras {
  106. width: 200px;
  107. height: 96px;
  108. position: absolute;
  109. top: 0px;
  110. left: 0px;
  111. z-index: 3;
  112. background-color: white;
  113. }
  114.  
  115. .ganek {
  116. width: 142px;
  117. height: 42px;
  118. position: absolute;
  119. top: 529px;
  120. left: 204px;
  121. z-index: 3;
  122. background-color: white;
  123. }
  124.  
  125. .lazienka1 {
  126. width: 152px;
  127. height: 125px;
  128. position: absolute;
  129. left: 396px;
  130. z-index: 2;
  131. background-color: #e1c47f;
  132. }
  133.  
  134. .biuro {
  135. width: 152px;
  136. height: 200px;
  137. position: absolute;
  138. top: 121px;
  139. left: 396px;
  140. z-index: 2;
  141. background-color: #e1c47f;
  142. }
  143.  
  144.  
  145. .pralnia {
  146. width: 152px;
  147. height: 95px;
  148. position: absolute;
  149. top: 317px;
  150. left: 396px;
  151. z-index: 2;
  152. background-color: #e1c47f;
  153. }
  154.  
  155. .pokoj {
  156. width: 202px;
  157. height: 165px;
  158. position: absolute;
  159. top: 408px;
  160. left: 346px;
  161. z-index: 1;
  162. background-color: #e1c47f;
  163. }
  164.  
  165. .drzwi_dom {
  166. width: 40px;
  167. height: 4px;
  168. position: absolute;
  169. top: 525px;
  170. left: 258px;
  171. z-index: 4;
  172. background-color: #e1c47f;
  173. }
  174.  
  175. .drzwi_wiatrolap {
  176. width: 40px;
  177. height: 4px;
  178. position: absolute;
  179. top: 435px;
  180. left: 258px;
  181. z-index: 4;
  182. background-color: #e1c47f;
  183. }
  184.  
  185. .drzwi_salon {
  186. width: 4px;
  187. height: 43px;
  188. position: absolute;
  189. top: 392px;
  190. left: 200px;
  191. z-index: 4;
  192. background-color: #e1c47f;
  193. }
  194.  
  195. .drzwi_lazienka2 {
  196. width: 4px;
  197. height: 40px;
  198. position: absolute;
  199. top: 320px;
  200. left: 346px;
  201. z-index: 4;
  202. background-color: #e1c47f;
  203. }
  204.  
  205. .drzwi_lazienka1 {
  206. width: 4px;
  207. height: 40px;
  208. position: absolute;
  209. top: 15px;
  210. left: 396px;
  211. z-index: 4;
  212. background-color: #e1c47f;
  213. }
  214.  
  215. .drzwi_gabinet {
  216. width: 4px;
  217. height: 40px;
  218. position: absolute;
  219. top: 230px;
  220. left: 396px;
  221. z-index: 4;
  222. background-color: #e1c47f;
  223. }
  224.  
  225. .drzwi_pralnia {
  226. width: 4px;
  227. height: 40px;
  228. position: absolute;
  229. top: 345px;
  230. left: 396px;
  231. z-index: 4;
  232. background-color: #e1c47f;
  233. }
  234.  
  235. .drzwi_sypialnia {
  236. width: 38px;
  237. height: 4px;
  238. position: absolute;
  239. top: 196px;
  240. left: 354px;
  241. z-index: 4;
  242. background-color: #e1c47f;
  243. }
  244.  
  245. .drzwi_garderoba {
  246. width: 38px;
  247. height: 4px;
  248. position: absolute;
  249. top: 196px;
  250. left: 262px;
  251. z-index: 4;
  252. background-color: #e1c47f;
  253. }
  254.  
  255. .drzwi_pokoj {
  256. width: 40px;
  257. height: 4px;
  258. position: absolute;
  259. top: 435px;
  260. left: 353px;
  261. z-index: 4;
  262. background-color: #e1c47f;
  263. }
  264.  
  265. </style>
  266.  
  267. <div class="box">
  268. <div class="container">
  269. <div class="taras"> </div>
  270. <div class="salon bdr"> </div>
  271. <div class="jadalnia"> </div>
  272. <div class="kuchnia"> </div>
  273. <div class="sypialnia bdr"> </div>
  274. <div class="holl bdr">
  275. <div class="garderoba bdr"> </div>
  276. <div class="lazienka2 bdr"> </div>
  277. </div>
  278. <div class="wiatrolap bdr"> </div>
  279. <div class="ganek"> </div>
  280. <div class="lazienka1 bdr"> </div>
  281. <div class="biuro bdr"> </div>
  282. <div class="pralnia bdr"> </div>
  283. <div class="pokoj bdr"> </div>
  284.  
  285. <div class="drzwi_dom"> </div>
  286. <div class="drzwi_wiatrolap"> </div>
  287. <div class="drzwi_salon"> </div>
  288. <div class="drzwi_lazienka2"> </div>
  289. <div class="drzwi_lazienka1"> </div>
  290. <div class="drzwi_sypialnia"> </div>
  291. <div class="drzwi_garderoba"> </div>
  292. <div class="drzwi_gabinet"> </div>
  293. <div class="drzwi_pralnia"> </div>
  294. <div class="drzwi_pokoj"> </div>
  295.  
  296.  
  297. </div>
  298. </div>
  299. </body>
  300. </html>


Ten post edytował david8213 27.02.2021, 12:04:01
Go to the top of the page
+Quote Post

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

 



RSS Wersja Lo-Fi Aktualny czas: 28.03.2024 - 09:27