Witam.

CHCIAŁEM być dobry. Nie chciałem przechodzić na ciemną stronę... Naczytałem się, że layouty oparte o tabelki są BE! Że wolno tylko na divach. Wziąłem się poważnie do roboty, net, tutoriale, przykłady, dziesiątki godzin prób i WIELKIE G....

NIE POTRAFIĘ (albo to po prostu niemożliwe) zbudować na div'ach najprostszego layotu. Trzy panele, ułożone jeden pod drugim.
Pierwszy Nagłówek o stałej wysokości na początku treści strony.
Druga Treść o zmiennej wyskości, automatycznie dopasowująca się do rozmiarów zawartości, ale jeśli tej treści jest mało, to panel ma ładnie rozciągać się w pionie na CAŁĄ wysokość strony (oczywiści minus wysokość pozostałych paneli).
Trzecia Stopka, o stałej wysokości, wyietlana u dołu ekranu (jeśli Treści mało) albo pod Treścią (jeśli jej dużo).

W tabelkach wygląda to tak:


I działa bez problemu w każdej przeglądarce. Bez hacków, skryptów, php czy innych wspomagaczy....

Odpowiedzcie mi proszę - czy ja jestem debilem - czy też takiego layoutu na divach nie da się zrobić...?

Pozdrawiam, Leszek.

[HTML] pobierz, plaintext 
<div style="width: 800px; margin: auto;">
  <div style="height: 100px; background: #f00;">header</div>
  <div style="background: #0f0;">Lorem ipsum dolor sit amet<br />Lorem ipsum dolor sit amet<br />Lorem ipsum dolor sit amet<br />Lorem ipsum dolor sit amet<br />Lorem ipsum dolor sit amet</div>
  <div style="height: 50px; background: #00f;">footer</div>
</div>
[HTML] pobierz, plaintext 

Takie coś

A im clear:both nie trzeba dac ?

Mike, przyjacielu - albo nie czytałeś mojego posta, albo "zgadujesz" rozwiązanie problemu.

Layout jest ok. ALE NIE ZAJMUJE 100% wysokości w oknie przeglądarki...

Pozdrawiam, czekam na dalsze propozycje...

Przegapiłem ten niuans.
To co piszesz jest bardzo trudna do osiągnięcia pisząc na blokach.
To jeden z niewielu problemów z blokami. Nie można określić swobodnie ich wysokości jeśli rodzic nie me jej również określonej i nie rozciagają się automatycznie tak jakbyśmy czasem chcieli.

Konsensusem jest to:

[HTML] pobierz, plaintext 
<div style="position: relative; height: 100%; width: 800px; margin: auto;">
  <div style="height: 100px; background: #f00;">header</div>
  <div style="background: #0f0;">Lorem ipsum dolor sit amet<br />Lorem ipsum dolor sit amet<br />Lorem ipsum dolor sit amet<br />Lorem ipsum dolor sit amet<br />Lorem ipsum dolor sit amet</div>
  <div style="position: absolute; bottom: 0px; height: 50px; width: 100%; background: #00f;">footer</div>
</div>
[HTML] pobierz, plaintext 

Mike, widzisz, ja te wszystkie konsensusy przetrenowałem w ostatnim tygodniu w wielu wariantach. W tej wersji footer przysłania treść przy zniejszaniu okna...

Trochę to wygląda na zawracanie kijem Wisły: zamiast użyć standardu do budowy takiego layautu jaki jest potrzebny, można zrobić tylko taki layout na jaki standard pozwala...

Dziwne tylko, że identyczny układ na tabelkach wszystkie przeglądarki interpretują zgodnie z oczekiwaniami... I nie mają problemu z automatycznym wyliczeniem rozmiaru środkowego wiersza...

Jestem tydzień w plecy z robotą - -wracam do tabelki - nawet jeśli jest to niewskazane - najważniejsze jest zadowolenie klienta...

Pozdrawiam.

