Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [CSS]Blokada DIVów
david8213
post 4.10.2019, 12:01:08
Post #1





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

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


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...

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


Ten post edytował david8213 4.10.2019, 12:01:52
Go to the top of the page
+Quote Post
Neutral
post 4.10.2019, 13:20:46
Post #2





Grupa: Zarejestrowani
Postów: 286
Pomógł: 46
Dołączył: 10.01.2016

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


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;
}


  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>
Go to the top of the page
+Quote Post
dublinka
post 4.10.2019, 14:00:20
Post #3





Grupa: Zarejestrowani
Postów: 594
Pomógł: 66
Dołączył: 22.02.2008
Skąd: Dublin

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


Zawsze mozesz to zrobic na tabeli i ustalic szer komorek procentowo. Wtedy 7 komorek ~14% kazda.

Ten post edytował dublinka 4.10.2019, 14:57:53


--------------------
Go to the top of the page
+Quote Post
emillo91
post 5.10.2019, 22:35:38
Post #4





Grupa: Zarejestrowani
Postów: 129
Pomógł: 13
Dołączył: 29.03.2012

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


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.
Go to the top of the page
+Quote Post
david8213
post 13.10.2019, 15:02:58
Post #5





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

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


Zrobiłem jak poniżej ale wiersz z nazwą miesiąca po zmianie wielkość przeglądarki ma inne rozmiary niż dni poniżej

  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>
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 - 12:46