Drukowana wersja tematu

Kliknij tu, aby zobaczyć temat w orginalnym formacie

Forum PHP.pl _ Przedszkole _ [CSS]Schamet z DIV-ów

Napisany przez: 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 ?


Napisany przez: 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.

Napisany przez: 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. <http://december.com/html/4/element/style.html>
  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. </http://december.com/html/4/element/style.html>
  211.  
  212. <http://december.com/html/4/element/body.html>
  213.   <http://december.com/html/4/element/div.html class="box1">
  214.      <http://december.com/html/4/element/div.html class="box2">
  215.  	<http://december.com/html/4/element/div.html class="orange">1</http://december.com/html/4/element/div.html>
  216. 	<http://december.com/html/4/element/div.html class="green"></http://december.com/html/4/element/div.html>
  217.  	<http://december.com/html/4/element/div.html class="red">3</http://december.com/html/4/element/div.html>
  218.  
  219. 	<http://december.com/html/4/element/div.html class="rozowy">4</http://december.com/html/4/element/div.html>
  220. 	<http://december.com/html/4/element/div.html class="green2">2</http://december.com/html/4/element/div.html>
  221.  	<http://december.com/html/4/element/div.html class="red2"></http://december.com/html/4/element/div.html>
  222. 	<http://december.com/html/4/element/div.html class="blue"></http://december.com/html/4/element/div.html>
  223.  
  224. 	<http://december.com/html/4/element/div.html class="yellow">5</http://december.com/html/4/element/div.html>
  225. 	<http://december.com/html/4/element/div.html class="fiolet"></http://december.com/html/4/element/div.html>
  226.  	<http://december.com/html/4/element/div.html class="blue2">6</http://december.com/html/4/element/div.html>
  227.  
  228. 	<http://december.com/html/4/element/div.html class="yellow2">7</http://december.com/html/4/element/div.html>
  229. 	<http://december.com/html/4/element/div.html class="fiolet2"></http://december.com/html/4/element/div.html>
  230.  	<http://december.com/html/4/element/div.html class="blue3"></http://december.com/html/4/element/div.html>
  231.  
  232. 	<http://december.com/html/4/element/div.html class="brazowy"></http://december.com/html/4/element/div.html>
  233. 	<http://december.com/html/4/element/div.html class="fiolet3">8</http://december.com/html/4/element/div.html>
  234.  
  235. 	<http://december.com/html/4/element/div.html class="brazowy2">9</http://december.com/html/4/element/div.html>
  236. 	<http://december.com/html/4/element/div.html class="szary"></http://december.com/html/4/element/div.html>
  237.  
  238. 	<http://december.com/html/4/element/div.html class="mietowy">10</http://december.com/html/4/element/div.html>
  239. 	<http://december.com/html/4/element/div.html class="szary2">11</http://december.com/html/4/element/div.html>
  240. 	<http://december.com/html/4/element/div.html class="white">12</http://december.com/html/4/element/div.html>
  241.  
  242. 	<http://december.com/html/4/element/div.html class="szary3"></http://december.com/html/4/element/div.html>
  243.     </http://december.com/html/4/element/div.html>
  244.  </http://december.com/html/4/element/div.html>
  245. </http://december.com/html/4/element/body.html>
  246.  
[HTML] pobierz, plaintext



Napisany przez: 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.


Napisany przez: david8213 25.02.2021, 12:17:47

Miałbyś czas coś takiego zrobic smile.gif ?

Napisany przez: 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. <http://december.com/html/4/element/html.html>
  3. <http://december.com/html/4/element/body.html>
  4.  
  5. <http://december.com/html/4/element/style.html>
  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. </http://december.com/html/4/element/style.html>
  58.  
  59. <http://december.com/html/4/element/div.html class="container bdr">
  60.     <http://december.com/html/4/element/div.html class="d1 bdr"></http://december.com/html/4/element/div.html>
  61.     <http://december.com/html/4/element/div.html class="d2 bdr"></http://december.com/html/4/element/div.html>
  62.     <http://december.com/html/4/element/div.html class="d8 bdr">
  63.         <http://december.com/html/4/element/div.html class="d5 bdr"></http://december.com/html/4/element/div.html>
  64.         <http://december.com/html/4/element/div.html class="d7 bdr"></http://december.com/html/4/element/div.html>
  65.     </http://december.com/html/4/element/div.html>
  66. </http://december.com/html/4/element/div.html>
  67.  
  68. </http://december.com/html/4/element/body.html>
  69. </http://december.com/html/4/element/html.html>
[HTML] pobierz, plaintext

Napisany przez: 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

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)