Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS] Tabela i wiersze - podział
Forum PHP.pl > Forum > Przedszkole
david8213
8.01.2020, 16:04:50
Jak zrobić przerwę między dwoma pierwszymi wierszami a dwoma drugimi.
wiersze z cyframi mają być odzielone np trzema <br> od wierszy z literami
Mozna to zrobić bez użycia <br> tylko za pomocą CSS ?

Zrobiłem jak poniżej ale nie działa

[XML] pobierz, plaintext 
  1. <style>
  2. #glowny1 {   widht:80%; height:auto; background-color: #32CD32; }
  3.  
  4. #glowny2 {   widht:80%; height:auto; background-color: #32CD32; margin-top: 10px; }
  5.  
  6. .columna1 {width:50%; background-color: #32ffff; float:left; height:auto; margin: 0 auto; }
  7. .columna2 {width:50%; background-color: red; float:right; height:auto; margin: 0 auto; }
  8. .columna3 {width:50%; background-color: grey; float:left; height:auto; margin: 0 auto; }
  9. .columna4 {width:50%; background-color: yellow; float:right; height:auto; margin: 0 auto; }
  10. </style>
  11.  
  12. <div id="glowny1">
  13.  <div class="columna1">111111</div>
  14.  <div class="columna2">222222</div>
  15.  <div class="columna3">333333</div>
  16.  <div class="columna4">444444</div>
  17. </div>
  18.  
  19.  
  20. <div id="glowny2">
  21. <div class="columna1">AAAAA</div>
  22.  <div class="columna2">BBBBB</div>
  23.  <div class="columna3">CCCCC</div>
  24.  <div class="columna4">DDDDD</div>
  25. </div>
  26.  
[XML] pobierz, plaintext
nospor
8.01.2020, 16:20:37
Bo left i right mieszaja troche. Trzeba wyczyscic ich dzialanie

Kod
<div id="glowny1">
<div class="columna1">111111</div>
<div class="columna2">222222</div>
<div class="columna3">333333</div>
<div class="columna4">444444</div>
</div>

<div style="clear:both;"></div>
<div id="glowny2">
<div class="columna1">AAAAA</div>
<div class="columna2">BBBBB</div>
<div class="columna3">CCCCC</div>
<div class="columna4">DDDDD</div>
</div>


ps:
Cytat
Jak zrobić przerwę między dwoma pierwszymi wierszami a dwoma drugimi.

Opis ma sie nijak do tego co chciales osiagnac. Czytales w ogole co napisales? wink.gif
david8213
8.01.2020, 16:28:35 
[XML] pobierz, plaintext 
  1. <div style="clear:both;"></div> 
[XML] pobierz, plaintext


tego właśnie mi brakowało. Dziękuję smile.gif

Jak zrobić aby przy zmianie rozmiaru okna przeglądarki główna ramka ciemno zielona była wkoło dwóch górnych podramek a dolna czarna była na całym rozmiarze dwóch dolnych ? Bo teraz główne ramki są wąskie i nie obejmują całego obszaru podramek.
Nie mogę wpisać wymiarów na stałe lub w procentach bo ich rozmiar jest zależny od podramek z tekstem oraz rysunkami, zależy od rozmiaru okna przeglądarki

[XML] pobierz, plaintext 
  1. <style>
  2. #glowny1 {   widht:80%; height:auto; background-color: green; margin-top: 40px; padding: 14px; }
  3.  
  4. #glowny2 {   widht:80%; height:auto; background-color: black; margin-top: 5px; padding: 14px; }
  5.  
  6. .columna1 {width:50%; background-color: #32ffff; float:left;  margin: 0 auto; }
  7. .columna2 {width:50%; background-color: red; float:right;  margin: 0 auto; }
  8.  
  9.  
  10.  
  11. #myImg {
  12.   border-radius: 5px;
  13.   cursor: pointer;
  14.   transition: 0.3s;
  15.   width: 100%;
  16.   display: block;
  17.   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  18.   padding: 10px 10px 10px 10px;
  19. }
  20.  
  21. #myImg:hover {opacity: 0.7;}
  22.  
  23. .span4 {
  24.     width: 70%;
  25.  //   padding: 10px 10px 10px 10px;
  26.   margin-top: 10%;}
  27.  
  28. #left1 {
  29.   float: left;
  30.   width: 90%;
  31. }
  32.  
  33. #left2 {
  34.   float: left;
  35.   width: 30%;
  36. }
  37.  
  38. #right1 {
  39.   float: left;
  40.   width: 30%;
  41. }
  42.  
  43. #right2 {
  44.   float: left;
  45.   width: 30%;
  46. }
  47.  
  48.  
  49. #left1a {
  50.   float: left;
  51.   width: 30%;
  52. }
  53.  
  54. #left2b {
  55.   float: left;
  56.   width: 30%;
  57. }
  58.  
  59. #right1c {
  60.   float: left;
  61.   width: 30%;
  62. }
  63.  
  64. #right2d {
  65.   float: left;
  66.   width: 90%;
  67. }
  68.  
  69. </style>
  70.  
  71. <div id="glowny1">
  72.  <div class="columna1">
  73.  
  74.  
  75.  <div id="left1">
  76.      <p>
  77. <h1><b><i>Tytuł: nr01</h1></b></i>Data: 2019-10-11<br><br>
  78.         <div style="text-align: justify; ">
  79. text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text 
  80.         </div>
  81.      </p>
  82.   </div>
  83.  
  84.  
  85.  
  86.  
  87.  </div>
  88.  <div class="columna2">
  89.  
  90.   <div id="left2">
  91.      <p>
  92. <div class="span4"><img id="myImg" src="https://img.pakamera.net/i1/1/486/grafiki-i-ilustracje-12156277_2218152486.jpg" border="0"></a></div>
  93. <div class="span4"><img id="myImg" src="https://img.pakamera.net/i1/1/486/grafiki-i-ilustracje-12156277_2218152486.jpg" border="0"></a></div>
  94. <div class="span4"><img id="myImg" src="https://img.pakamera.net/i1/1/486/grafiki-i-ilustracje-12156277_2218152486.jpg" border="0"></a></div>
  95.     </p>
  96.   </div>
  97.  
  98.   <div id="right1">
  99.      <p>
  100. <div class="span4"><img id="myImg" src="https://img.pakamera.net/i1/1/486/grafiki-i-ilustracje-12156277_2218152486.jpg" border="0"></a></div>
  101. <div class="span4"><img id="myImg" src="https://img.pakamera.net/i1/1/486/grafiki-i-ilustracje-12156277_2218152486.jpg" border="0"></a></div>
  102.  
  103.     </p>
  104.   </div>
  105.  
  106.   <div id="right2">
  107.      <p>
  108. <div class="span4"><img id="myImg" src="https://img.pakamera.net/i1/1/486/grafiki-i-ilustracje-12156277_2218152486.jpg" border="0"></a></div>
  109. <div class="span4"><img id="myImg" src="https://img.pakamera.net/i1/1/486/grafiki-i-ilustracje-12156277_2218152486.jpg" border="0"></a></div>
  110. <div class="span4"><img id="myImg" src="https://img.pakamera.net/i1/1/486/grafiki-i-ilustracje-12156277_2218152486.jpg" border="0"></a></div>
  111.      </p>
  112.   </div>
  113.  
  114.  </div>
  115. </div>
  116.  
  117.  
  118. <div style="clear:both;"></div> <br><br><br>
  119.  
  120.  
  121.  
  122. <div id="glowny2">
  123.  <div class="columna1">
  124.  
  125. <div id="left1a" ><br><br>
  126.      <p>
  127. <div class="span4"><img id="myImg" src="https://img.pakamera.net/i1/1/486/grafiki-i-ilustracje-12156277_2218152486.jpg" border="0"></a></div>
  128. <div class="span4"><img id="myImg" src="https://img.pakamera.net/i1/1/486/grafiki-i-ilustracje-12156277_2218152486.jpg" border="0"></a></div>
  129. <div class="span4"><img id="myImg" src="https://img.pakamera.net/i1/1/486/grafiki-i-ilustracje-12156277_2218152486.jpg" border="0"></a></div>
  130.      </p>
  131.   </div>
  132.  
  133.   <div id="left2b"><br><br>
  134.      <p>
  135. <div class="span4"><img id="myImg" src="https://img.pakamera.net/i1/1/486/grafiki-i-ilustracje-12156277_2218152486.jpg" border="0"></a></div>
  136. <div class="span4"><img id="myImg" src="https://img.pakamera.net/i1/1/486/grafiki-i-ilustracje-12156277_2218152486.jpg" border="0"></a></div>
  137.  
  138.     </p>
  139.   </div>
  140.  
  141.   <div id="right1c"><br><br>
  142.      <p>
  143. <div class="span4"><img id="myImg" src="https://img.pakamera.net/i1/1/486/grafiki-i-ilustracje-12156277_2218152486.jpg" border="0"></a></div>
  144. <div class="span4"><img id="myImg" src="https://img.pakamera.net/i1/1/486/grafiki-i-ilustracje-12156277_2218152486.jpg" border="0"></a></div>
  145. <div class="span4"><img id="myImg" src="https://img.pakamera.net/i1/1/486/grafiki-i-ilustracje-12156277_2218152486.jpg" border="0"></a></div>
  146.     </p>
  147.   </div>
  148.  </div>
  149.  
  150.  <div class="columna2">
  151.  
  152.  <div id="right2d">
  153.      <p>
  154. <br><h1><b><i>Tytuł: nr02</h1></b></i>Data: 2019-11-16<br><br>
  155. <div style="text-align: justify; margin-left: 0.5em; ">
  156. text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text 
  157. </div>
  158.      </p>
  159.   </div> 
  160.  
  161.  </div>
  162. </div>
  163.  
  164.  
[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-2024 Invision Power Services, Inc.