Tabela za pomocą arkusza CSS i warstw Div - kłopoty.

24.02.2007

13:29

[1]

Grzesiek [ - ! F a f i k ! - ]

Tabela za pomocą arkusza CSS i warstw Div - kłopoty.

Chciałbym zrobić tabelę z:
- 4 wierwszami
- 3 kolumnami
- pierwszy wiersz stałej wysokości
- drugi wiersz zmiennej wysokości
- trzeci i czwarty wiersz stałej wysokości

Mam problemy z poprawnym zastosowaniem atrybutów position.

Kod html mam taki:
<div class="row_w">

<div class="cell1w">
Kom nr 1</div>

<div class="cell2w">
Kom2</div>

<div class="cell3w">
Komórka nr 3</div>

<div class="cell4w">
Komórka nr 4</div>

<div class="cell5w">
Knr5
</div>
</div>

Natomiast w CSS mam:
.row_w
‹
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
width:100%;
padding: 0px;
vertical-align: top;
border:0;
height:auto;
height:15;
›

.cell1w
‹
position:absolute;
left:5;
display:inline;
width:80;
›
.cell2w
‹
position:absolute;
left:90;
width: 40;
display:inline;
›
.cell3w
‹
position:absolute;
width:550;
display:inline;
left:135
›
.cell4w
‹
position:absolute;
text-align:right;
width:300;
display:inline;
left:690;
›

.cell5w
‹
position:absolute;
width:25;
display:inline;
left:995;
›

Niestety w przypadku powielania później fragmentu kodu HTML (czyli kilka warstw z klasą row_w) warstwy nakładają się na siebie.

Mógłby ktoś mi pomóc zrobić taką prostą tabelkę. Szukałem po necie, ale nie mogę sobie dalej poradzić ... :(

24.02.2007

13:50

[2]

Grzesiek [ - ! F a f i k ! - ]

24.02.2007

14:56

[6]

Qbaa [ Senator ]

kilka myśli.

Chciałbym zrobić tabelę z:
- 4 wierwszami
- 3 kolumnami
jak na razie zrobiłeś 5 kolumn :P

- pierwszy wiersz stałej wysokości
- drugi wiersz zmiennej wysokości
- trzeci i czwarty wiersz stałej wysokości
ten sam styl dla wierszy 1,3,4 i osobny dla 2

.row_w
height:auto;
height:15;
2 razy określasz wysokość. patrz mój punkt wyżej - wrzuć oba height, ale do osobnych stylów.

w .cellXw, position:absolute "przytwierdza" na stałe elementy, w określonej pozycji. to on jest winien nakładaniu się wierszy.
lepiej zmień tą wartość na relative, albo w ogóle wywal position.

w tym przypadku do tworzenia komórek, lepiej zastosować span, zamiast div. potem niepotrzebne jest display:inline.

dlaczego chcesz to zrobić na warstwach? do tworzenia tabel, lepiej użyć... tabel :)
warstwy zostaw dla opisania layoutu.

24.02.2007

16:59

[7]

Grzesiek [ - ! F a f i k ! - ]

Qbaa ---> używając divów zamiast standardowej tabeli, rozmiar strony potrafi się znacznie zmniejszyć - przy małej ilości danych z 22KB nawet do 8KB (przy np. 5 rekordach). Wolę nie myśleć jaką oszczędność uzyskam przy wyświetleniu 300 rekordów z bazy ...