Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]Schamet z DIV-ów
Forum PHP.pl > Forum > Przedszkole
david8213
24.02.2021, 12:41:26
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 ?

LowiczakPL
24.02.2021, 21:20:59
Pokaż kod jaki masz, co tam w nim nie wyszło, pomogę naprawić bo robiłem takie cuda.
david8213
25.02.2021, 07:59:42
Zrobiłem to tak jak poniżej.
Można to jakoś uprościć ?
Kolory nie muszą być identyczne smile.gif
Z obramowaniem jest problem

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


LowiczakPL
25.02.2021, 10:48:49
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.

david8213
25.02.2021, 12:17:47
Miałbyś czas coś takiego zrobic smile.gif ?
LowiczakPL
25.02.2021, 22:05:58
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.

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


[PHP] pobierz, plaintext 
  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>
[PHP] pobierz, plaintext
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.