Forum PHP.pl > Div display:table

Pomoc - Szukaj - Użytkownicy - Kalendarz

Forum PHP.pl > Forum > Po stronie przeglądarki > CSS

Kondi_cool

17.12.2010, 13:44:19

Witam,

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

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

Wynik w firefox 3 i 4, IE 8, Chrome

Wynik w Opera 10

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ś ?

(z góry dzięki za pomoc)

Crozin

17.12.2010, 13:47:10

A teraz: dlaczego nie użyjesz zwykłej tabelki?

askone

17.12.2010, 13:52:38

To się nazywa przesada - pewnie gdzieś kolega wyczytał, że "tabelka jest be" i teraz buduje wszystko na div

Kondi_cool

17.12.2010, 14:08:43

Proszę bardzo oto tabelka

Firefox

Opera

Crozin

17.12.2010, 14:15:30

No to może ją teraz sformatuj? Swoją drogą Informacje podstawowe to część tabelki - CAPTION.

Kondi_cool

17.12.2010, 15:11:56

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

I ten właśnie block ma ten odstęp, którego nie mogę sie pozbyć

Crozin

17.12.2010, 15:18:10

[HTML] pobierz, plaintext 
<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.

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.