Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]Blokada DIVów
Forum PHP.pl > Forum > Przedszkole
david8213
4.10.2019, 12:01:08
Zrobiłem kalendarz z komentarzami w CSS. Na tel jest ok. Jak zablokować przesuwanie się DIVów wraz ze zmniejszaniem rozmiarów okna przeglądarki.
Na stronie ma być zawsze 7 kolumn w rzędzie i nie mają przeskakiwać na dół jak zmieniam rozmiar okna w windows...

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5.  
  6. .ramka {
  7.   position: relative;
  8.   width:90%;
  9. }
  10.  
  11. .dropdown {
  12.   position: relative;
  13.   display: inline-block;
  14.   color:blue;
  15.   background-color: #acc;
  16.   padding:  15px;
  17.   border: 2px solid white; 
  18.   margin-bottom: 4px;
  19.  // max-width: 150px;
  20.   width: 100px;
  21. }
  22.  
  23. .days {
  24.   position: relative;
  25.   display: inline-block;
  26.   color:white;
  27.   background-color: green;
  28.   padding:  15px;
  29.   border: 2px solid white; 
  30.   margin-bottom: 4px;
  31.  // max-width: 150px;
  32.   width: 100px;
  33. }
  34.  
  35. .dropdown-content {
  36.   display: none;
  37.   position: absolute;
  38.   background-color: #f9f9f9;
  39.   min-width: 160px;
  40.   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  41.   padding: 10px 16px;
  42.   z-index: 1;
  43.     margin-top: -1.8em;
  44.     margin-left: 1.5em;
  45. }
  46.  
  47. .dropdown:hover .dropdown-content {
  48.   display: block;
  49. }
  50. </style>
  51. </head>
  52. <body>
  53.  
  54.  
  55. <center>
  56. <br><br><br><br>
  57.  
  58. <div class="days">
  59.   <span>Pn</span>
  60. </div>
  61.  
  62. <div class="days">
  63.   <span>Wt</span>
  64. </div>
  65.  
  66. <div class="days">
  67.   <span>Sr</span>
  68. </div>
  69.  
  70. <div class="days">
  71.   <span>Cz</span>
  72. </div>
  73.  
  74. <div class="days">
  75.   <span>Pt</span>
  76. </div>
  77.  
  78. <div class="days">
  79.   <span>So</span>
  80. </div>
  81.  
  82. <div class="days">
  83.   <span>Nd</span>
  84. </div>
  85.  
  86. <br>
  87.  
  88. <div class="dropdown">
  89.   <span> &nbsp; </span>
  90. </div>
  91.  
  92.  
  93. <div class="dropdown">
  94.   <span>1</span>
  95.   <div class="dropdown-content">
  96.    1
  97.   </div>
  98. </div>
  99.  
  100.  
  101. <div class="dropdown">
  102.   <span>2</span>
  103.   <div class="dropdown-content">
  104.    2
  105.   </div>
  106. </div>
  107.  
  108. <div class="dropdown">
  109.   <span>3</span>
  110.   <div class="dropdown-content">
  111.    3
  112.   </div>
  113. </div>
  114.  
  115. <div class="dropdown">
  116.   <span>4</span>
  117.   <div class="dropdown-content">
  118.    4
  119.   </div>
  120. </div>
  121.  
  122. <div class="dropdown">
  123.   <span>5</span>
  124.   <div class="dropdown-content">
  125.    5
  126.   </div>
  127. </div>
  128.  
  129. <div class="dropdown">
  130.   <span>6</span>
  131.   <div class="dropdown-content">
  132.    6
  133.   </div>
  134. </div>
  135.  
  136. <br>
  137.  
  138. <div class="dropdown">
  139.   <span>7</span>
  140.   <div class="dropdown-content">
  141.    7
  142.   </div>
  143. </div>
  144.  
  145. <div class="dropdown">
  146.   <span>8</span>
  147.   <div class="dropdown-content">
  148.    8
  149.   </div>
  150. </div>
  151.  
  152. <div class="dropdown">
  153.   <span>9</span>
  154.   <div class="dropdown-content">
  155.    9
  156.   </div>
  157. </div>
  158.  
  159. <div class="dropdown">
  160.   <span>10</span>
  161.   <div class="dropdown-content">
  162.    10
  163.   </div>
  164. </div>
  165.  
  166. <div class="dropdown">
  167.   <span>11</span>
  168.   <div class="dropdown-content">
  169.    11
  170.   </div>
  171. </div>
  172.  
  173. <div class="dropdown">
  174.   <span>12</span>
  175.   <div class="dropdown-content">
  176.    12
  177.   </div>
  178. </div>
  179.  
  180. <div class="dropdown">
  181.   <span>13</span>
  182.   <div class="dropdown-content">
  183.    13
  184.   </div>
  185. </div>
  186.  
  187. <br>
  188.  
  189. <div class="dropdown">
  190.   <span>14</span>
  191.   <div class="dropdown-content">
  192.    14
  193.   </div>
  194. </div>
  195.  
  196. <div class="dropdown">
  197.   <span>15</span>
  198.   <div class="dropdown-content">
  199.    15
  200.   </div>
  201. </div>
  202.  
  203. <div class="dropdown">
  204.   <span>16</span>
  205.   <div class="dropdown-content">
  206.    16
  207.   </div>
  208. </div>
  209.  
  210. <div class="dropdown">
  211.   <span>17</span>
  212.   <div class="dropdown-content">
  213.    17
  214.   </div>
  215. </div>
  216.  
  217. <div class="dropdown">
  218.   <span>18</span>
  219.   <div class="dropdown-content">
  220.    18
  221.   </div>
  222. </div>
  223.  
  224. <div class="dropdown">
  225.   <span>19</span>
  226.   <div class="dropdown-content">
  227.    19
  228.   </div>
  229. </div>
  230.  
  231. <div class="dropdown">
  232.   <span>20</span>
  233.   <div class="dropdown-content">
  234.    20
  235.   </div>
  236. </div>
  237.  
  238. <br>
  239.  
  240. <div class="dropdown">
  241.   <span>21</span>
  242.   <div class="dropdown-content">
  243.    21
  244.   </div>
  245. </div>
  246.  
  247. <div class="dropdown">
  248.   <span>22</span>
  249.   <div class="dropdown-content">
  250.    22
  251.   </div>
  252. </div>
  253.  
  254. <div class="dropdown">
  255.   <span>23</span>
  256.   <div class="dropdown-content">
  257.    23
  258.   </div>
  259. </div>
  260.  
  261. <div class="dropdown">
  262.   <span>24</span>
  263.   <div class="dropdown-content">
  264.    24
  265.   </div>
  266. </div>
  267.  
  268. <div class="dropdown">
  269.   <span>25</span>
  270.   <div class="dropdown-content">
  271.    25
  272.   </div>
  273. </div>
  274.  
  275. <div class="dropdown">
  276.   <span>26</span>
  277.   <div class="dropdown-content">
  278.    26
  279.   </div>
  280. </div>
  281.  
  282. <div class="dropdown">
  283.   <span>27</span>
  284.   <div class="dropdown-content">
  285.    27
  286.   </div>
  287. </div>
  288.  
  289. <br>
  290.  
  291. <div class="dropdown">
  292.   <span>28</span>
  293.   <div class="dropdown-content">
  294.    28
  295.   </div>
  296. </div>
  297.  
  298. <div class="dropdown">
  299.   <span>29</span>
  300.   <div class="dropdown-content">
  301.    29
  302.   </div>
  303. </div>
  304.  
  305. <div class="dropdown">
  306.   <span>30</span>
  307.   <div class="dropdown-content">
  308.    30
  309.   </div>
  310. </div>
  311.  
  312. <div class="dropdown">
  313.   <span> &nbsp; </span>
  314. </div>
  315.  
  316. <div class="dropdown">
  317.   <span> &nbsp; </span>
  318. </div>
  319.  
  320. <div class="dropdown">
  321.   <span> &nbsp; </span>
  322. </div>
  323.  
  324. <div class="dropdown">
  325.   <span> &nbsp; </span>
  326. </div>
  327.  
  328.  
  329.  
  330.  
  331.  
  332. </body>
  333. </html>
