Równe kolumny layoutu CSS

Project: Terminated

Blog nie jest już dalej prowadzony ani aktualizowany. Mimo tego, wpisy i komentarze są dalej dostępne. Możesz przeczytać pożegnalny wpis albo przejść do archiwum.

Roger Johansson powiedział kiedyś tak:

Web professionals who refuse to update their skills and insist on using outdated methods can no longer be called web professionals.

(Profesjonaliści, którzy odmawiają uczenia się nowych rzeczy i upierają się przy używaniu przestarzałych metod nie mogą być już dłużej nazywani profesjonalistami - tłum. wł.)

Kiedyś budowaliśmy strony za pomocą tabel, teraz nadszedł czas na podzielenie dokumentu na sekcje i stworzenie z nich layoutu za pomocą CSS. Rozszerzając wypowiedź Johannsona - wszyscy, którzy projektują dalej na zagnieżdżonych tabelach w niedługim czasie albo przestawią się na CSS albo wypadną z obiegu.

Tabelowy layout jest niedopuszczalny, ale prosty w użyciu i bardzo przewidywalny. Webdesignerzy zaczynający pisać w CSS mają całkiem poważne problemy, ponieważ nowoczesne projektowanie opiera się na pozycjonowaniu treści zawartej w blokach. Ich rozmiary nie są sztywne (i w większości sztywne być nie powinny), dlatego nie można uzyskać równych kolumn. Nie można? Zaraz się przekonamy…

Hakami piekło jest wybrukowane

Od lat projektanci są zmuszeni walczyć z tym problemem i radzą sobie całkiem nieźle. Zaawansowani w temacie na pewno słyszeli o Faux Columns, powiększaniu kolumn paddingiem albo używaniu skryptów. Tylko, że właśnie - te rozwiązania walczą z problemem, stwarzając wiele pomniejszych problemów.

Powtarzalne tło wymaga określonej szerokości kolumn. Ulepszona wersja Faux Columns operuje na zmiennych szerokościach, ale wymaga nadmiarowego kodu i długich obrazków. Padding wydaje się elegancki, ale tak naprawdę jest hakiem CSS polegającym na wymiarach i hardkorowej modyfikacji odstępów. JavaScript ma wiele mankamentów - raz, że może go wcale nie być, dwa że jest problem z czasem uruchomienia skryptu.

Tabela tabeli nierówna

Wrócmy jednak do pierwszych akapitów. Tabele są złe, ponieważ elementy <table>, <tr>, <td>, etc służą do opisania danych tabelarycznych. Działamy na szkodę oddzielenia prezentacji od zawartości. Ludzie z nich korzystają, bo prezentacja tabel jest użyteczna. I właśnie. Potrzebujemy prezentacji tabel, a nie ich samych.

W CSS możemy określić wyświetlanie tabelaryczne, a robimy to przez ustawienie display na table / table-row / table-cell. Wartości otrzymały takie nazwy, ponieważ tabele powinny być domyślnie wyświetlane przy ich pomocy. Użycie display: table nie oznacza powrotu do ery tabelek, tylko zrozumienie potrzeby oddzielenia prezentacji od zawartości. A to jest ok.

Znowu ten #$%!@ IE… ;-)

Byłoby miodzio, gdybyśmy mieli wsparcie dla display: table we wszystkich przeglądarkach. Na nieszczęście jest taka jedna, która uparcie nie chce wyrosnąć z pieluch - Internet Explorer.

Jak już wielokrotnie wspominałem, Explorer pomimo swojej ułomności został wyposażony w wiele rozszerzeń. Za pomocą jednego z nich - expressions, naprawimy wyświetlanie w IE. Czemu zdecydowałem się więc na display: table, skoro i tak w 75% przeglądarek będzie działał JavaScript? Ponieważ expressions są przeznaczone do wykonywania w czasie rzeczywistym, za każdą zmianą na stronie i można je wrzucić wygodnie do CSS. A userzy IE nie wyłączają JS.

Standardy

Główny HTML się nie zmienia, jest taki sam jak w pierwszym niedziałającym przykładzie:

<div id="wrapper">
<div id="content"></div>
<div id="sidebar"></div>
</div>

Należy teraz przypisać CSS:

#wrapper {
overflow: hidden; /* clearance */
width: 770px;
background-color: #e4f1bb;
display: table;
}
#content, #sidebar {
display: table-cell;
vertical-align: top;
}
#content {
width: 520px;
}
#sidebar {
width: 250px;
background-color: #d7ee7d;
}

Za kolor kolumny z główną treścią odpowiada tło całego wrappera. Aby było go widać, należy zaaplikować mu clear - ja to robię przy pomocy overflow. Trzy linijki CSS i koniec zmartwień, wszystko działa jak należy, czy w Firefoksie czy w Operze. Sprawdźcie.

Expressions

W Internet Explorerze 6 i 7 display: table nie odnosi żadnego skutku, więc musimy skorzystać z floatów. A następnie dopasować minimalną wysokość sidebara na podstawie wysokości wrappera. Potrzebne są dwa rozwiązania, bo IE6 ma zabugowany height działający jak min-height - w odróżnieniu od IE7.

Kod dla IE6: 

#sidebar {
-iexp: expression(
this.parse ? 0 : (
this.style.height = this.offsetHeight + 'px',
this.parse = 1
),
helper = (this.style.height < this.parentNode.offsetHeight) ? 0 : (
this.style.height = this.previousSibling.offsetHeight
)
);
}

Ustawiam na początku wysokość (tak naprawdę min-height) kolumny na podstawie tego jak wysoka jest wyrenderowana w przeglądarce. Następnie sprawdzam czy wysokość sidebara jest mniejsza niż wysokość całego wrappera, jeśli tak nie jest to ustawiam height (znowu, min-height) na wysokość drugiej kolumny.

Kod dla IE7: 

#sidebar {
-iexp: expression(
this.parse ? 0 : (
this.style.minHeight = this.offsetHeight + 'px',
this.parse = 1
),
helper = (this.offsetHeight < this.previousSibling.offsetHeight) ? (
this.style.minHeight = this.parentNode.offsetHeight
) : (
this.style.minHeight = this.previousSibling.offsetHeight
)
);
}

Tutaj po ustawieniu min-height sprawdzam czy wysokość jest mniejsza od wysokości drugiej kolumny, jeśli tak to min-height ustawiam na wysokość wrappera, jeśli nie to na wysokość drugiej kolumny.

I to by było na tyle - działający przykład.

Mały apel - używajmy standardów tam gdzie można, a popsute przeglądarki albo zostawiajmy na pastwę losu albo znajdujmy dedykowane i nieinwazyjne rozwiązania. Kod expressions na pewno można jeszcze ulepszyć, aby uniezależnić się od ilości kolumn, ale na początek wystarczy.

PS: Oczywiście nie mówię teraz, aby każdą nawet najmniejszą implementację Faux Columns zamieniać na wyświetlanie tabelaryczne, nie w tym rzecz - ważne jest też dopasowanie metody do skali efektu końcowego.

Dla poprawnego wyświetlania w Safari należało dodać vertical-align: top, podziękowania dla Wojtka Zająca za komentarz.

Tagi wpisu: css, equal+columns, expression, faux+columns, ie, layout, tables

Informacje i hiperłącza

Piotr Petrus 'Riddle'

Blog o projektowaniu zgodnych ze standardami stron internetowych.

Praktyczne przykłady, sztuczki CSS, sposoby obchodzenia błędów przeglądarek, lekki i nieinwazyjny JavaScript, użyteczny design, dostępność i skrypty użytkownika.

RSS

Informacje o wpisie

Napisał riddle 07 marca 2007 o 07:03

Kategorie: CSS, Internet Explorer, Standardy sieciowe, Techblog

Wpisy archiwalne

Archiwum miesięczne

Dzięki!

Komentarze

wilku 1 07 marca 2007, 07:13

Bezcenne! Dziękuję.
devnul 2 07 marca 2007, 07:29

„[...] ważne jest też dopasowanie metody do skali efektu końcowego.” Prawda – bardzo prawda
mwgamera 3 07 marca 2007, 07:35

Tabelek CSS używam od dawna, ale nie wiedziałem jak zrobić żeby IE sobie z nimi radził.
Wojciech Zając 4 07 marca 2007, 08:09

Riddle: widok spod Safari: http://work.floatt.net/equalcolumns.jpg

P.S.: wyłącz justowanie komentarza w podglądzie.
Riddle 5 07 marca 2007, 08:11

Wilku: Dzięki :)

Wojtek: Hmm, a spróbuj dodać vertical-align: top i powiedz jak jest, plz. :)
Wojciech Zając 6 07 marca 2007, 08:25

Riddle: ok, v-a: top; załatwia sprawę. ;-) Niezły trick, choć ja nadal wolę zostać przy clearfix.
Sky Ace 7 07 marca 2007, 10:21

Czym się różni nadanie display: table dla diva od zastosowania zwykłej tabelki? IMHO niczym, tylko ładniej w kodzie wygląda i fanatycy się nie przyczepią, że tabelki masz, ale dalej jest to identyczne, tabelkowe myślenie przy tworzeniu. Tylko kodu trochę mniej, ale się wyrównuje expressionsami. :)

Z drugiej strony floaty działają wszędzie, tło 3000px x 1px zajmuje niewiele, a wyczyszczenie paddingów i marginów w cssie sporo pomaga – tak ostatnio robię i IE wymaga ode mnie od czasu do czasu zmiany jednego, max dwóch paddingów, bo je inaczej liczy.

Nie chcę najeżdżać specjalnie, bo artykuł jest dobry i jeśli ktoś chce tego używać, to na pewno mu się przyda, ale w moim mniemaniu cała ta idea kłóci się trochę z pierwszym akapitem. :)

PS. I jeszcze pytanie – a co z utrzymaniem odpowiedniej kolejności divów w kodzie przy takim podejściu?
Riddle 8 07 marca 2007, 10:26

IMHO – ważny skrót w Twojej wypowiedzi. Nie widzisz, że tu nie chodzi o efekt, a o podejście? W całym świecie standardów nie chodzi o efekt, osiągnięty przy pomocy byle czego, tylko o to jak się za to zabierasz, żeby każdy mógł korzystać z tych samych wytycznych i otrzymywać ten sam efekt.

Dodatkowo HTML opisuje zawartość, a nie wygląd. Fajnie Ci wyglądają tabele bez stylów? Super, ale to nie zmienia faktu, że wepchnąłeś do tabeli dane nietabelaryczne.

I to jest wykroczenie, nie jakiś fanatyzm. Przez lata ludzie nie mogli zakapować czemu nie <font>, czemu nie <u> i czemu nie <marquee> a Ty teraz mówisz, że podejście zgodne ze standardami to fanatyzm? I dokładasz, że display: table jest niczym innym jak tabelką? Czy wiesz co mówisz?

Widać, nie wiesz co mówisz, a ludzie nie zrozumieli jeszcze potrzeby standardów. Tym lepiej dla mnie, będę o tym pisał.
Sky Ace 9 07 marca 2007, 10:40

Oj, Riddle, nie przesadzaj proszę – ja od lat nie użyłem tabelki do stworzenia layoutu, więc nie wciskaj mi tu, że w dupie mam standardy, bo tak nie jest. Komentarz też nie był specjalnie po to, żeby flejma wywołać.

A o fanatykach napisałem, bo znajdą się zawsze tacy, którzy oceniają strony głównie po validatorze – o takich mi chodziło. Normalny człowiek, który nie korzysta z tabelek do layoutów, tylko pisze zgodnie ze standardami, nie jest fanatykiem.

Nadal pozostaje pytanie, co z odpowiednią kolejnością divów w kodzie? Musi być taka jak w tabelce, czyli góra->dół i wychodzi z tego lewo->prawo, tak? No to nadal wymaga to tego samego tabelkowego myślenia.

I dla kogoś, kto od lat robi na tabelkach, będzie to miało jedynie korzyść taką jak napisałem wcześniej – ci piszący zgodnie ze standardami się nie przyczepią.
Riddle 10 07 marca 2007, 10:51

To tylko słowa, nie siedzę Ci w głowie, a z tego co napisałeś wywnioskować można najgorsze. ;) No ale już rozumiemy się, ok, sorry i w ogóle. ;)

Ułożenie divów – aktualne stadium CSS wymaga ułożenia HTML w określony sposób, ponieważ wsparcie dla rozwiązań layoutowych CSS3 na razie nie jest możliwe, raz że nie skończyli specyfikacji dwa że to przyszłość jest, może nasza emerytura. :P

Mi chodzi o to, że słowo „table” w tych typach display włącza jakieś killfrenzi w ludziach, jakby im się jedno zło zastępowało drugim, tylko sprytniej ukrytym. Nawet jeśli zakładamy, że odtwarzamy tabelę – robimy to w warstwie prezentacji. A tam możemy dosłownie zrobić k**ę, pozycjonować w stosik kart albo zrobić listę numerowaną z kolumienek i niczemu to nie szkodzi.

CSS wymaga nowego myślenia. Nie wszystkie rozwiązania poprzedniej ery webmasterstwa ;) są złe z definicji. Jeśli sposób układu bloków, jakie tworzą tabelę, jest spójny i bardzo elastyczny (każda tabela narysowana na kartce wygląda u podstaw tak samo), to czemu nie dodać tego do CSS jako jeden ze sposobów pozycjonowania?

Używajmy standardów, po to one są. Trzeba starać się, a nie olewać, bo można.

A podejrzewam dodatkowo, że przez te moje kody expression i długaśne haki na IE ludzie się też zrażają. Owszem, powinni – do IE. Fakt, że ktoś pisze workaroundy dla IE powinno być bodźcem - aby używać standardów najczęściej jak się da.
kresh 11 07 marca 2007, 10:51

Art bardzo fajny tylko coraz częściej zastanawiam się po co te standardy, skoro i tak trzeba się gimnastykować pod IE. A korzystanie z prostszych rozwiązań wynika prawdopodobnie z braku czasu. W tej branży wszystko jest na wczoraj i niestety z własnych obserwacji wnioskuje że w większości przypadków nie liczy się jak coś jest zrobione, ale że osiągnięto zamierzony cel.

Oczywiście ja staram się mimo wszystko trzymać standardów, niemniej czasem również zdarza mi się popełnić jakieś małe wykroczenie. W końcu chcąc niechcąc jestem tylko człowiekiem :)
mcv 12 07 marca 2007, 10:54

Tabelkowego myślenia będzie wymagało, tylko kogo to obchodzi? Nie zmienia faktu, że w kodzie znajdzie się wreszcie to, co powinno być, a nie tabele, tam gdzie nie powinny być. Czytnik ekranu, w przeciwieństwie do tabeli, nie będzie miał kłopotu jak tu dane odczytać, przeglądarka w komórce nie będzie Ci próbowała jakoś dziwnie sformatować, żebyś widział, że to tabela (chyba, że każej jej używać arkusza stylów przeznaczonego dla normalnych przeglądarek, nie dla /mobile/).
Sky Ace 13 07 marca 2007, 11:21

@Riddle:

No właśnie te workaroundy dla IE niespecjalnie mi się podobają, bo co do reszty się zgadzam. Ale wydaje mi się, że chyba mniej trzeba kombinować dla IE przy Faux Columns – głównym plusem display:table będzie chyba większa, jak by to… mniejsza PITA przy płynnych layoutach, ale już w moim przypadku – kiedy większość layoutów ma ograniczenie szerokości do 990px, nie za wiele mi to pomoże.

Dodatkowy plus dla programisty, ale to jest chyba oczywiste, że łatwiej wypuszczać divy niż mega tabelki.

Ogólnie właśnie chodzi mi o to nowe myślenie, o którym piszesz, bo w taki sposób można sprawić, że tabelkowiec będzie pisał zgodnie ze standardami, ale nie będzie tak myślał. Tak więc taki trochę połowiczny to sukces.

@mcv:

Ale jak użyję Faux Columns, to też się znajdzie to co trzeba. A komórkowym tak czy inaczej trzeba dawać media=‘handheld’, bo NetFront prawie potrafi css.

@kresh:

Nawet ‘na wczoraj’ udaje mi się w pracy robić zgodnie ze standardami, bo po prostu trzeba się tego nauczyć i za każdym razem zajmuje to mniej czasu i mniej poprawek wymaganych jest w IE. :)
shw 14 07 marca 2007, 11:26

Problem ktory pojawia sie w przypadku standardy czy stare myslenie nie jest rozwiazywalny ot tak. Kazdy kto klepie strony profesjonalniej niz tylko dla siebie wie, ze klienta nie obchodzi ze IE ssie – on chce, aby to wygladalo – dlatego zleca to nam, a nie synowi sasiadka.
Tworzenie zgodnie ze standardami bazuje w gruncie rzeczy na niewiedzy naszego klienta. Piszemy strone czysto, zgodnie ze standardami i stosujemy hacki – teraz jak widac juz nie tylko dla IE, ale oddzielnie dla IE 6- i IE 7. jednak w duzej mierze hacki opieraja sie na expressions, ktore korzystaja z JS’a.
Nasz klient wchodzi na strone spod IE [osobiscie jak widze, ze ktos korzysta z netu pod IE to mnie rzuca :P] i strona, dzieki szeregu hackow wyglada ok. Tylko pytanie – co by sie stalo gdyby nasz klient wszedl z wylaczonym javascriptem?
I tu zaczyna sie problem – bo mozemy stworzyc page zgodny ze standardami i byc z siebie dumni, czuc wewnetrzna harmonie ze wszechswiatem, albo skorzystac, jak w tym wypadku z starego, sprawdzonego, nie wymagajacego hackow i JS’a rozwiazania.
Tworcy tworzacy zgodnie ze standardami sa idealistami, swiat [w glowniej mierze thx to IE] idealny nie jest..
Krzychu Danek 15 07 marca 2007, 12:19

