Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> Div display:table
Kondi_cool
post
Post #1





Grupa: Zarejestrowani
Postów: 3
Pomógł: 0
Dołączył: 17.12.2010

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

Witam,

Walcze z tym problemem ze 3 godziny i już się poddałem


[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2.  
  3. .HeaderSection {display:block;text-transform:uppercase;font-size:14px;color:#666666;border-bottom:solid thin #c9c8cb;padding-bottom:3px;}
  4. .HeaderContent{display:inline-table;border-spacing:0px;border:solid 1px #00ff00;}
  5. .HeaderContentRow{display:table-row}
  6. .HeaderContentRowCell{display:table-cell;padding: 0px 0px 0px 0px;border:solid 1px #00ff00;}
  7. .HeaderContentRowCellLable{display:table-cell;width:130px ;border:solid 1px #00ff00;}
  8.  
  9.  
  10. <div class="HeaderSection">Informacje podstawowe</div>
  11. 

  12. <div class="HeaderContent">

  13.   <div class="HeaderContentRow">

  14.     <div class="HeaderContentRowCellLable">Data</div>
  15.     <div class="HeaderContentRowCell">
  </div>
  16.   </div>
  17.  
  18.   <div class="HeaderContentRow">

  19.     <div class="HeaderContentRowCellLable">Godzina rozpoczecia</div>
  20.     <div class="HeaderContentRowCell">
 </div>
  21.   </div>
  22.  
  23.   <div class="HeaderContentRow">

  24.     <div class="HeaderContentRowCellLable">Godzina zakończenia</div>
  25.     <div class="HeaderContentRowCell">
 
 </div>
  26.   </div>
  27.  
  28.   <div class="HeaderContentRow">

  29.     <div class="HeaderContentRowCellLable">Lokalizacja</div>
  30.     <div class="HeaderContentRowCell">
 
 </div>
  31.   </div>
  32.  
  33.   <div class="HeaderContentRow">

  34.     <div class="HeaderContentRowCellLable">Cena</div>
  35.     <div class="HeaderContentRowCell">
 </div>
  36.   </div>
  37.  
  38.   <div class="HeaderContentRow">

  39.     <div class="HeaderContentRowCellLable">Trenerzy</div>
  40.     <div class="HeaderContentRowCell">
 </div>
  41.   </div>
  42. </div>
[HTML] pobierz, plaintext


Wynik w firefox 3 i 4, IE 8, Chrome
(IMG:http://kondilabs.quintway.pl/ff.jpg)

Wynik w Opera 10
(IMG:http://kondilabs.quintway.pl/opera.jpg)

Pytanie: Jak się pozbyć tych diabelskich odstępów miedzy wierszami ?! (ogolnie mam problem, bo gdzie bym nie użyl display:block to zawartosc ma z automatu padding)

Poradzicie coś ? (IMG:style_emoticons/default/worriedsmiley.gif) (z góry dzięki za pomoc)
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 6)
Crozin
post
Post #2





Grupa: Zarejestrowani
Postów: 6 476
Pomógł: 1306
Dołączył: 6.08.2006
Skąd: Kraków

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

A teraz: dlaczego nie użyjesz zwykłej tabelki?
Go to the top of the page
+Quote Post
askone
post
Post #3





Grupa: Zarejestrowani
Postów: 654
Pomógł: 121
Dołączył: 27.10.2007
Skąd: Poznań, Łódź

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

To się nazywa przesada - pewnie gdzieś kolega wyczytał, że "tabelka jest be" i teraz buduje wszystko na div (IMG:style_emoticons/default/smile.gif)
Go to the top of the page
+Quote Post
Kondi_cool
post
Post #4





Grupa: Zarejestrowani
Postów: 3
Pomógł: 0
Dołączył: 17.12.2010

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

Proszę bardzo oto tabelka

Firefox
(IMG:http://kondilabs.quintway.pl/ff2.jpg)

Opera
(IMG:http://kondilabs.quintway.pl/opera2.jpg)
Go to the top of the page
+Quote Post
Crozin
post
Post #5





Grupa: Zarejestrowani
Postów: 6 476
Pomógł: 1306
Dołączył: 6.08.2006
Skąd: Kraków

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

No to może ją teraz sformatuj? Swoją drogą Informacje podstawowe to część tabelki - CAPTION.
Go to the top of the page
+Quote Post
Kondi_cool
post
Post #6





Grupa: Zarejestrowani
Postów: 3
Pomógł: 0
Dołączył: 17.12.2010

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

[HTML] pobierz, plaintext 
  1.  
  2. .HeaderSection {display:block;text-transform:uppercase;font-size:14px;color:#666666;border-bottom:solid thin #c9c8cb;padding-bottom:3px;}
  3.  
  4. <div class="HeaderSection">Informacje podstawowe</div>
	
  5.  
  6. 	<table cellpadding="0" cellspacing="0" border="1">

  7. 	<tr>
			
  8.                 <td>Data</td>

  9. 		<td>&nbsp;&nbsp;&nbsp;&nbsp;</td>

  10.          </tr>
	
  11. 	 <tr>
			
  12.                 <td>Godzina</td>
	
  13. 		<td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
	
  14. 	</tr>
	
  15. 	</table>
	
  16.  
[HTML] pobierz, plaintext


I ten właśnie block ma ten odstęp, którego nie mogę sie pozbyć
Go to the top of the page
+Quote Post
Crozin
post
Post #7





Grupa: Zarejestrowani
Postów: 6 476
Pomógł: 1306
Dołączył: 6.08.2006
Skąd: Kraków

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

[HTML] pobierz, plaintext 
  1. <div class="HeaderSection">Informacje podstawowe</div>

[HTML] pobierz, plaintext
Divitis trzeba leczyć... od nagłówków masz elementy H1-H6. Ale jak już powiedziałem, tutaj powinieneś użyć CAPTION.
W ogóle to odsyłam do http://www.whatwg.org/specs/web-apps/curre...ml#tabular-data Bo masz źle zbudowaną tabelę.

Jeżeli ten element ma jakiś odstęp to powodują go jakieś inne style.
Go to the top of the page
+Quote Post
« Następny starszy · CSS · Następny nowszy »
 

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

 

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

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

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