[HTML] pobierz, plaintext
Neutral
4.10.2019, 13:20:46
Kod
.tile1, .tile2 {
  display: flex;
  justify-content: center;
  flex-flow: row nowrap;
}

.tile1 .sub_tile {
  background: lightgreen;
}

.tile2 .sub_tile {
  background: orange;
}

.sub_tile {
  display: flex;
  min-width: 50px;
  height: 50px;
}

.child {
  margin-left: auto;
  margin-right: auto;
  align-self: center;
}


[HTML] pobierz, plaintext 
  1. <body style="background: darkgoldenrod;">
  2.  
  3.  
  4. <div id="caldendar">
  5.  
  6.   <div class="tile1">
  7.  
  8.     <div class="sub_tile"><div class="child">1</div></div>
  9.     <div class="sub_tile"><div class="child">1</div></div>
  10.     <div class="sub_tile"><div class="child">1</div></div>
  11.     <div class="sub_tile"><div class="child">1</div></div>
  12.     <div class="sub_tile"><div class="child">1</div></div>
  13.     <div class="sub_tile"><div class="child">1</div></div>
  14.     <div class="sub_tile"><div class="child">1</div></div>
  15.     <div class="sub_tile"><div class="child">1</div></div>
  16.     <div class="sub_tile"><div class="child">1</div></div>
  17.     <div class="sub_tile"><div class="child">1</div></div>
  18.     <div class="sub_tile"><div class="child">1</div></div>
  19.     <div class="sub_tile"><div class="child">1</div></div>
  20.     <div class="sub_tile"><div class="child">1</div></div>
  21.  
  22.  
  23.   </div>
  24.  
  25.   <div class="tile2">
  26.  
  27.     <div class="sub_tile"><div class="child">1</div></div>
  28.     <div class="sub_tile"><div class="child">1</div></div>
  29.     <div class="sub_tile"><div class="child">1</div></div>
  30.     <div class="sub_tile"><div class="child">1</div></div>
  31.     <div class="sub_tile"><div class="child">1</div></div>
  32.     <div class="sub_tile"><div class="child">1</div></div>
  33.     <div class="sub_tile"><div class="child">1</div></div>
  34.     <div class="sub_tile"><div class="child">1</div></div>
  35.     <div class="sub_tile"><div class="child">1</div></div>
  36.     <div class="sub_tile"><div class="child">1</div></div>
  37.     <div class="sub_tile"><div class="child">1</div></div>
  38.     <div class="sub_tile"><div class="child">1</div></div>
  39.     <div class="sub_tile"><div class="child">1</div></div>
  40.  
  41.   </div>
  42.  
  43. </div>
  44.  
  45. </body>
[HTML] pobierz, plaintext
dublinka
4.10.2019, 14:00:20
Zawsze mozesz to zrobic na tabeli i ustalic szer komorek procentowo. Wtedy 7 komorek ~14% kazda.
emillo91
5.10.2019, 22:35:38
Procentowe wartości to dobre rozwiązanie. Możesz jeszcze opakować to w dodatkowy kontener i na sztywno ustalać szerokość tego kontenera wykorzystując zapytania medialne. Pozwoli to lepiej kontrolować wielkość kalendarza i będziesz mógł dzięki temu ustalić maksymalną i minimalną szerokość kontenera na jaką mają się skalować kolumny kalendarza. Nie zapomnij też o zapewnieniu skalowalności czcionki w przypadku ustalania dynamicznej szerokości kalendarza.
david8213
13.10.2019, 15:02:58
Zrobiłem jak poniżej ale wiersz z nazwą miesiąca po zmianie wielkość przeglądarki ma inne rozmiary niż dni poniżej

[XML] pobierz, plaintext 
  1. <html>
  2.  
  3. <meta http-equiv=Content-Type content="text/html; charset=windows-1250">
  4.  
  5. <style> 
  6.  
  7. .tile, .tile1, .tile2 {
  8.   display: flex;
  9.   justify-content: center;
  10.   flex-flow: row nowrap;
  11. }
  12.  
  13. .tile .sub_tile_miesiac {
  14.   display: inline-block;
  15.   color:red;
  16.   background-color: #acc;
  17.   padding:  15px;
  18.   border: 2px solid white; 
  19.   margin-bottom: 0px;
  20.   width: 899px;
  21. }
  22.  
  23. .tile1 .sub_tile {
  24.   display: inline-block;
  25.   color:red;
  26.   background-color: #acc;
  27.   padding:  15px;
  28.   border: 2px solid white; 
  29.   margin-bottom: 0px;
  30.   width: 100px;
  31. }
  32.  
  33. .tile2 .sub_tile {
  34.   display: inline-block;
  35.   color:green;
  36.   background-color: #acc;
  37.   padding:  15px;
  38.   border: 2px solid white; 
  39.   margin-bottom: 0px;
  40.   width: 100px;
  41. }
  42.  
  43. .sub_tile_miesiac {
  44.   display: flex;
  45.   min-width: 50px;
  46.   height: 20px;
  47. }
  48.  
  49. .sub_tile {
  50.   display: flex;
  51.   min-width: 50px;
  52.   height: 50px;
  53. }
  54.  
  55. .child {
  56.   margin-left: auto;
  57.   margin-right: auto;
  58.   align-self: center;
  59. }
  60.  
  61.  
  62.  
  63.  
  64. iframe {
  65.   display: none;
  66.   margin-top: -9000px;
  67. } 
  68.  
  69. .button_close {
  70.   display: none;
  71.   margin-top: -9000px;
  72. } 
  73.  
  74. #prv_billboard_closer {
  75.   display: none;
  76.   margin-top: -9000px;
  77. } 
  78.  
  79. #prv_main_link {
  80.   display: none;
  81.   margin-top: -9000px;
  82. } 
  83.  
  84. #privacySettingsPopup {
  85.   display: none;
  86.   margin-top: -9000px;
  87. }
  88.  
  89. .ramka {
  90.   position: relative;
  91.   width:90%;
  92. }
  93.  
  94.  
  95. .dropdown-content {
  96.   display: none;
  97.   position: absolute;
  98.   background-color: #f9f9f9;
  99.   min-width: 160px;
  100.   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  101.   padding: 10px 16px;
  102.   z-index: 1;
  103.   margin-top: -1.8em;
  104.   margin-left: 2.5em;
  105. }
  106.  
  107. .child:hover .dropdown-content {
  108.   display: block;
  109. }
  110.  
  111. </style> 
  112.  
  113. <br><br>
  114.  
  115.  
  116.     <body style="background: darkgoldenrod;">
  117.  
  118.  
  119.     <div id="caldendar">
  120.  
  121.       <div class="tile">
  122.  
  123.         <div class="sub_tile_miesiac"><div class="child"><center>Lipiec 2020</div></div>
  124.  
  125.  
  126.       </div>
  127.  
  128.       <div class="tile1">
  129.  
  130.         <div class="sub_tile"><div class="child">Poniedziałek</div></div>
  131.         <div class="sub_tile"><div class="child">Wtorek</div></div>
  132.         <div class="sub_tile"><div class="child">Środa</div></div>
  133.         <div class="sub_tile"><div class="child">Czwartek</div></div>
  134.         <div class="sub_tile"><div class="child">Piątek</div></div>
  135.         <div class="sub_tile"><div class="child">Sobota</div></div>
  136.         <div class="sub_tile"><div class="child">Niedziela</div></div>
  137.  
  138.  
  139.       </div>
  140.  
  141.       <div class="tile2">
  142.  
  143.         <div class="sub_tile"><div class="child">1<div class="dropdown-content">a</div></div></div>
  144.         <div class="sub_tile"><div class="child">2<div class="dropdown-content">b</div></div></div>
  145.         <div class="sub_tile"><div class="child">3<div class="dropdown-content">c</div></div></div>
  146.         <div class="sub_tile"><div class="child">4<div class="dropdown-content">d</div></div></div>
  147.         <div class="sub_tile"><div class="child">5<div class="dropdown-content">e</div></div></div>
  148.         <div class="sub_tile"><div class="child">6<div class="dropdown-content">f</div></div></div>
  149.         <div class="sub_tile"><div class="child">7<div class="dropdown-content">g</div></div></div>
  150.  
  151.       </div>
  152.  
  153.      <div class="tile2">     
  154.  
  155.         <div class="sub_tile"><div class="child">8<div class="dropdown-content">h</div></div></div>
  156.         <div class="sub_tile"><div class="child">9<div class="dropdown-content">i</div></div></div>
  157.         <div class="sub_tile"><div class="child">10<div class="dropdown-content">j</div></div></div>
  158.         <div class="sub_tile"><div class="child">11<div class="dropdown-content">k</div></div></div>
  159.         <div class="sub_tile"><div class="child">12<div class="dropdown-content">l</div></div></div>
  160.         <div class="sub_tile"><div class="child">13<div class="dropdown-content">m</div></div></div>
  161.         <div class="sub_tile"><div class="child">14<div class="dropdown-content">n</div></div></div>
  162.  
  163.  
  164.       </div>
  165.  
  166.      <div class="tile2">     
  167.  
  168.         <div class="sub_tile"><div class="child">15<div class="dropdown-content">a</div></div></div>
  169.         <div class="sub_tile"><div class="child">16<div class="dropdown-content">a</div></div></div>
  170.         <div class="sub_tile"><div class="child">17<div class="dropdown-content">a</div></div></div>
  171.         <div class="sub_tile"><div class="child">18<div class="dropdown-content">a</div></div></div>
  172.         <div class="sub_tile"><div class="child">19<div class="dropdown-content">a</div></div></div>
  173.         <div class="sub_tile"><div class="child">20<div class="dropdown-content">a</div></div></div>
  174.         <div class="sub_tile"><div class="child">21<div class="dropdown-content">a</div></div></div>
  175.  
  176.  
  177.       </div>
  178.  
  179.      <div class="tile2">     
  180.  
  181.         <div class="sub_tile"><div class="child">22<div class="dropdown-content">a</div></div></div>
  182.         <div class="sub_tile"><div class="child">23<div class="dropdown-content">a</div></div></div>
  183.         <div class="sub_tile"><div class="child">24<div class="dropdown-content">a</div></div></div>
  184.         <div class="sub_tile"><div class="child">25<div class="dropdown-content">a</div></div></div>
  185.         <div class="sub_tile"><div class="child">26<div class="dropdown-content">a</div></div></div>
  186.         <div class="sub_tile"><div class="child">27<div class="dropdown-content">a</div></div></div>
  187.         <div class="sub_tile"><div class="child">28<div class="dropdown-content">a</div></div></div>
  188.  
  189.  
  190.       </div>
  191.  
  192.      <div class="tile2">     
  193.  
  194.         <div class="sub_tile"><div class="child">29<div class="dropdown-content">a</div></div></div>
  195.         <div class="sub_tile"><div class="child">30<div class="dropdown-content">a</div></div></div>
  196.         <div class="sub_tile"><div class="child">31<div class="dropdown-content">a</div></div></div>
  197.         <div class="sub_tile"><div class="child"> </div></div>
  198.         <div class="sub_tile"><div class="child"> </div></div>
  199.         <div class="sub_tile"><div class="child"> </div></div>
  200.         <div class="sub_tile"><div class="child"> </div></div>
  201.  
  202.      </div>
  203.  
  204.   </div>
  205.  
  206.  </body>
  207. </html>
[XML] 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.