Bardzo fajne rozwiązanie. Czy planujesz może przepisać ten przykład w trochę bardziej uniwersalny sposób, działający np. na klasach zamiast na identyfikatorach?

Możliwość dorzucenia kawałka gotowego kodu do arkuszy dla IE i zapomnienia o całym problemie jest bardzo kusząca…
Marcel Dziedzic 16 07 marca 2007, 12:41

..tak sobie pozwolę wtrącić... staram się śledzić blogosferę i to co ludzie mają do powiedzenia. Dyskusji, rozważań, kłótni, hipotez itd na temat css-based vs table-based przeczytałem (pewnie nie tylko ja) z milion… I tak się zastanawiam… po co dalej to ciągnąć??? Jak ktoś uważa, że stosowanie tabelek tylko dlatego żeby logo było koło nawigacji – jego sprawa (problem!). Ja pięknie riddle zauważyłeś: „z czasem tacy ludzie wyginą” – co do tego nie ma wątpliwości. Muszą wyginąć.. W dobie lekkiej i semantycznej sieci pisanie stron zgodnych ze standardami nie jest tuż tylko fanatycznym wymysłem czy próbą bycia trendy – jest po prostu koniecznością! Apliacje google’a (GMail, edytory tekstów, arkusze kalkulacyjne itp), systemy operacyjne (eyeos.com), coraz więcej narzędzi wielkich firm (photoshop on-line), nowe wynalazki (Ajax) itp itd… powinny uświadomić jaką rolę w dzisiejszych czasach zaczyna spełniać internet. Jakie jest podejście. Strony przestają już być zwykłymi statycznymi dokumencikami. Powoli (to wymaga czasu, ale jednak) upodobniają się do aplikacji desktopowych. Tego ani nie zatrzymamy, ani nie zmienimy (i dobrze).
Natomiast powinniśmy (przynajmniej designerzy, developerzy) jak najszybciej uzmysłowić sobie co jest niezbędne do tego aby np. obróbka zdjęć on-lina była możliwa. Naprawdę wydaję Wam (pisze do ludzi z pokolenia „tabelkowego”), że napisanie aplikacji on-line jest możliwe do osiągnięcia przy pomocy starych metod?? Serio?? A to przepraszam. W takim razie ja się mylę. Wracając do meritum – chyba już najwyższa pora zatrzymać burzliwe dyskusje na temat czy table czy CSS. Gdy ktoś zaczyna – sypnąć materiałami (jest od metra). Jeśli nie pomorze – zostawić biedaczka niech sobie szydełkuje za pomocą <font>, <b>, <u>, .... Wcześniej czy później zrozumie, że średniowiecze się skończyło – prawdopodobnie będzie za późno, bo rozwija się to wszystko baaaardzo szybko i na nadrobienie pewnych rzeczy może być problem (fakt, na początku zmiana podejścia do kodowania może być uciążliwa). Nie mniej jednak warto zmienić nastawienie. Wracając do IE. Można narzekać (często słusznie) że taki i taki.. Że tu sie rozjeżdza, że tu do dupy. Tak po części jest. Niestety. Tego sami nie zmienimy i musimy się posiłkować hakami.. Ale to też się zmieni.. Już się zmienia. Porównajcie bugi w ie6 a ie7. Jest lepiej. Nie jest świetnie, ale będzie – w to wierze. Cieżko jest zmusić giganta wartego 300mld dolarów do czegoś. I tak wydaje mi się, że żyjemy w komfortowych i cieplarnianych warunkach w porównaniu z tym co było np. 8 lat temu. Teraz piszemy komentarz warunkowy dla ie (czasem dla 2, 3 wersji) i wprowadzamy delikatne (najczęsciej) zmiany naprawiające bugi (double margin bug etc…). Czasem też jakieś expression czy skrypt .utc. A pomyślcie, że kiedyś były czasy gdzie robiono takie rzeczy dla prawie każdej przeglądarki oddzielnie. Fajnie musiało być :)... Tyle. Sorry za rozpisywanie.
Tobie Riddle wielkie dzięki, nie tyle za ten artykuł bo akurat przez problematykę nierównych kolumn już sie kiedyś przedzierałem – ale ogólnie za dość ciekawe i systematyczne pisanie, a także za częste poruszanie dość ważnych kwestii dzisiejszego projektowania, które niestety nadal w naszym kraju kuleje. Powodzenia.
s 17 07 marca 2007, 12:50

Btw, używanie tabel do layoutu, znaczy się pakowania w nie danych nietabelarycznych może wprowadzać w błąd programy wspomagające niewidomych w surfowaniu (niektóre próbują „interpretować” źródła), a co za tym idzie ich użytkowników. Tak mi się przynajmniej wydaje — na robieniu stronek się nie znam.
CoSTa 18 07 marca 2007, 12:59

piękne dzięki riddle, bardzo to przydatne!
kresh 19 07 marca 2007, 13:01

[Sky Ace]: „Nawet ‘na wczoraj’ udaje mi się w pracy robić zgodnie ze standardami, bo po prostu trzeba się tego nauczyć i za każdym razem zajmuje to mniej czasu i mniej poprawek wymaganych jest w IE. :)”

Zgadzam się, ale czasem zdarzają się chwile słabości – zwłaszcza, gdy IE zaserwuje mi jakiś bug, z którym dotąd się nie spotkałem.
nbw 20 07 marca 2007, 13:19

Piotrek, fajne rozwiązanie, ale czy nie wydaje ci się, że to odkrywanie koła na nowo?

Owszem, jest to istotne dla wielu Twoich czytelników i standardów w ogóle – pewnie sporo osób nie słyszało o display: table i nie potrafiłoby hackować IE by odpowiednio dopasowywał wysokość – niemniej, że tak się wyrażę: nihil novi.
Riddle 21 07 marca 2007, 13:21

Czyli co, mam zacząć pisać po angielsku i postować co miesiąc jeden ciekawy wpis, bo część ludzi zaznajamia się z wszystkim co zachodnie na bieżąco?

Przecież wiesz jak jest. Zmarnowałem Twój czas? ;-)

Costa: Dzięki :)
nbw 22 07 marca 2007, 13:54

Nie no, oczywiście – masz rację z tym, że nie wszyscy czytają to, co dzieje się na zachodzie. Ja także mam obecnie tak wielki delay za tym co się dzieje na świecie, że wstyd się przyznać. Jedynie do czego piję, to „epokowość dzieła” :)

PS. Czas mogę zmarnować sobie tylko sam :)
PS2. Jak rozumiem, dałeś sobie radę z tym, o co pytałeś? :)

Trzymaj się i pisz dalej.
eRiZ 23 07 marca 2007, 13:55

Tak naprawdę, to co by nie napisać, to zawsze będzie „nihil novi”.

Słyszałem kiedyś o rozwiązaniach typu display:table, ale wreszcie ktoś wszystko zebrał w jednym miejscu i skończy sie min-height dla sidebarów. :D
ferrante 24 07 marca 2007, 14:49

Zawsze to lepiej, niz kombinowac z graficznym tlem.

Aczkolwiek powiele tutaj moja opinie z innego bloga: sytuacja, ktora zaszla po odejsciu od tabelek, zmusila wielu designerow do rozwiazan, ktore nie wymagaja tabelkowych wlasciwosci. Co za tym idzie, wiele takich layoutow jest po prostu pieknych i mysle, ze po czesci wyszlo to na dobre wszystkim.
Sky Ace 25 07 marca 2007, 14:53

@ferrante:

Czy lepiej, to zależy od konkretnego layoutu. W większości pewnie prościej będzie wyciąć jeden pasek z tła niż kombinować, nie?
Dot 26 07 marca 2007, 15:00

1) Do wszystkich pijących do Riddle’a odnośnie tego, że to się nie różni od tabelek w kodzie:
a) Tabelki w HTML oznaczają „to jest tabelka”, podczas gdy display:table oznacza „masz to pokazać, żeby wyglądało jak tabelka”. Różnica może i subtelna, ale jest.
b) Tabelki w HTML są czytane przez roboty, screenreadery itp. jak tabelki. Warstwy pozycjonowane metodą „display:table” są czytane jak poszczególne warstwy, kolejne elementy strony.
2) Do wszystkich, co piszą, że to nic nowego:
Oczywiście, że nie! Ale czy ktoś powiedział, że Riddle odkrył Amerykę? Nie, po prostu przedstawił na swoim joggu kolejne rozwiązanie kolejnego problemu trapiącego wielu webmasterów.
3) Do Riddle’a:
Dzięki, na pewno się przyda, bo błędy wyświetlania w IE mnie blokowały w stosowaniu tego rozwiązania w przeszłości, a rozwiązania z obrazkami w tle… no cóż, pozostawię bez komentarza – tragedia niejednokrotnie.
ferrante 27 07 marca 2007, 15:08

Sky: polemizowalbym z tego wzgledu, ze przy budowie boxowej (np. gazeta.pl) ciezko jest postawic na jakiekolwiek tlo i uzyc go.

Przy prostych stronach oczywiscie tlo jest lepsze, ale w mojej karierze nie mialem jeszcze potrzeby wycinac go, a strony, ktore skladalem lub ktore skryptowalem wygladaly niezmiennie ladnie bez tabelkowego badz z tlem efektu :)

Pozdrawiam
Sky Ace 28 07 marca 2007, 15:30
O, jeszcze jeden problem z display: table znalazłem. Nie ma rowspan, co zdecydowanie kilka rzeczy utrudnia. Poza tym kolejność divów nadal pozostawia trochę do życzenia.

Ot, przykład:
```
+-----------+--------+---------+
|   blok 1  | blok 2 | sidebar |
|           |        |         |
+-----------+--------+         |
|                    |         |
| blok 3             |         |
+--------------------+---------+
```
Floatami mam kolejność blok 1, blok 2, blok 3, sidebar, display: table daje mi blok1, blok 2, pół sidebara, blok 3, pół sidebara (albo blok1, blok 2, sidebar, blok 3), co nie do końca jest dobre. To tak a propos czytania przez screenreadery i tekstowe też.

Prawdopodobnie przy innym projekcie byłoby okej, ale to tak dla udowodnienia, że display:table nie będzie lekarstwem na wszystko.
Riddle 29 07 marca 2007, 15:43

Hmm, ale przecież robisz najpierw content + sidebar, a do contentu ładujesz 2 kolumny + 3 blok. Tzn wiem co masz na myśli, ale się da, tylko trzeba trochę dodać divów… co w sumie nie jest niczym dziwnym, im bardziej skomplikowany lay tym więcej ich trzeba.
Sky Ace 30 07 marca 2007, 15:52

A, racja, za dużo chciałem, bo chciałem od razu wrzucić to w jednego diva bez dodawania kolejnych.

Tylko czy wtedy nie popadamy już w przerost tych divów? Do contentu przecież musisz dodać diva w środku, bo content ma już przecież nadane display:table-cell.
s 31 07 marca 2007, 16:38

「Sky Ace」właśnie, kiedy wiadomo że divów jest za dużo ? ;)
lauro 32 07 marca 2007, 17:26

Riddle, w tym linkowanym Twoim artykule o semantycznych tabelach jest mały błąd ortograficzny – piszemy „czyha”. :)
Riddle 33 07 marca 2007, 17:38

Tak, wiem, korekta nie wyłapała.
Anonymus 34 07 marca 2007, 19:47

W takim razie, jakie proponujecie rozwiązanie dla problemu jaki podał SKY ACE?
ano 35 07 marca 2007, 21:00

Świetny artykuł. Rozwiąże kilka moich problemów „na szybko”.
Tylko więcej takich :)
Livio 36 07 marca 2007, 21:48

Ja tworzyłem tak jak tutaj, wielki div a w nim 2: z treścią i z sidebarem.
Pojemnik z treścią dostawał overflow:hidden, a sidebar height:100% i display:block… i działa, jednak niektóre div-y w treści musiały dla IE dostać prawy margines, by nie wchodziły pod sidebar.

Demo: http://livio.i64.pl/xhtml/pfd/menu.html
medyk 37 08 marca 2007, 22:23

Bardzo cenne to obejście dla explorera, w wielu przypadkach jest to trudne do zrealizowanie (i to mnie zazwyczaj odwodziło od stosowania tych typów ‘display’a’) ale jakby nakreślasz dobry kierunek do radzenia sobie z tym.
Jeśli ktoś uważa, że stosowanie display:table jest tym samym co wstawienie tabeli w strukturę to chyba ma małe pojęcie na temat oddzielania struktury od prezentacji.
Jedyne co łączy tabelę w html’u z ‘display:table’ to nazwa nic więcej.
Element Table przedstawia tabelę w html’u a ‘display:table’ jest jednym ze sposobów prezentacji, który akurat jest domyślny dla tabel .
Sky Ace 38 08 marca 2007, 22:48

Przy czytaniu poprzednich moich komentarzy bardzo bym prosił, żeby jednak skupiać się na keywordach ‘myślenie’ niż na ‘niczym się nie różni’. Ewentualnie czytać wszystkie, a nie zatrzymywać się na pierwszym.

Więcej o tym w tym miejscu nie piszę, bo to temat na zupełnie inną, o wiele szerszą dyskusję. Może kiedyś. ;)
Pizzadude 39 08 marca 2007, 23:14

A tutaj bez expressions dla IE. ;)
medyk 40 09 marca 2007, 01:54

@shw
Ja dosyć mocno korzystam z expression‘ów a jeśli ktoś włączy stronę w IE z wyłączonym javascript to zobaczy nie ostylowaną (w pełni dostępną) stronę i informację na dole strony, że jeśli chce ładniej to albo powinien się przenieść na przeglądarkę z dobrym wsparciem dla CSS albo niech włączy javascript :)
Loonatic 41 10 marca 2007, 16:41

@Pizzadude
Moim zdaniem, to jednak nie jest dobre rozwiązanie. Spróbuj zwęzić okno przeglądarki do jakichś 600px (lub ciut mniej) i zobaczysz jak to wygląda…
Nie podoba mi się stosowanie borderów jako tła dla innych div‘ów…, zresztą poczytaj końcówkę artykułu …
Michnior 42 11 marca 2007, 14:22

Super działa !!!

Teraz się zastanawiam kiedy przedstawisz implementację takiego samego ujęcia tematu lecz z zastosowaniem trzech kolumn.

Pozdrawiam i życzę owocnej pracy :-)
Koziołek 43 12 marca 2007, 15:08

Mały apel – używajmy standardów tam gdzie można, a popsute przeglądarki albo zostawiajmy na pastwę losu albo znajdujmy dedykowane i nieinwazyjne rozwiązania.

tylko że nadal ponad połowa rynku to IE6 i nie da rady wytłumaczyć użytkownikom że jakiś ich pomysł jest zły, bo programista ma przez to więcej pracy.
expression może i jest fajne, ale wolę haki ponieważ są bardziej przejrzyste i znacznie łatwiejsze do wytłumaczenia „nowym”.
Jeszcze jedno. Jeżeli jakieś dane maja być wyświetlane „jak tabele” to zazwyczaj są to dane tabelaryczne, a te powinny być włożone w tabele a nie w przekombinowane struktury divów, css i expression. jest to przegięcie w drugą stronę czyli też jest źle :)
Dot 44 12 marca 2007, 15:13

Oczywiście, jeśli są to faktycznie dane tabelaryczne, to należy je wsadzić w tabelę. Jednak zdarza się, że chcemy pokazać dane, które z tabelarycznymi nie mają związku, tak, żeby wyglądało to jak html’owa tabelka (choć nie zawsze tak, by użytkownik kojarzył to z tabelką w dosłownym tego słowa znaczeniu).
Jeśli chodzi o „nowych” – cóż, tu tkwi największy problem. Edukacja webmasterów oparta o ogrom sieciowych poradników kuleje strasznie. Nie trudno znaleźć w poradnikach dla webmasterów stwierdzeń, że „wynikami validatora się nie ma co przejmować, bo na przykład Onet też ma dużo błędów, a to jest fajny serwis” itp. Właśnie takie poradniki i tutoriale dla webmasterów powodują, że sieć wygląda tak jak wygląda.
devnul 45 12 marca 2007, 15:15