Daltego layouty na div`ach są tak bardzo cenione przez webmasterów - są trudne do osiągnięcia. Ale oczywiście to co piszesz jest do zrobienia

A nie wystarczy dodać dolny margines do środkowej części?

A nie lepiej po prostu z Google porozmawiać?

"100% height layout"

Jeden z pierwszych wyników: http://www.xs4all.nl/~peterned/examples/csslayout1.html

Serdeczne dzięki Zajec.

Wygląda na to że działa - skopiuję sobie i pomęczę różne warianty wypełnienia...
Szczerze mówiąc, to nie mam pojęcia jak działa - to znaczy jaki mechanizm zmusza środkowy panel do zwiększania wysokości...

Widocznie zielony jeszcze jestem jak pietruszka.

Ale pytanie zostaje aktualne - po co w moim przypadku divy? Layout prosty jak drut, w tabelce zajmuje 3 linijki kodu (nawet arkusza CSS nie trzeba zakładać - niezbędne style są prościutkie... A ten przykład na divach - tak na oko 2 strony kodu (no można uprościć do 1...)

Więc po co? Dla idei? W czym to lepsze? Nikt mnie nie przekona, że słuszne jest korzystanie z trudniejszych i bardziej skomplikowanych narzędzi aby osiągnąć prosty cel.

A do tego bajzel z przeglądarkami... Niby mamy standardy, ale każda z wodącej trójcy wyświetla je sobie trochę inaczej. Praktycznie nawet najprostsze stronki muszą stosować hacki, tricki lub skrypty, żeby zapewnić w miarę spójny layout w zaledwie 3 najpopularnieszych przeglądarkach... A z każdej strony słychać, że musimy trzymać się standardów - pytam JAK?

Pozdrawiam wszystkich, Leszek.

tak tak jestm tam tajemniczy skrypt ktory odwala cala robote! to google! wielki brat google. oni juz robia tyle rzeczy ze nawet zabrali sie za poprawne wyswietlanie stron uzytkownikow:D

zeby zakonczyc twoje niejasnosci to tutaj jest css odpowiedzialny za ten 'bajer'

Sorka za zamieszanie - dla tych co zdążyli przeczytać....
Skrypt działa (przeglądarki pobierały jakieś śmieci z cashe - stąd początkowe niepowodzenie) - cóż - następne pytanie zadam w przedszkolu PHP żeby się nie wydurniać na poważnym forum.

Pozdrawiam.

Znam już rozwiązanie -dziekuję wszystkim - temat do zamknięcia.

Jeszcze jedno warto dodać: Jak dodasz do szablonu na tabeli jakikolwiek DOCTYPE to szablon przestanie się rozciągać.

Edit:
http://www.wykladowca.cba.pl/czyzby.html <- DTD XHTML 1.0 strict. twój kod +

[HTML] pobierz, plaintext 
<?xml version="1.0" encoding="iso-8859-2"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
[HTML] pobierz, plaintext 

Nie rozciąga się. Poprawne według walidatora w3c

Może po prostu trza sprawdzić czy się potrafi dołączyć DOCTYPE do dokumentu zanim się zakwestjonuje?

Edit 2:

Powody dla których zaleca się DIVY i CSS są proste:
- elastyczność
- elastyczność
- elastyczność

A od czasu IE7 we wszystkich przeglądarkach są malutkie różnice w wyświetlaniu, i osoba, która ma doświadczenie w CSS, napisze arkusz tak, że strona będzie wyglądała tak samo we IE, Operze i FF. (no chyba że mowa o pseudoklasach :before i :after). Więc jak ktoś ma luksus olania użytkowników IE6, to CSS jest najwygodniejsze.

Kłamiesz Wykładowco. Na przyszłość proszę, sprawdź, a potem wystawiaj język...
Tabelka ładnie się rozciąga zarówno w DTD XHTML 1.0 Strict jak i XHTML 1.1...

Pozdrawiam.

Bo nie wszyscy mają to wielkie szczęście bycia osobami dobrze widzącymi. Dlatego W3C wymyśliło sposób tworzenia stron, który pozwala na ich sensowne odzwierciedlanie przez syntezatory mowy.

Drogi Wykładowco.
Może faktycznie słowo kłamiesz było za mocne - przepraszam, bo widzę że się przejąłeś.

Ale dalej nie masz racji. Skoro już jesteś takim perfekcjonistą, to wstaw do swojego testu również style="height:100%" do znaczników <html> i <body> - i będzie się rozciągać aż miło... Nie używaj mojego skrótu w prezentacji problemu do wykazywania swojej wyższości... Wkońcu nie sztuka wkleić 3 stony kodu - tylko komu będzie się to chciało analizować...

Co do elastyczności layoutu na div + CSS - zgadzam się, ale niestety tylko TEORETYCZNIE. Dlatego, że specyfikacja CSS2 sobie, a życie (czyt. rendering przeglądarek) sobie - skutek jest taki, że czasami aby uzyskać proste zachowania ZGODNIE ze standardem, i kod przechodzący WALIDACJĘ trzeba się mocno nakombinować. Wg mnie zupełnie niepotrzebie.

Jak mi znajdziesz choć jednego klienta, który da mi zlecenie na warunkach: olej IE6/7, olej Operę i inne dziwadła, niech się tylko w starym, dobrym FFoxie ładnie wyświetla to przestanę marudzić...

Prawda jest taka, że w chwili obecnej standard CSS2 jest FIKCJĄ, ŻADNA przeglądarka nie implementuje go w 100% idealnie wg specyfikacji. Kierunek zmian jest dobry, ale najwyraźniej potrzeba jeszcze roku , może dwóch, nowej generacji przeglądarek i wtedy będziemy w raju...

Zakładając ten temat, chciałem tylko zwrócić uwagę, że w pewnych, specyficznych sytuacjach robienie layoutu "na siłę" na divach ma tyle samo sensu, co wbijanie gwoździa w deskę za pomocą wiertarki. Wiertarka jest niewątpliwie zaawansowanym narzędziem, niezbędnym do połączenia desek wkrętami, ale dla gwoździa lepszy jest dużo prostszy w użyciu i zastosowaniu młotek...

Niech każdy uważa co chce, ale nadal nie trafia do mnie że 2 strony kodu są lepsze od 10 linijek kodu - jeżeli generują ten sam wynik...

Pozdrawiam, Leszek.

Ej! Weź pod uwagę, że Opera, czy inne mniej znane przeglądarki takie jak Safari, Konqueror (jak to sie pisze?) są równie ważne co ten twój firefox. Nie chcę tu wykazywać, że moim zdaniem Opera jest lepsza od ff, ale to jest tak samo jak IE vs nowoczesne przeglądarki, tj. to, że FF jest popularniejszy od innych nie oznacza że jest lepszy.... bo nie jest.

Po za tym layout na divach jest sensowny - od strony kodu jest dużo czytelniej (i rzadko kiedy dłużej), a przynajmniej pomagasz oczyścić net z niesemantycznych stron + to co mówił cicik - syntezatory mowy. Wyobrażasz sobie czytanie tabelek? Oooo nie, tylko nie to

@radex_p - Czyli FF czy Opera nie są lepsze od IE ? Hehe

Hm to czemu taki kod nie działczy?

[HTML] pobierz, plaintext 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 
<style type="text/css">
 
body {
margin:0px;
height: 100%;
}
 
#blok{
width: 640px;
background: red;
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
}
</style>
<html>
<body>
<div id="blok"></div>
</body>
</html>
[HTML] pobierz, plaintext 

bo nie masz nic w divie

Dla mnie łączenie XHTML-a i CSS jest oczywiste tak samo jak niemożność użycia tabelek. Problem polega na tym, że tutaj cofa nas tylko 1 przeglądarka - IE 6. Z drugiej strony, żałuję, że nie mogliście się urodzić wtedy gdy Netscape 4 był królem, czytać: największy udział. Wtedy powstawał kod na IE 3, N 3, IE 4, N 4. Nie mówiąc już o JScripcie i JavaScripcie. Wtedy byście rozkładali ręce. Teraz moglibyście mówić, że XHTML + CSS + DOM to cud nad Wisłą, a nie bzdurna ideologia oraz "przecież wygląda tak samo". Nikt nikogo nie zmusza do zielonego światełka na W3C, ale przynosi to wymierne korzyści.

Więc nie płakać tutaj nad bezsensem laya na divach. @Radex: stosowanie divów wcale nie czyni stronę bardziej semantyczną ! Ja wyobrażam sobie czytanie tabelek, o ile są zbudowane tak jak zaleca WAI, oraz oczywiście, że nie zostały użyte do budowy layout-u strony.

Zresztą nie tylko chodzi tutaj o syntezatory mowy, przecież jest pełno innych mediów.

Ależ ja ciebie popieram w 100% Kreton. I pamiętam czasy... przeglądarek tekstowych To już kolejny mój post - a ciągle mam wrażenie, że większość osób wypowiadających się w tym temacie nie rozumie mojego przesłania. Ja nie twierdzę, że lauyout na tabelkach jest lepszy. Ja nie twierdzę, że layout na divach jest zły. Przeciwnie. XHTML + CSS to jak najbardziej słuszny kierunek rozwoju.

Problem, który staram się rozważyć - dotyczy prostego faktu, że w chwili obecnej standard NIE DZIAŁA. W ani jednej przeglądarce nie jest zaimplementowany w 100% bezbłędnie. Standard sobie a życie sobie - praktyczna realizacja interfejsów aplikacji webowych jeży się od wyrażeń expression() w CSS, pełna jest wstawek skryptowych w JS, hacków w komentarzach.

Jak na razie ani jeden argument nie przekonał mnie, że zastosowanie layoutu na tabelce którą można zdefiniować w 5 linijkach kodu (W TYM KONKRETNYM PRZYPADKU) jest złe, bo zastępujący to kod na ostylowanych divach zajmuje TYLKO 100 linii.

Pozdrawiam. Nie chcę już jątrzyć. Proponuję zamknąć temat.

A co to ma do rzeczy? Właśnie chodzi o to, że czasem może nie byc niczego.
Jesli to jest prawdziwy powod to wracam do tabelek

nikt ci nie broni. wracaj sobie gdzie chcesz.
jeszcze czegos takiego w internecie nie ma zeby ci kazali jak maja byc zrobione strony.

moze zmadrzejesz jak bedziesz mial modyfikowac cos w tej tabelce:)) konkretnie chodzi mi o strukture strony.

skoro jesteś tak przekonany, to może podaj rozwiązanie mojejgo problemu na Div'ach?
Dodam, że wpisanie treści w Div'a nie rozwiązuje problemu, jak sugerowałeś

Witam,
Miałem podobny problem w ostatnim tygodniu, rozwiązanie dobrze opisane jest na stronie:
http://www.communitymx.com/content/article...2&cid=BAD95

Moja strona działa w taki sposób jaki chce uzyskać nevt
Problem jaki tam został opisany dotyczy sposobu na IE, zachęcam do przeczytania artykułu.

Witam

Nie jestem żadnym guru w HTML i CSS ale jedno wiem. Tworzenie stron na tabelkach nie jest dobre. Szybkie owszem ale na pewno nie dobre. Osobiście nie umiem i może dobrze.
Gdy widze strone gdzie tabelki to chleb powszedni to aż mnie rzuca. Wszędzie tylko atrybuty width, align, colspan i tym podobne. Każda zmiana często pociąga za sobą inne nie mówiąc o gruntownej przebudowie. Bardzo często musze wprowadzać na takich stronach wiele zmian i często poprostu musze zacząć robić stronę od nowa bo nie da się przebudować tego co ktoś na tabelkach śmignął.
DIV są proste a jesli ktoś uważa inaczej to dlatego, że istniej ie i wszelkie jej wersje. I to tutaj jest problem. Sam CSS to naprawde duża rzecz tyko przez ie nie można wykorzystać jego pełych możliwości.

Na tabelkach to nawet Photoshop potrafi poskładać stonę

ps.Dobrze jest sobie sprawdzić ile błedów walidacji znajdzie sie na stronach poszczególnych przeglądarek Sprawdzał ktoś