Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [CSS] Tabela i wiersze - podział
david8213
post 8.01.2020, 16:04:50
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
nospor
post 8.01.2020, 16:20:37
Post #2





Grupa: Moderatorzy
Postów: 36 455
Pomógł: 6292
Dołączył: 27.12.2004
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


--------------------

"Myśl, myśl, myśl..." - Kubuś Puchatek || "Manual, manual, manual..." - Kubuś Programista
"Szukaj, szukaj, szukaj..." - Kubuś Odkrywca || "Debuguj, debuguj, debuguj..." - Kubuś Developer
Go to the top of the page
+Quote Post
david8213
post 8.01.2020, 16:28:35
Post #3





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ę 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
« 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: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

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

RSS Wersja Lo-Fi Aktualny czas: 25.04.2024 - 05:58
Powered By IP.Board © 2024  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn