[HTML] Layout, czyli problem z tabelą raz jeszcze

Cześć, ja już nie wiem, co mam robić.
Wrzuciłem stronę do w3c validatora(css i html) i nie pokazało żadnych błędów(jedynie błędy przy linkach - chodzi o ampersand).

Strona jest pod adresem: http://www.kkw.prohost.pl/neurotic.art.pl/index.php

Dla ułatwienia zostawiłem border tabel.

Jak widać strona jest za szeroka, a powinna mieścić się w szerokości strony. Nie wiem, czemu się nie mieści. Podaję szerokości kolumn, które są zaszyte w stylach(jakby co to styl pod tym samym adresem, nazywa się: styl.css):

TABLE.main {width: 100%; height: 430px}
TD.flag {width: 4%}
TD.menu_r {width: 20%}
TD.line {width: 3%}
TD.main_content {background-image: url("tlo4.jpg"); background-repeat: no-repeat}
TD.menu_l {width: 20%}

Chcę, żeby strona mieściła się w szerokości okna przeglądarki. Ale tak nie jest i nie wiem już, co mam robić, bo siedzę nad tym już któryś dzień i nic :/
Pomóżcie, bo za moment chyba się powieszę :/

o matko, HTML rodem ze średniowiecza.
najpierw co konkretnie zrobiłeś źle:
fragment

</tr><tr><td colspan="2" class="menu_r" valign="top">

zmień na

  </tr>
</table>
<table border="0" width="100%">
<tr>
  <td colspan="2" class="menu_r" valign="top">

czemu? szerokość komórek w tabeli ustala pierwszy tr; w pierwszym (i kolejnym również) tr masz colspany, przez co niektóre przeglądarki mają problem z ustaleniem szerokości. Seamonkey sobie nie radzi, ale IE7 i FF3 nie ma problemów. po poprawce nowa tabelka ma prawidłowo zdefiniowane szerokości komórek i nie jest rozpychana do nieprawidłowych rozmiarów.

a teraz co według mnie zrobiłeś nie tak?
pisz w XHTML, nie HTML. nie używaj tagów do formatowania wyglądu strony (np. po co ten center?), jeśli to tylko możliwe to nie używaj atrybutów (valign, colspan, align itp) - od tego jest css. a już szczególnie nie używaj do tego tabelek. jak widzę zagnieżdżone w sobie tabelki, to mnie lekki szlag trafia. naucz się stosować div ze stylem float (albo position: absolute i left). ampersandy popraw na &, walidator nie będzie się pluł.
ogólnie źródło wygląda tak, jakbyś powklejał w kilka linijek kodu do html wygenerowanego przez jakiś edytor wysiwyg. jeśli chociaż trochę się szanujesz, to napisz cały layout od nowa w notatniku (albo jakimś innym edytorze nie-wysiwyg).
a masz mało błędów, bo używasz bardzo pobłażliwej walidacji html transitional. spróbuj xhtml strict... dobra, żart; xhtml transitional. będziesz miał co najmniej ze setkę błędów.

z tabelkami jest tak, że po jakimś czasie nie widać gdzie który kawałek której tabeli jest zdefiniowany, albo do czego się odnosi. tabelki źle się formatuje w kodzie źródłowym. jak zagnieździsz ze dwie albo trzy tabele w sobie, to nie widać kompletnie który tr/td jest od której tabelki. z praktyki wiem też, że poziom zagnieżdżenia tabelek w sobie wzrasta "sam z siebie", po kilku miesiącach pracy nad kodem powodując dużo lepsze problemy niż Twój.

ŁF napisał(a)

o matko, HTML rodem ze średniowiecza.

Taaa, dawno temu się tego uczyłem ;)

czemu? szerokość komórek w tabeli ustala pierwszy tr; w pierwszym (i kolejnym również) tr masz colspany, przez co niektóre przeglądarki mają problem z ustaleniem szerokości. Seamonkey sobie nie radzi, ale IE7 i FF3 nie ma problemów. po poprawce nowa tabelka ma prawidłowo zdefiniowane szerokości komórek i nie jest rozpychana do nieprawidłowych rozmiarów.

Czyli generalnie chodzi o to, że jedna tabela na górze, druga na dole, tak?
(oczywiście później zmienię na divy ;>)

a teraz co według mnie zrobiłeś nie tak?
pisz w XHTML, nie HTML. nie używaj tagów do formatowania wyglądu strony (np. po co ten center?),

No do centrowania :P Generalnie chodzi o to, że nie chcę do każdego elementu dodawać nowego stylu. Ta, ja wiem, że można dziedziczyć, ale.. ;)

naucz się stosować div ze stylem float (albo position: absolute i left).

Nigdy nie robiłem layoutu na divach. Jak zaczynałem to wszyscy robili na tabelkach i tak mi zostało ;) Ale tak, chyba to zmienię, bo sam już się pogubiłem w tej tabelce(BA! Nawet validator się zgubił :D)

ogólnie źródło wygląda tak, jakbyś powklejał w kilka linijek kodu do html wygenerowanego przez jakiś edytor wysiwyg.

To jest strona php. Sprawdzam naprawdę sporo warunków i ładniej htmla nie będzie wypluwało niestety, bo kładę nacisk na czytelność php.
Edytora WYSYWIG nie używałem.

Juhas napisał(a)

Czyli generalnie chodzi o to, że jedna tabela na górze, druga na dole, tak?

generalnie chodzi o to, że to pierwszy wiersz wyznacza szerokości komórek, więc wszelkie colspany w nim mogą doprowadzić do nieprzewidzianych efektów -> albo dwie tabelki, albo pierwszy tr bez colspanów o wysokości 0. a jeszcze ogólniej - nie używaj tabelek do layoutu strony.