@Koziołek: za przeproszeniem pierdzielisz głupoty. Przeczytaj post Riddla jeszcze ze 3 razy i to od deski do deski to może załapiesz o co chodzi – do przedstawiania danych tabelarycznych służą tabele a to że tabele mają domyślnnie display:table to już inna sprawa chodzi o to żeby zastosować semantyczną strukture kodu (x)html a nie o to żeby nie stosować display: table do warstw na stronie – bo display: table nie jest służy mylnie uważasz tylko do wyświetlania tabel – to tylko forma prezentacji danych. A stosowanie css i expression`s jest poprawne politycznie o ile powoduje prawidłowe efekty (czyli w miare identyczną prezentację strony w agencie).
Tomek 46 14 marca 2007, 03:38

Moim zdaniem to z lekki przerost formy nad trescia.
Dopoki 70% (a pewnie gdzie niegdzie wiecej) userow bedzie korzystalo z ie doputy rozwiazania tego typu, niestety beda domena blogow, takich jak ten.
Nie sadze aby na to rozwiazanie zdecydowal sie wiekszy portal lub serwis, gdyz jest poprostu ryzykowne i malo praktyczne.

I nie piekl sie za mocno w komentarzach. To moja opinia i tyle :)
Pozdrawiam
Thinker 47 14 marca 2007, 12:41

BZDURY.
„If you spend a day to make a 3 column div layout what you could do in 2 minutes with just one table. then you must be crazy or unemployed.”
http://zaid360.com/?p=25
Riddle 48 14 marca 2007, 12:43

Całe szczęście, że za 10 lat ten gościu będzie chodził po ulicach z napisem „work for food” a my będziemy budować przebojowe serwisy, wozić się po konferencjach i tworzyć lepszą sieć (semantyczną?).
mwgamera 49 14 marca 2007, 12:47

Thinker: Dla tego właśnie jest display table-*, żeby to samo zrobić równie szybko tylko, że poprawnie semantycznie. A że trzeba hacka żeby to działało w IE, to zupełnie inna sprawa, ale wszyscy wiedzą, że IE hamuje rozwój sieci.
Sky Ace 50 14 marca 2007, 12:55

Thinker – no weź, branie jako przykład kolesia który przez rok nie potrafi się czegoś nauczyć, to chyba nie do końca dobry pomysł...

Poza tym poczytaj go dobrze – on te tabelki wypuszcza z jakichś magicznych programów, tak to byle grafik potrafi stronę zrobić. Fakt, są takie, nawet Adobe ImageReady to potrafi i nawet się z tego czasem korzysta, w sytuacjach typu ‘klient chce makietę designu za 10 minut’. Ale nie w innych.
mcv 51 14 marca 2007, 13:07

„If you spend a day to make a 3 column div layout what you could do in 2 minutes with just one table. then you must be crazy or unemployed.”

False.
Riddle 52 14 marca 2007, 13:08

Ludzie, którzy tak mówią są po prostu ciency i na dodatek nie umieją używać Google. Dlatego muszą odejść.
Tomek 53 14 marca 2007, 13:45

I po co tyle emocji.
Owszem teoretycznie masz racje.
Tylko dlaczego najwieksi z najwiekszych przy konstrukcji stron uzywaja tabel zagniezdzonych w tabelach zagniezdzonych w tabelach itd ?
Poniewaz jest to jedyna przewidywalna konstrukcja w dzisiejszych czasach.
flickr, youtube, myspace a w polsce allegro onet, niestety wszyscy buduja strony na tabelach.
I nie jest problemem to kto sie czego potrafi nauczyc, bo rozwiazanie ktore proponujesz jest w 100% dla wiekszosci zrozumiale, chodzi o praktyczne strony wprowadzania tego typu roziwazan w zycie.
Przeciez nawet w twoim przykladzie nagle na safari dzieje sie rzecz nieprzewidywalna (vertical-align) i tylko o to mi chodzi.
Rozwiazania tego typu za sprawa internet explorer 7 oraz niespojnej obslugi css w wielu przegladarkach sa poprsotu ryzykowne.

A teksty w stylu:
„Całe szczęście, że za 10 lat ten gościu będzie chodził po ulicach z napisem „work for food” a my będziemy budować przebojowe serwisy, wozić się po konferencjach i tworzyć lepszą sieć (semantyczną?).”
to naprawde dziecinada.

Pozdrawiam tak czy inaczej.
Mniej emocji wiecej dyskusji (zdrowej)
Riddle 54 14 marca 2007, 13:46

Emocje są potrzebne, to one napędzają do działania.
Sky Ace 55 14 marca 2007, 13:51

Najwięksi z największych? To dlaczego nowa strona główna gazeta.pl nie ma w sobie ani jednej tabelki? Ot, zagwozdka, a przecież onet, allegro, youtube! Widać jednak nie wszyscy najwięksi są w epoce ‘w css się nie da’.
tajemniczy 56 14 marca 2007, 14:38

hmm po zastosowaniu takiej metody w IE nie dziala mi wyśrodkowanie całego wrappera poprzez margin: 0 auto
devnul 57 14 marca 2007, 14:39

bo w IE nie działa margin: 0 auto
Riddle 58 14 marca 2007, 14:40

W Quirksmode nie działa margin: auto. Upewnij się, że działasz w trybie zgodności ze standardami.

Poza tym przykład linkuję w poście – a tam działa.
tajemniczy 59 14 marca 2007, 14:56

no znalazłem błąd… sorry za kłopot – działa
Thinker 60 16 marca 2007, 00:29

Oj Riddle, Riddle… mogłeś coś sensowniej opisać niż emocjami rzucać. Tomek bardzo fajnie opisał sprawę, dla tych co angielskiego nie zrozumieli jak powinni. Wszystkie wielkie firmy maja w głębokim poważaniu jakieś śmieszne standardy, oczywiście nie oficjalnie. Nawet MS jest członkiem W3C i co z tego, skoro połowa jego serwisów działa tylko na IE?
A już najlepszym przykładem jest google. Nowoczesna firma zdobywająca internet – jak ? Tabelkami.

I pewnie za 10 lat będziesz się zastanawiał po co Ci były te standardy, przez które robisz strony kilkakrotnie wolniej niż lepiej mający się koledzy bez divitsowej choroby.
Riddle 61 16 marca 2007, 00:56

Zgoda, korporacje docierające do kupy ludzi muszą używać rozwiązań działających nawet na gównianych przeglądarkach. Natomiast pracując w trybie Agile nie musisz używać tabelek.

Nie słyszałeś też czasem o idei? Nie wszystko co robisz musi być nastawione na hajs, na szmal, na kasę. To typowo polskie, nachapać się forsy… czasem fajniej jest spełnić marzenia – i jeśli brzmi to dla Ciebie obco to nie mamy o czym gadać.
Sky Ace 62 16 marca 2007, 00:56

Sorry, jakie serwisy MS działają tylko na IE? Czy to przypadkiem nie na przykład Windows Update, w przypadku którego wcale mnie nie dziwi, że korzysta z kawałka systemu operacyjnego do aktualizacji tego właśnie systemu operacyjnego? A z czego ma korzystać niby? Takie dziwne, że wolą wymagać czegoś, co sami napisali, a nie chcą powierzać swojego systemu innym firmom? Mnie to wcale nie dziwi.

Bo jakoś z takim na przykład Knowledge Base nie zauważyłem problemów. A nie, jeden raz – przy korzystaniu z ich pół-online narzędzia do ustawiania ClearType, ale to też podpada pod zmiany w systemie.

A Google nie zdobyło internetu tabelkami, bo w tym przypadku nie ma to zupełnie nic do rzeczy, tylko usługami.

Z firmami mającymi w d* standardy też bym nie przesadzał. U nas gazeta.pl, poza nami MSN (ot patrz, ciekawostka, serwis Microsoftu a tabelek nie ma) czy Yahoo. Ot, ciekawe…

A te standardy są chociażby po to już teraz, żebym mógł stronę obejrzeć na swojej komórce i nie męczyć się przy tym z tabelkowym układem przeznaczonym na 1024×768, który na 640×240 nijak się nie sprawdza, mimo cudów operowych ze skalowaniem strony.
Sky Ace 63 16 marca 2007, 01:15

A jeszcze co do Google – ich wyszukiwarka jest w ogóle antystandardowa, ale ma to pewien cel – dzięki temu ich wejściowa strona waży 1680 bajtów. A teraz pomnóż sobie to razy 380 milionów unikalnych userów miesięcznie (dane z google corporate information) i powiedz, czy opłacałoby im się to zmieniać. A i to wyjdzie ci tylko transfer ze strony wejściowej.

Tak więc uważam, że akurat ich przykład jest trochę nie na miejscu.
Xarr 64 16 marca 2007, 08:54

I wzięli i zdenerwowali Riddla, źli ludzie ;)

Imo dobry tekst, który pokazuje troszkę inne podejście z użyciem „cssowych tabelek”. W sumie nie jest to nic nowego, ale w polskim internecie chyba nikt tej metody nie opisywał, więc za to wielki plusik.

Sam osobiście używam starawej już metody pisania strict pod nowe browsery, a dla obsługi antyków, IE, czy innych wsadzam dodatkowy pliczek z hackami css. Niemniej uważam, podobnie jak autor, że każda metoda, która odseparowuje strukturę dokumentu od jej wyglądu/formatowania jest godna pochwały.

Co do powoływania się na te wielkie portale i korporacje. Owszem, sporo działa nieustannie na tabelkach, ale to się wszystko zmieni. Za tym stoi duża kasa, a zmiana ich struktury na tę właściwą niesie za sobą pewne koszta. Nie każdy jeszcze dostrzega nie tyle plusy poprawnego tworzenia www, co zyski jakie może im takowe przynieść.

Kwestia czasu. A póki co, pomniejsze strony powinny dawać przykład i pokazywać tym większym, że da rade. Wszyscy jesteśmy męczennikami, więc musimy się trzymać razem :)

Dzięki Riddle za tekst.
rafalski 65 16 marca 2007, 18:43

Po pierwsze dzieki Riddle za fajny patent, pewnie paru osobom sie przyda.
Sama potrzeba stosowania takiego czegos odslania moim zdaniem nie tylko bledy IE, ale tez przemilczana prawde o CSS. Zgadzam sie standardy, semantyka, oddzielenie contentu od prezentacji, dostepnosc.. Niemniej CSS w obecnej postaci, tak chwalony przez niezliczona rzesze fanatykow jest po prostu zwyczajnie w paru miejscach spaprany u podstaw.
Tabele byly stosowane „od zawsze” nie dlatego, ze nie bylo niczego lepszego, ale po prostu swietnie spelnialy swoja role. Tabela zapewnia elastyczna, prawie dowolnie konfigurowalna siatke, na ktorej mozna zbudowac ogromna wiekszosc layoutow. W „beztabelkowym” CSS wprowadzono pare nowych narzedzi pozwalajacych na tworzenie pewnych layoutow latwiej, jednoczesnie zabierajac kilka bardzo uzytecznych wlasciwosci „starego html”, tak, jakby w czyms komus przeszkadzaly. Rowne kolumny to tylko jeden przyklad, jest tego wiecej, chociazby mozliwosc elastycznego dopasowania szerokosci komorek do ich zawartosci, albo proste centrowanie zawartosci elementu blokowego. Samo to, ze w CSS jest zachowana wlasciwosc „display:table” swiadczy o tym, ze „tabelowy” sposob wyswietlania jest potrzebny.
Tlumaczenie, ze nie nalezy stosowac tabel do layoutu, bo nie do tego zostaly stworzone zawsze mnie bawilo. Historia rozwoju techniki pokazuje, ze jest czyms zupelnie normalnym, ze wynalazki powstaja „przez przypadek”. Myslicie, ze Bell chcial wynalezc telefon? Nie, to mialo byc urzadzenie „szpiegowskie”, do podsluchiwania malych dzieci, podobne do sprzedawanych w dzisiejszych czasach.
Od dawna robie layouty w „czystym css”, nie dlatego, ze bardzo lubie, ale dlatego, ze taka umiejetnosc jest wymogiem tego zawodu. Jesli jednak sytuacja tego bedzie wymagala, raczej uzyje tabeli, niz potencjalnie mogacego sie posypac rozwiazania Riddle’a. Z tego samego powodu, dla ktorego duze firmy stosuja tabele tam, gdzie chca: to ma dzialac.
Chociaz.. nigdy nie mow nigdy, bo rzecz mi sie naprawde podoba ;)

Nawiasem mowiac, Riddle, Twoj przyklad nie dziala w IE6 – druga kolumna jest krotsza, gdy zawiera mniej tekstu.
Tyhagara 66 18 marca 2007, 01:51

Po pierwsze nie ma czegoś takiego jak „beztabelkowy” CSS. Po drugie CSS daje możliwość tworzenia dwóch kolumn o tej samej wysokości i wiele innych rzeczy. Niestety zawodzą tutaj przeglądarki, a nie sama technologia CSS.

Struktura dokumentu nie posiada wyglądu. Znacznik TABLE, nie posiada w sobie żadnej magicznej właściwości, która nadaje mu kształt „tabelki”. To co czyni z niego tabelkę, a raczej to co powoduje, że znacznik ten zachowuje się w konkretny sposób, zwany przez nas „tabelkowym”, to mechanizm prezentacji, wbudowany w przeglądarkę internetową. Można powiedzieć, że przeglądarka internetowa, posiada wbudowany „własny CSS”, który formatuje znaczniki HTML.

Kiedy oglądamy stronę w czystym HTML z poziomu przeglądarki, to wydaje nam się, że jest to niesformatowany kod HTML. W rzeczywistości jest to sformatowany kod HTML. Dlatego tekst w znaczbniku H1 jest pogrubiony i większy od tekstu w zanczniku P.

To jak znaczniki będą formatowane w „czystym HTML”, zależy od przeglądarki, od jej „wewnętrznego CSS”. Akurat większość przeglądarek formatuje HTML według przyjętej formuły. Jednak nie jest to regułą, bo przeglądarki tekstowe lubią formatować elementy HTML po swojemu, np: kolorując je. Przeglądarki telefonów komórkowych, czy terminali, zrobią to jeszcze inaczej, a przeglądarka głosowa, sformatuje znaczniki HTML całkowicie odmiennie.

Teraz czym jest CSS którego my używamy? Jest to mechanizm podobny do tego, który posiadają przeglądarki. Pisząc własny CSS nadpisujemy „CSS przeglądarki”, tworzy się kaskada którą, możemy nadpisywać w nieskończoność, mamy do tego reguły ważności, dziedziczenia, kaskady, itd.

Wyobraźmy sobie, że ktoś napisał przeglądarkę, która nie posiada żadnego wewnętrznego sposobu formatowania znaczników HTML. Nie jest to najrozsądniejszy pomysł, dlatego żadna przeglądarka w ten sposób się nie zachowuje, ale jest to możliwe. Gdybyśmy stworzyli layout na tabelkach i wyświetlili stronę w takiej przeglądarce, okazałoby się, że tekst jest wyświetlany w sposób ciągły. Czyli tak, jakby znaczników w ogóle nie było. Co więc należy zrobić żeby jednak zobaczyć tekst w układzie tabelkowym? Należy go sformatować, tak jak robi to większość przeglądarek, czyli znacznikowi TABLE nadać formatowanie DISPLAY:TABLE. Uzyskujemy w ten sposób układ tabelkowy. Nic nie stoi na przeszkodzie, aby w takim wypadku zastąpić znacznik TABLE znacznikiem DIV i nadać mu takie samo formatowanie, efekt będzie ten sam.

Teoretycznie można każdy znacznik sformatować dowolnie. Zabrania tego jednak semantyka.

Layout strony nie jest danymi tabelarycznymi, dlatego nie możemy go umieścić w znaczniku, który mówi – zawieram dane tabelaryczne. Znacznik wbrew temu co wiele osób uważa, nie przekazuje nam tej informacji poprzez specyficzny sposób formatowania danych, czyli DISPLAY:TABLE. Możemy wyświetlić stronę w przeglądarce nie posiadającej żadnego wewnętrznego formatowania, a znacznik nadal będzie określał, jakiego rodzaju dane w sobie zawiera. A kto te dane wykorzystuje? Urządzenia, programy, które czytają strukturę kodu, dla nich nie ma znaczenia, jak sformatowany jest dany znacznik. Dla nich ma znaczenie co zwiera, jakiego rodzaju dane. Przykładem może być wyszukiwarka internetowa, która odróżnia znaczniki Hx od znaczników P lub STRONG i wielu innych.

Nie należy formatować znaczników aby symulować inne znaczniki. Znacznik H1, mówi – jestem najważniejszy w tym dokumencie, a znacznik P mówi – jestem akapitem tekstu. To w pewnym sensie wymusza sposób prezentacji danych. Jeśli H1 mówi, że jest najważniejszy, to powinien się stosownie prezentować. Jeśli Tabelka mówi, że zawiera dane tabelaryczne to powinna prezentować je tak, aby było to zgodne z prawdą. Jeśli DIV grupuje dane, to niech grupuje, ale to czy będzie je grupował w kolumnie czy ta kolumna będzie się dostosowywała do szerokości strony, czy będzie miała stałą wysokość, lub taką samą jak kolumna obok, to w tym przypadku nie ma żadnego znaczenia.

Do czego zmierzam. CSS pozwala na formatowanie elementów w dowolny sposób i jest to właściwe, pod warunkiem, że w zgodzie z semantyką.
Nie zgodzę się, że CSS pozbawia nas legendarnych już możliwości tabelek. Te możliwości są dla nas dostępne właśnie w CSS. Problem w tym, że nie każda przeglądarka je pokaże. Zanim ktoś z was powiesi psy na CSS, to niech najpierw się przyjrzy, czy rzeczywiście nie ma możliwości osiągnięcia danego efektu, czy może jest to spowodowane brakiem obsługi w przeglądarce? W takim wypadku trzeba by wieszać psy na przeglądarce, a nie na CSS. Pomijam fakt, że CSS jest wciąż rozwijany, prawdopodobnie jego rozwój znacznie by przyspieszył, gdyby tylko przeglądarki za nim nadążały.
Aachi 67 20 marca 2007, 00:33

Ja tylko słówko do dyskusji… Pamiętajmy panowie, że za 10 lat internet nie będzie tylko dla użytkowników komputerów i ich wielgachnych monitorów. Już teraz twórcy komórek liczą kasę, no a to nie tylko o komórki chodzi….
I jak sądzicie, łatwiej będzie podmienić CSS-a? Czy wyświetlić 900 px tabelkę na ekraniku szerokości 320? A sterowanie komputera głosem i odczytywanie stron przez syntezatory mowy, to dla niektórych pewnie tylko w filmach sf.
Też kiedyś mówiono, że java to fajny bajer, ale się nie przyjmie…

Z drugiej strony przerzucenie się na nowy sposób tworzenia stron to miesiąc uczciwego uczenia się więc, Ci co teraz robią w tabelkach wcale nie wylądują na bruku :)
Taka jest moja skromna opinia.
pozdrawiam
kiero 68 20 marca 2007, 16:42

Ciekawe, przyda sie ;)
devu 69 21 marca 2007, 06:19

Witam Panów.
Wpadłem całkiem przypadkiem na tego bloga. Artykuł ciekawy, przeczytałem go głównie ze względu na początek:

„Web professionals who refuse to update their skills and insist on using outdated methods can no longer be called web professionals.”

Z pewnym sentymentem go przeczytałem bo technologia html i wszystkie niuanse z nią związane stały się dla mnie przeszłością. Dlaczego? Bo bardzo wierzyłem w powyższy tekst już klika lat temu i tak jak ktoś przytoczył że niegdyś java była traktowana jako ciekawostka tak osobiście upatrzyłem sobie flash’a.

Dziwie się, że tego typu myśl mogła by natchnąć na szersze horyzonty a ku mojemu zaskoczeniu zamknęła się w ramce :). Moim skromnym zdaniem przyszłość leży w platform independence a html i css temu nie służą. Już nawet w naszej społeczności mówi się o tym, że Unia Europejska będzie narzucać pewne standardy co do unifikacji prezentacji danych. Powodzenia życzę kolegom i współczuję bo pamiętam czasy w których co wersja przeglądarki to mnie coś zalewało. Jestem wielkim entuzjastą flash’a. Podziwiam politykę rozwoju tej technologii i wszystkie jaskółki ćwierkają, że to jest jedyna słuszna droga. W dzisiejszych czasach, mocy obliczeniowej, przepustowości łącza…

Przepraszam, że tak wtrąciłem taki wątek ale jak pisałem wyżej. Ten tekst u góry mnie sprowokował. Wyjdźcie Panowie z ramek już dziś :), a jutro będzie nam łatwiej.

To nie klient tworzy jakość tego co w sieci tylko my! Może sie wydawać, że jest odwrotnie bo rządzi tym ekonomia, ale to wszelkie innowacje przekonały naszych klientów do pewnych rozwiązań. Jeśli w USA połowa telefonów przeżywa bum na aplikacje Flash Lite „my” tworzymy portale w ramkach z ładnymi css’ami a w specyfikacji piszemy że bannery reklamowe na nim umieszczane mają być max flash player 6 bo flash 8 ma tylko 83% użytkowników w Polsce. Jak klienta przyzwyczaimy do rozwiązań, które dla nas są lepsze to i on sam się w końcu przekona. Jeśli tak dalej będziemy działać zachód zawsze będzie do przodu.

Bardzo jestem dumny z naszych chłopaków, że potrafimy znaleźć rozwiązania na najbardziej nietypowe zagnieżdżenia i kombinacje bo to niejako nasza cecha narodowa :), ale smutny jest fakt, że należymy do społeczności, która ciągle coś stara się poprawić po kimś , a nie narzucić własne rozwiązania lub używać sprawdzonych.

Te wszystkie zlepki kodów, koncepcji, języków nazwano dumnie – Ajax a to co sie w nim robi web 2.0 :)

Porcjowanie danych to dzisiaj atut tych rozwiązań i bardzo dobrze. Dbamy o nasze serwery ale co? Dalej sie męczymy z ramkami i css by to wszystko jakoś wyglądało. Nie wiem co było przed Flash 5 ale on już potrafił to kilka lat temu! A do tego pozwolił wyjść z ramek.

Źle się stało w naszym kraju i nie tylko, że za flasha zabrali się „designers” zrobili mnóstwo fajnych stronek z wodotryskami których nikt nie widział bo… mu sie nie chciało czekać ;) a potem przyszła fala developerów, którzy robili ciekawostki ale wyglądały tragicznie i odpychały potencjalnych klientów.

Nie będę się już rozpisywał na ten temat ale pomyślcie o tych pierwszych linijkach tego artykułu napisanego przez Piotra.

pozdrawiam
Tyhagara 70 21 marca 2007, 11:03

@devu, jest takie powiedzenie, że do wykopania dołka nie używa się koparki, tylko łopatki. Jeśli mówisz o stronach typowo ‘tekstowych’, które nie potrzebują Flasha, to jaki sens jest używać tej technologii? Mówiąc obrazowo, czy gdyby Riddle zrobił tego bloga w technologii Flash, to dla użytkowników byłoby lepiej czy gorzej?

Ja rozumiem, że można, a nawet trzeba promować nowe technologie i rozwiązania, ale należy spojrzeć nie tylko na zalety, także, a może przede wszystkim, na wady.
Thinker 71 22 marca 2007, 13:04

@devu
omg :/
90% rzeczy flashowych mozna zrobic bez flasha, po co wiec przeplacac?

a powaznie, to flash ssie. bardzo.
dobrze napisane:
„mnóstwo fajnych stronek z wodotryskami których nikt nie widział bo… mu sie nie chciało czekać ;)”
ja jak widze ze zeby przeczytac akapit textu laduje mi sie 600kb strony to wole ja zamknac. jeszcze genialny pomysl z muzyczka w tle :/
flash nadaje sie do gierek, czy ostatnio dobrze sie sprawdza przy filmikach. ale do stron? nigdy.
Koziołek 72 26 marca 2007, 15:40

@Thinker nie do końca… flash powinien być stosowany do tworzenia prezentacji więc jeżeli robisz stronę – prezentację to flash to podstawa… swoją drogą zamiast flasha można uzyć np. GWT czy też Flex4J :)
Dot 73 26 marca 2007, 16:01

Nie zgodzę się. Flash nad XHTML + CSS pozwala na niewiele więcej, a jest cięższy i wymaga dodatkowych narzędzi (po stronie klienta, o twórcy strony nie wspominając). W dzisiejszych czasach w oparciu o XHTML, CSS i JS można zrobić na prawdę bardzo wiele.
Mlody 74 29 marca 2007, 11:26

Faktycznie Flash tylko szkodzi niz pomaga – nie pamietam strony, w ktorej czekalem na zaladowanie calej strony stworzonej za pomoca tej technologii – zazwyczaj w tym przypadku szukam „skip intro”.
crooleeck 75 31 marca 2007, 21:36

Zawsze miałem problem z rozmiarem divów, teraz będzie prościej ;)...
dziki 76 02 kwietnia 2007, 00:00

Gdyby Riddle zrobił tego bloga w technologii Flash, to bym tu po prostu nie zaglądał. Krew zalewa mnie gdy wchodzę na jakąś stronę a tam Flash który wgrywa się pół godziny. A nawet gdyby wgrywał się pół sekundy a ja miałbym 100megowe łącze – nie zmieniło by to mojego podejścia do technologii Flash. A jak do tej pory nikomu nie udało się mnie przekonać do jego używania. To ja „leczyłem” z flasha moich znajomych.
Riddle 77 02 kwietnia 2007, 04:17

Ja nie umiem Flasha i się nie naumiem, bo to strata czasu. Wolę SVG poćwiczyć.
D4rky 78 07 kwietnia 2007, 00:29

Wadą rozwiązania przedstawionego w notce jest niemożność utworzenia marginesów. Przez to dwa divy zawsze będą ze sobą sklejone, co jest trochę denerwujące.
Redhot 79 07 kwietnia 2007, 08:34

Dzięki, rozwiązało mi to parę zagwodek :)
D4rky 80 07 kwietnia 2007, 11:04

Znalazłem rozwiązanie problemu przyklejających się do siebie kolumn. Trzeba ustawić border-spacing na wartość wyższą od zera, ale dodaje to także marginesy po bokach (tworzy coś w rodzaju pojemnika dookoła każdego diva przy table-cell). Nie działa to w IE i po 2h prób dostosowania tego do „najpopularniejszej przeglądarki”, dałem sobie spokój.
Madel 81 09 kwietnia 2007, 13:37

Riddle, spojrzysz tutaj: http://forum.php.pl/index.php?showtopic=65949
Próbowałem rozwiązania podanego powyżej ale nie pomogło. Jestem bliski załamania…
Madel 82 11 kwietnia 2007, 14:16

Solved (przez JS).
Adic 83 27 kwietnia 2007, 00:01

A ja mam do bardziej obeznanych kolegów takie pytanie:
Dlaczego twórcy standardów po prostu nie udostępnili w przypadku elementów blokowych właściwości height: 100% ? Skoro może istnieć width: 100%, to nie widzę tutaj problemu – ileż to godzin pracy zaoszczędzono by w tak prosty sposób biednym twórcom stron…
Oczywiście wiem, że moje pytanie nie wniesie niczego do sprawy – po prostu jestem ciekawy, dlaczego pominięto tak oczywiste rozwiązanie. Może ja po prostu nie dostrzegam powodu?
Riddle 84 27 kwietnia 2007, 08:48
Height: 100% odnosi się do wysokości poprzedniego elementu – musi mieć ją ustaloną. Dlatego jeśli nie masz nic wcześniej, to daj:
```
html, body {
  height: 100%
}
```
Możesz też probować z min-height, żeby tło na przykład aplikowało się dalej niż na 1 ekran.
devu 85 30 kwietnia 2007, 03:53

@flash vs css

80kb to ma

http://www.flacoon.pl

css? Napisałem sobie własny szablon graficzny nie martwiąc się takimi rzeczami. To jest ta swoboda twórcza o której mówiłem. Ja przyznaję wam racje tym, którzy mówią, że ciężkie i pokraczne rzeczy zostały wyprodukowane ale to nie znaczy, że nie da się inaczej!

Było na temat bloga no to na dowód proszę... jest. Proszę sobie obliczyć ile waży ten jak szybko się ładuje etc.

A tak wyglądają wasze css’y jak sie zapomni o ‘>’ ;)

http://www.flashblog.pl/

Szybkość tworzenie z punktu webmastera? W życiu w xhtml’u nie napisał bym tego szybciej niż we flashu, ale oczywiście nie porównuję się tutaj do ludzi którzy w tym siedzą dogłębnie.

P.S. A z przekory na samym dole umieściłem linki do sprawdzenia sobie standardów w3c.org… zdał jest ok i nikt mi nie zarzuci, że strona je złamała ;).
olek 86 12 maja 2007, 15:44

devu: Spróbuj przewinąć to kółkiem myszki. ;)
Livio 87 08 czerwca 2007, 18:32

A mnie nie działa na śmIEciu.
Lucius 88 09 czerwca 2007, 00:36

No, ja się troszkę namęczyłem z div’ami dla IE, ale ostatecznie tekścik Ridlle’a załatwił sprawę...

Dzięki.
Gregor 89 20 czerwca 2007, 11:47

Twój blog robi wielkie wrażenie :) Tak trzymaj!
Marcin 90 26 czerwca 2007, 17:16
Dzięki za rozwiązanie. Napotkałem jednak na jeden mały problem. Gdybyście chcieli wstawić sobie komentarze wewnątrz dokumentu HTML w obrębię bloków, które chcecie mieć równe to nie polecam. Nieźle się namęczyłem zanim do tego doszedłem. Jeśli ktoś nie zrozumiał za bardzo mojego powyższego wywodu to może kod mu więcej powie.

Tak NIE robimy:
```
<div id="content">
Lorem ipsum ...
</div> 
<div id="sidebar">
Lorem ipsum sidebar
</div>
```
sinx 91 03 lipca 2007, 14:53

Tak wlasnie proboje zrobic sobie taki ladny podzial niestety po wyrzuceniu bibliotek jquery z przykladu ktory byl podany jako dzialajacy pod IE6 nagle sie gubia kolumny http://images24.fotosik.pl/15/67a42bbf58be3025med.jpg (tutaj screen pelnych rozmiarow: http://www.fotosik.pl/showFullSize.php?id=67a42bbf58be3025) moze masz jakis pomysl jak to rozwiazac?
PiKey 92 06 lipca 2007, 17:35

a co mam zrobić w tym przypadku?

http://www.fotosik.pl/pokaz_obrazek/14f9e74b0da24055.html
MitS 93 07 lipca 2007, 11:40

[PiKey]:
„a co mam zrobić w tym przypadku?

http://www.fotosik.pl/pokaz_obrazek/14f9e74b0da24055.html”

wg. mnie całą lewą stronę musisz wziaść w jednego div’a a cały sidebar w drugiego i następnie postępujesz wg. wskazówki napisanej przez riddle’a

PS. świetny tutorial, ale cały czas mi chodzi po głowie jak zrobić to wszystko bez używania komentarzy warunkowych dla IE :]
sh 94 17 sierpnia 2007, 10:44

A ja z koleji z problemem, ktorego jakos nie zauwazylem wsrod tyych wszystkich komentarzy o standardach i tabelkach,mianowicie:
<div id="wrapper"> <div id="content"></div> <div id="sidebar"></div> </div>

Dolaczylem style jak w tym artykule, jednak Firefox czasem jakby je… ignoruje? Nie wiem jak to nazwac, ogolnie raz na jakis czas FF wyswietla strone tak jakby nie bylo display: table[-cell] w stylach, divy sa jeden pod drugim. Szczegolnei widac to u mnie na jogguu (ktory jest jeszcze zreszta nie skonczony) podczas chodzenia po archiwum. Klikajac losowo na miesiace, co jakis czas strona wyswietla sie blednie. Wtedy wystarczy odswierzyc i jest ok…
Riddle 95 17 sierpnia 2007, 18:21

Tak, niestety masz rację. Czasem Firefox ogólnie tak renderuje tabelki (zwykłe <table/> też), lecz F5 pomaga.
owen777 96 27 sierpnia 2007, 19:12

http://www.fotosik.pl/pokaz_obrazek/ce1d2f3ed6a65c89.html

Jak można rozwiązać ten problem?

PS. Nie przejmujcie się ogólnym wyglądem strony, bo to jest tylko próba :)
jedre 97 24 września 2007, 22:46

Czy jest możliwość aby w tym rozwiązaniu, pomiędzy komórkami (divami) był odstęp? coś jak cellspacing w zwykłych tabelkach. W pierwszym momencie przychodzi na myśli margines, jednak nie bardzo działa.
KILa 98 25 września 2007, 15:13

Riddle napisał:

Całe szczęście, że za 10 lat ten gościu będzie chodził po ulicach z napisem „work for food” a my będziemy budować przebojowe serwisy, wozić się po konferencjach i tworzyć lepszą sieć (semantyczną?).

Ty Piotruś nie bądź taki skromny.
Jeśli wydaj ci się, że na tabelkach nie można zbudować przebojowego xD serwisu to sie troche zagalopowłeś.

Miłej jazdy na konferencjach ;)
Pawel 99 08 października 2007, 14:32

Polecam technikę „column swapping” pozwala uzyskać kolumny równej długości w niemal każdej przeglądarce. Zobaczcie: 2columns.net
satorian 100 23 października 2007, 12:51

Tabele dla danych tabelarycznych, div-y dla layout-u. Tylko cholera nikt nie potrafi jasno wytłumaczyć gdzie leży granica między jednym, a drugim typem zawartości. Ciekawe, prawda?
peter 101 20 stycznia 2008, 10:33

Mialem zostawic ten artykul bez komentarza…ale..w ogole nie zgadzam sie z tym tekstem, skladam strony od x lat, ale zeby robic display:table? pozniej bawic sie w sprawdzanie z serii jaka to przegladarka? Jak IE do dawac float?kupa czasu… przypominam Time Is Money, polecam doglebne przejrzenie html-a,css-a, jezeli ktos zna oczywiscie angielski, sa rozwiazania proste ktore dzialaja od safari przez IE6,7 do FF3 i inne. Nie neguje takich artykulow ale uwazam ze przyczyniaja sie do tworzenia burde… na stonach, zwiekszenia objetosci kodu, polecam kupienie jakiegos pda np z symbianem i tam testowac wtedy wszystko wyjdzie, po pierwsze float dziala znakomicie, a po drugie metody ktore kolega stosuje przyczyniaja sie takze do zwiekszenia oplat jak ktos ma net przez hsdpa czy gprs, wiecej kodu, wieksza ilosc danych. Na koniec moj mały apel: nie wzorujcie sie na takich artykulach, sami szukajcie optymalnych rozwiazan i cwiczcie kreatywnosc
Riddle 102 20 stycznia 2008, 13:54

Sam stosuję float w serwisach produkcyjnych. Po prostu to jest post z kategorii „uczcie się, tak będziemy za 5 lat składać strony”. Tyle. :)
peter 103 21 stycznia 2008, 19:44

gospodarka sie globalizuje, podobnie jest ze standardami, zatem za 5 lat przegladarki juz w wiekszosci beda interpretowaly kod tak samo
Versus 104 21 stycznia 2008, 21:56

Po raz kolejny, dziękuję Tobie Riddle za użyteczne wskazówki.
稅務顧問 105 25 kwietnia 2008, 12:18

Tabele dla danych tabelarycznych, div-y dla layout-u. Tylko cholera nikt nie potrafi jasno wytłumaczyć gdzie leży granica między jednym, a drugim typem zawartości. Ciekawe, prawda?
moltar 106 31 maja 2009, 12:02

Ja jednej rzeczy nie rozumie. Jak już ładujesz bibliotekę jquery to nie lepiej zrobić:

if($(’#content’).width() < $(’#sidebar’).width()) $(’#content’).width($(’#sidebar’).width());
else $(’#sidebar’).width($(’#content’).width());

To mniej roboty niż pisać tyle CSS’a, a wszędzie będzie działać – za to odpowiedzialni są już programiści jquery :)

Pozdrawiam
moltar 107 31 maja 2009, 12:03

hehe nie ten rok :D sorry
moltar 108 31 maja 2009, 12:05

height oczywiście a nie wight. Jakby coś ;]