Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [CSS] Tabela i wiersze - podział
david8213
post
Post #1





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

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

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


Ten post edytował david8213 8.01.2020, 16:10:37
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi
david8213
post
Post #2





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

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

[XML] pobierz, plaintext 
  1. <div style="clear:both;"></div> 
[XML] pobierz, plaintext


tego właśnie mi brakowało. Dziękuję (IMG:style_emoticons/default/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


Ten post edytował david8213 8.01.2020, 16:53:29
Go to the top of the page
+Quote Post

Posty w temacie
- david8213   [CSS] Tabela i wiersze - podział   8.01.2020, 16:04:50
- - nospor   Bo left i right mieszaja troche. Trzeba wyczyscic ...   8.01.2020, 16:20:37
- - david8213   [XML] pobierz, plaintext <div style="clear...   8.01.2020, 16:28:35

« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Przełącz na: Linearny+ · Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 14.10.2025 - 16:52
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn