Komentáře k článku

Současnost a budoucnost layoutů: CSS tabulky

Jestli má CSS s něčím problém, pak je to layout. Již zhruba 10 let volají webdesigneři po spolehlivém způsobu, který by dovolil vytvořit jakýkoli layout během chvilky a bez zbytečné námahy. Dnes se podíváme, proč jsou současná řešeních problémová a povíme si, proč se v poslední době hodně mluví o CSS tabulkách a o co se jedná.

Zpět na článek

129 komentářů k článku Současnost a budoucnost layoutů: CSS tabulky:

  1. Vojtěch Vysloužil

    RE: Současnost a budoucnost layoutů: CSS tabulky
    Tohle je vážně úlet :-) Core kodéři nejprve zavrhnou tabulky pro tvorbu layoutu a nahradí je naprosto nepraktickým CSS layoutem, aby po čase vymysleli tabulky v CSS pro snadnou tvorbu layoutu. No mě trefí…

    1. N/A

      RE: Současnost a budoucnost layoutů: CSS tabulky
      mate k dispozici technologii (html, css, client-side scripting), _muzete_ ji pouzit. nemusite.
      nelibi se Vam css. nepouzivejte. vidite v html tables vyhody, pouzivejte.

      pri zavrhovani css si vzpomente, jak byste pred vznikem <div> / <layer> / css "zaridil" drag-n-drop.

    2. Radovan

      RE: Současnost a budoucnost layoutů: CSS tabulky
      Ani nie úlet. CSS tabulky, ak to tak mozeme nazvat. Radsej pre tych ortodoxnych to nazvime CSS layout s funkcionalitou tabuliek, aby nas neupalili :)
      A teraz k tomu problemu. Na tychto moznostiach CSS sa netreba pozerat kriticky. Naozaj vo vela veciach usetria kopec prace a treba si uvedomit, ze naozaj kopec veci riesia. Neviem si predstavit inu situaciu, kde sa daju vyuzit. Zaroven nechapem tie vykriky zastancov "beztabulkoveho" layoutu. HTML tabulky a CSS tabulky su uplne odlisne veci aj ked riesia veci dost podobne. Zaroven ak si clovek uvedomi, ze struktura dokumentu sa nemeni (ci uz pouzije moznost obtekania alebo tabuliek), tak je tato technika naozaj najlepsim riesenim na terajsiu situaciu.

      Podobny princip je vyuzitie display: inline-block vo vodorovnom navigacnom menu (ak chceme odkazy ako blokove tlacidla). Malo ludi ho vyuziva a pritom to je riesenie presne na to urcene.

      Nemusi ta trafit :) Len sa na danu problematiku pozrel niekto, kto "neurcuje" vyvoj webu.

      1. Anonym

        RE: Současnost a budoucnost layoutů: CSS tabulky
        diplay: inline-block nefunkcne vo FF 2, preto asi nepouzivane, v sucasnosti (FF 2 ma uz minimalnu pouzivanost) ale celkom spravna volba.

    3. Hoween

      RE: Současnost a budoucnost layoutů: CSS tabulky
      Mistra Záhoně rozhodně nepovažuji za nějakého core kodéra, ačkoli úlety tady předvádí s každým článkem.

      "CSS tabulky" tady jsou v podstatě od nepaměti, protože vykreslovací jádro má na CSS vlastnosti namapované příslušné HTML tagy, samozřejmě s větším či menším úspěchem. I proto je CSS layout dělaný jednou z metod popsaných v článku spolehlivější.

      Co se týká (ne)praktičnosti CSS layoutu, zase jen a pouze bullshit od líných a nezkušených kodérů. Na čistě CSS layout jsem přešel před cca 5-i lety a layoutů jsem udělal pár desítek. Až na pár špíčků jsem s tím nikdy neměl problém v žádném prohlížeči a jednou jsem si vypomohl JavaScriptem. Jinak mi CSS layout naprosto vyhovuje a nabízí mi možnosti, které tabulkový layout (ať už HTML, nebo CSS) prostě nenabízí (např. záporný margin).

      Článek je hovadina, zaměřená na jeden konkrétní problém a vychvalující tabulkový layout právě kvůli řešení tohoto jednoho problému (stejně vysoké sloupce). Jinak "css tabulky" nemají výhodu žádnou a jako kodéra mě zbytečně svazují. Výhodám klasických CSS layoutů a možnostem "čistého css bez css tabulek" se článek vůbec nevěnuje.

      1. McBig

        RE: Současnost a budoucnost layoutů: CSS tabulky
        S tabulkama se neshodnem, ale to řešit nechci, jen malou poznámku, ten záporný margin funguje u prvku uvnitř buňky (tedy ne přímo buňka, ale div v ní) a pohodlně vycestuje z tabulky (nevzpomenu si už jestli to jde přímo, nebo s trikem).

        1. Hoween

          RE: Současnost a budoucnost layoutů: CSS tabulky
          Takže budeme obalovat, a obalovat a tím zrušíme další "výhodu" popsanou v článku – kód bez zbytečných značek.

          Znovu se ptám, co skvělého a objevného mi přináší "css-table" layout?

          1. Radovan

            RE: Současnost a budoucnost layoutů: CSS tabulky
            Budem tu reagovat aj na tvoj predchadzajuci prispevok. Ono to je pekne ze kodujes uz 5 rokov, ale pokial vyuzivas maximalne uroven prvej verzie CSS tak tie vyhody spoznat nedokazes. A to nie je utocna veta, len sa pokusam zhodnotit aktualny stav, ak to je inak tak ma oprav.

            To obalovanie som v tomto pripade nejako nepochopil. Krizuju sa vam dva hlavne bloky cez seba ? Lebo strukturovo je pouzitie CSS tabuliek, alebo obtekanych blokov rovnaka. Ziadne nove vnorene znacky nie su treba ako by ste ich navrhli pre obtekany layout.

            1. Hoween

              RE: Současnost a budoucnost layoutů: CSS tabulky
              Ehe? Co to mektáte? Aktuální stav čí? Můj? Vážně si myslíte, že bych si i v roce 2009 vystačil s CSS 1 a dál se mé znalosti nedostaly?

              Co se týká obalování, viz Matrjoška, na té to snad pochopíte.

              1. Radovan

                RE: Současnost a budoucnost layoutů: CSS tabulky
                Ja nic nemektam. Ano vas stav som mal na mysli.

                Matrioska, co s nou ? Fajn hracka, pamatam si z detstva :) Ale o nabalovani v HTML teda nemam predstavu, ale to bude asi tym, ze sa tomu aktivne vyhybam ;)

                1. Hoween

                  RE: Současnost a budoucnost layoutů: CSS tabulky
                  O možnostech CSS a mých znalostech mě tady poučuje člověk, co před pár minutami v jiném příspěvku přiznal, že jeho znalosti CSS jsou bídné. Nu vot.)

                  Obalování v HTML je proces, kdy objekt musím pro zajištění nějaké funkce obalit jiným, který by jinak nebyl potřeba.

                  1. Radovan

                    RE: Současnost a budoucnost layoutů: CSS tabulky
                    Prosim ukazte mi, kde som hovoril o tom, ze mam male znalosti CSS. Rad sa dozviem nieco nove :)

                    1. mello

                      RE: Současnost a budoucnost layoutů: CSS tabulky
                      LOL! V tomhle se musim zastat Howeena… Pokud si tedy chcete doplnit sve vyjimecne znalosti o CSS, tak si prosim otevrete strycka googla a vyhledejte si Matrjoska hack, mozna se dozvite i neco o obalovani :)

                      1. Radovan

                        RE: Současnost a budoucnost layoutů: CSS tabulky
                        Mozete mi vysvetlit v com je vas problem ? Mate snad problem s matematikou prveho stupna ked si musite vypomahat zbytocnymi vnorenymi znackami, aby ste dosiahli podobneho efektu, akym riesi IE svoj box model ?

                        1. Hoween

                          RE: Současnost a budoucnost layoutů: CSS tabulky
                          Pokud nechápete obalování, matrjoška vám to vysvětlí. Jinak tam žádný problém není.

                          Obalování je dále nutné u těchto skvělých "css-table" layoutů, protože jinak se na jednotlivých komponentách layoutu nedá použít např. záporný margin.

                          1. Radovan

                            RE: Současnost a budoucnost layoutů: CSS tabulky
                            Cakal som na vasu reakciu :)

                            Ja obalovanie chapem, velmi dobre, ale ked sa daju veci vyriesit cisto cez CSS, preco pridavat dalsie zbytocne prvky ? A ked uz ho je treba, tak sa tam da nejaka nevyznamova znacka a ide sa dalej. Len vy o tom hovorite ako o uplnom fakte, ze to je nutne vzdy. Co samozrejme nie je.

                            1. Hoween

                              RE: Současnost a budoucnost layoutů: CSS tabulky
                              Jistě. Řešíme to, že buď můžu layout udělat standardními postupy a pak si s ním můžu dělat co chci. Nebo chci být kchůl, použiju jinak nepoužitelný css-table layout a pak naprosto zbytečně musím obalovat.

                              To, na co narážím, je fakt, že css-table layout byl v článku prezentován jako super výhodný, mimo jiné i co do absence zbytečných značek. Což přestává být pravda ve chvíli, kdy v daném layoutu musím použít záporný margin, protože pak musím komponentu něčím obalit. Což bych u klasického layotu nemusel.

                              1. Martin Hassman

                                RE: Lživé tvrzení
                                je fakt, že css-table layout byl v článku prezentován jako super výhodný

                                To je ovšem lživé tvrzení. Pokud by někdo o tom pochyboval, přečtěte si článek a posuďte sami. Když jsem s Honzou na přípravě článku podílel, chtěl jsem, aby z něj bylo jasné, že tento přístup má své problémy a v textu to jasně zaznělo, je to i v závěru jasně řečeno.

                                1. Hoween

                                  RE: Lživé tvrzení
                                  Mete, dokážeš si připustit, že by "tví redaktoři" nebyli úplně dokonalí, geniální a se slovními obraty vysokoškolských profesorů?

                                  1. Martin Hassman

                                    RE: Lživé tvrzení
                                    Ano jistě, holt nemají genialitu Ensteina a výřečnost Karla Čapka. Ale pokud přesto umí napsat články, které jsou pro českou obec webdesignerů přínosem, jsem s nimi spokojen.

                                    Děkuji, že jsi se nesnažil zbytečně oponovat mému tvrzení.

      2. ma

        RE: Současnost a budoucnost layoutů: CSS tabulky
        Nedavno jsem delal nejaky jednoduchu web, nic sloziteho, par stranek, jedno menu a rekl jsem si ze pouziju CSS kdy se to teda tedka ma delat. Nastudoval jsem tedy prislousnou literaturu a nejak to udelal i kdyz to byl opravdu porod. Mozna ze CSS je elegantnejsi, cistci a ja nevim co jeste vsechno, jenze udelat klasicky tabulkovy layout je proste 100x jednodussi nez se placatit a ladit jednotlive ramy aby to do sebe zapadlo.

        Verim tomu ze clovek ktery se webem zivi bude mit CSS v malicku, bude umet vsechny finty a podobne. Ale ja si chci proste udelat jednoduchy web pro sebe a k tomu mi ty tabulky proste perfektne vyhovuji. Bude to asi stejne jako kdyz programator zacatecnik pracuje v basicu a nejde psat rovnou v cecku…

        1. Radovan

          RE: Současnost a budoucnost layoutů: CSS tabulky
          Presne ako si spomenul. Nezivis sa tym, a teda nie je nutnost a v tvojom pripade ani cas na to, aby si to riesil cez CSS ked vies dizajn natrepat do HTML. Popravde by som to po tebe nechcel upravovat :) ale pre tvoje ucely to staci. A o tom to je.

          1. Hoween

            RE: Současnost a budoucnost layoutů: CSS tabulky
            Popravdě, jakýkoli design je podstatně jednoduší nařezat a nakódovat přes CSS, než staré známé prasení a rozřezávání do hromady zanořených tabulek. Flexibilita takového layoutu je naprosto neporovnatelná.

            1. Radovan

              RE: Současnost a budoucnost layoutů: CSS tabulky
              No ale o tom probleme sme sa momentalne nebavili. Reagoval som na cloveka, ktory sa tymto nezivi a pre jednoduche zverejnenie niekolkych informacii je to naozaj postacujuce. To ako by ste dosli za domacim kutilom a zacali do neho nadavat, ze to co robi robi zle a vy by ste to spravil inak.

  2. harvie

    Tabulky mají i výhody
    0. Tabulky vypadají dobře v textových prohlížečích jako links -g linuxáci spojte se!!! ;o)

    Dále se dá argumentovat i proti nešvarům:
    1. sémanticky layout webu rozhodně nepatří mezi tabulková data
    — to je otázka zvyku
    2. pro změnu v designu webu musím upravovat HTML
    — to nemusí být pravda při použití templatování nebo XSLT (ale to druhé je asi trochu prasárna)
    3. ve většině případů vytváří mnoho zbytečného kódu
    — záleží na složitosti designu – opět bych odkazoval na templaty
    4. daleko hůře se s ním pracuje při tisku nebo na mobilních zařízeních
    — opět záleží na složitosti – dá se přidat css pro mobilní zařízení, které s tímto pomůže…

    1. McBig

      Re: Tabulky mají i výhody
      Sem rád, že nejsem jediný tohoto názoru :)

      a jen dodám
      1) ne jen zvyku ale i pohledu na tabulku obecně, ale to je opravdu o pohledu, který má (a já sem tomu moc rád) každý jiný ;)
      4) s tabulkami sem u mobilních zařízení problém neměl (nenašel sem kde by problém byl)

      1. Hoween

        Re: Tabulky mají i výhody
        Já zase nemám problémy s beztabulkovým layoutem na mobilních prohlížečích – ať už built-in, nebo na Opeře Mini. Hergot co dělám špatně, že všem se jejich table-less layouty na mobilech rozsypávají, zatímco mně ne? Není to jen způsobené tím, že já svou práci umím?

        1. McBig

          Re: Tabulky mají i výhody
          Já nenapsal že to na mobilech nejde bez tabulek, ja napsal že to s nima jde :) (viz komentář na který sem reagoval)

          1. Hoween

            Re: Tabulky mají i výhody
            Aha, takže protože je kodér lempl, tak udělá tabulkový layout a bude se plácat po ramenou, jak mu to všude funguje? Nebo co jste vlastně chtěl říct?

              1. Hoween

                Re: Tabulky mají i výhody
                Vždy rád diskutuji s inteligentními lidmi, jejichž názor není jen tupé plácnutí do vody. Díky.

  3. Jan Jelínek

    RE: Současnost a budoucnost layoutů: CSS tabulky
    Nemůžu si pomoct, ale je to strašně podobné definici tabulek v XAMLu o které jsem tady psal v jenom z minulých příspěvků.

    Dík za článek

  4. Anonym

    CSS nikdy nebylo zamysleno pro layout
    Uzivate CSS nekorektne, nepochopili jste technologii, tak si nestezujte vy magori.

    1. Martin Hassman

      Re: CSS nikdy nebylo zamysleno pro layout
      Myslím, že ten prvotní návrh skutečně nebyl, ale již v počátcích k tomu CSS dokonvergovalo (nemám pořádně nastudováno kdy a jak to probíhalo), proto o nepochopení kaskádových stylů nemůže být ani řeč. Jsou skutečně určeny pro layout.

      1. Anonym

        Re: CSS nikdy nebylo zamysleno pro layout
        W3C preslo z tabulkoveho layoutu na CSS layout az v roce 2002, cimz prokazuje, ze CSS nejsou pro layout urceny a nikdy nebyly, nicmene diky jejich skalovatelnosti a bohatosti je mozne pres ne layout resit – http://www.w3.org/2002/11/homepage

        Teprve CSS3 na tom neco meni.

        Podivejte se, jak W3C resi 3column layout a porovnejte s libovolnym ceskym resenim, vcetne te prasarny v clanku – http://www.w3.org/2002/03/csslayout-howto – co se vam libi vice?

        1. Hoween

          Re: CSS nikdy nebylo zamysleno pro layout
          Čímž prokazuje co? Ten beztabulkový layout už je tam nasazený déle, než jeho tabulkový předchůdce. Navíc na něj přešli v době, kdy vládl IE5.5 a IE6, tedy naprosté CSS bastly.

          Kdyby to nebylo vhodné na layout, myslíte, že by na to přešli?

        2. Martin Hassman

          Re: CSS nikdy nebylo zamysleno pro layout
          Diky moc za dobre odkazy! Presto jako dukazni material pro vase tvrzeni nepostacuji. Nepremyslel jste, ze W3C mohlo prechod na novy layout odkladat, protoze proste cekalo na lepsi podporu v prohlizecich?

          1. Anonym

            Re: CSS nikdy nebylo zamysleno pro layout
            Prechod na CSS layout se mohl odkladat z libovolneho duvodu, nicmene jelikoz vim, jak stranky vypadaly stranky pred takovymi 20-ti lety, kdy zadne vicesloupcove layouty nikdo nemel a vse bylo na jedne strance, kterou kazdy cetl cetl vzdy odzhora dolu, zleva doprava a klikal na textove hyperlinky, tak jsem si jist, ze CSS opravdu nejsou zamysleny pro layout, s vyjimkou verze 3 a vyssi, kde jiz jsou pripraveny atributy slouzici k onomu "sloupcovani" pripraveny. CSS puvodne slouzily pouze k nastaveni barev a atributu textu.

            1. hotovson

              Re: CSS nikdy nebylo zamysleno pro layout
              to by mne zajimalo, kterou to stranku jste pred dvaceti lety videl? bylo to vubec HTML?

              1. Anonym

                Re: CSS nikdy nebylo zamysleno pro layout
                Nejsem si jisty, cca v roce 1990 na VAXu bylo mozne cist prostrednictvim stranek s hyperlinky ruzne novinky ze sveta. Nejspise to byl jen hypertext, ne konkretne HTML, protoze to se nejvice rozsirilo az s HTML+ (priblizne v roce 1995).

  5. Pedro

    Layout
    Ja suhlasim s nazorom Rona Garreta (http://www.flownet.com/ron/css-rant.html) Uz som musel 2x upravovat layout v CSS, a musim povedat, ze keby som to upravoval v HTML (tabulky) bol by som asi tak 5x rychlejsie hotovy. No ale zazil som modu FRAME (ked sa na kazdu sprostost vytvoril vlastny frame, cim viac frejmov, tym lepsie), potom modu TABLE (ked niekto, kto pouzival frejmy bol totalne out, neschopny, a neviem co este), teraz je moda CSS (alebo web2.0, ako vravi moj manager ;) ) …

    1. Martin Hassman

      Re: Na opravdu použitelné možnosti CSS layoutu si ještě počkáme
      Jirko nenapovídej 8-) , tohle se bude řešit v dalším přislíbeném dílu.

    2. Filosof

      Re: Na opravdu použitelné možnosti CSS layoutu si ještě počkáme
      Hlavně to má daleko k praxi.. IE6 a IE7 tu ještě chvíli pobudou..

      1. Hoween

        Re: Na opravdu použitelné možnosti CSS layoutu si ještě počkáme
        Což si ale řada lidí bohužel neuvědomuje. Je krásné jak se tady na Zdrojáku filozofuje "až jednou bude X", "až jednou bude Y", bohužel, všichni tito technologičtí filozofové jsou jen filozofové – chybí kontakt s praxí.

        1. Martin Hassman

          Re: Na opravdu použitelné možnosti CSS layoutu si ještě počkáme
          Nepodceňoval bych inteligenci čtenářů, že by snad nevěděli, jaký je stav IE na trhu a co můžete použít dnes a co je jen pohled do budoucnosti. Je samozřejmě škoda, pokud si to někdo z nich neuvědomí. Snažíme se to zdůrazňovat. Ale možná bychom to mohli zkusit psát nějak výrazněji (třeba červeně).

          1. Hoween

            Re: Na opravdu použitelné možnosti CSS layoutu si ještě počkáme
            Když si vzpomenu na legendárního kompletního průvodce CSS od Staníčka, byla na začátku každé kapitoly jasná a přehledná tabulka, co je kde podporováno. Tento článek je pojatý tak, že s příchodem IE8 budeme moct začít používat css-table layouty. Což je samozřejmě úplná kravina ze dvou důvodů:
            1) Tyto layouty můžeme používat už teď, ale v IE nebudou fungovat – takže v praxi nepoužitelné.
            2) Příchod IE8 nevypne IE7 a IE6, tudíž layouty dělané pomocí css-table opět nebudou v praxi použitelné.

            O inteligenci čtenářů bych si přehnané naděje nedělal. Když si čtu komentáře pod články, jak všichni "děkují" i za články obsahující zjevné nesmysly, tak je vidět, že nad nimi moc nepřemýšlí.

            1. Martin Hassman

              Re: adekvátní vyznění
              Tento článek je pojatý tak, že s příchodem IE8 budeme moct

              Teď jsi mě opravdu zaskočil. Článek jsem procházel před několika dny, tak jsem si musel teď raději zkontrolovat, zda je vše v pořádku. A naštěstí je. V článku je to jasně řečeno.

              Obávám se, že buďto tedy mluvíš o jiném textu, než který vyšel zde na Zdrojáku, nebo jsi článek pořádně nečetl. Když se pořádně dívám, tak naštěstí většina čtenářů článek pochopila dobře, proto nebudu provádět dodatečné úpravy články.

              Každopádně, pokud by měl někdo další snad pocit, že se mýlím, tak mi to prosím napište sem nebo na můj redakční e-mail. Každá zpětná vazba je pro mě důležitá!

              1. Hoween

                Re: adekvátní vyznění

                V souvislosti s blížícím se vydáním Internet Exploreru 8 se začalo hovořit o řešení, které velmi připomíná tabulkový layout.
                Tato věta má poměrně jasné vyznění – IE8 nám umožní toto řešení používat. Což je nesmysl z těch dvou důvodů, které už jsem popsal.

                1. Martin Hassman

                  Re: adekvátní vyznění
                  Zde se jedná o chybnou interpretaci, do které je zapojena jistá dávka fantazie. Ne, ten text je v pořádku a nebudu jej měnit.

                  1. Anonym

                    Re: adekvátní vyznění
                    "V souvislosti s blížícím se vydáním Internet Exploreru 8 se začalo hovořit o řešení, které velmi připomíná tabulkový layout."

                    nahradte vetou

                    "V souvislosti s blížícím se vydáním Firefox 3.5, Chrome 2, Safari 4, Opera 10 se začalo hovořit o řešení, které velmi připomíná tabulkový layout."

                    Teda: preco presne sa o rieseni, ktore velmi pripomina tabulkovy layout zacalo hovorit az s prichodom Internet Explorera 8? A nie s prichodom nejakej verzie ineho z menovanych prehliadacov? Pretoze prichod Internet Explorera 8 znamena PRE ODCHOD Internet Explorera 6 a 7 asi tolko ako prichod Firefoxu 3.5, Chrome 2, Safari 4 a Opery 10 – nic neznamena. Internet Explorer 6 a 7 tu budu este peknych par rokov, a teda tento tabulkovy CSS layout je pre prax nepouzitelny – to vidi kazdy kto sa pozrie na statistiku pouzivanosti prehliadacov a uvedomi si, ako dlho po zaruke je taky dedko ako IE6 este velmi pouzivany.

                    A tym padom je citovana veta uplne irelevantna.

                    1. Jan SládekAutor příspěvku

                      Re: adekvátní vyznění
                      Není na nás posuzovat, proč se o tomto řešení v souvislosti s IE8 začalo mluvit. Prostě začalo. Podle mne je to z toho důvodu, že nyní všechny používané prohlížeče, ve svých posledních verzích, toto řešení podporují a proto je v budoucnu využitelné. Proto je ta věta v úvodu správně a vámi navrhovaná změna není pravdivá. Všechny ostatní prohlížeče už CSS tabulky podporují nějaký ten rok, akorát o tom nikdo nemluvil.

  6. onyx

    CSS i tabulky
    Já osobně používám kombinaci CSS a tabulek, podle toho, co zrovna potřebuju. Nci proti zastáncům úplně beztabulkového rozložení, ale vhodné použití tabulky, která pak byla dále kaskádována pomocí CSS, mi pomohla s řešením, které má tu výhodu, že je snadno čitelné ostaním. Zatím jsem třeba nepřišel na to, jak v CSS kombinovat sloupce s pevnou a proměnnou šířkou, které by fungovalo spolehlivě.

    Co se týká CSS tabulek, tak osobně nevidím moc rozdíl mezi <table> a <div style="display: table;">, <tr> a <div style="display: table-row">, <td> a <div style="display: table-cell">, kromě toho, že varianta s <div> je delší.

    I vzhledem k tomu, že tabulky vznikly právě kvůli vícesloupcové sazbě, bych doporučoval kvůli hlasovým čtečkám rozšířit tag <table> o atribut TYPE, kdy by pak
    <table type="style"> určovalo tabulku pro vzhled a čtečka by jí ignorovala a
    <table type="data"> by určovalo datovou tabulku.

    1. v6ak

      Re: CSS i tabulky
      Rozdíl je v tom, že:
      1) stroje budou v <table…> atd. hledat neexistující sémantickou hodnotu
      2) pokud nepoužiješ style, ale class, pak to můžeš extrahovat do externího CSS a:
      * je možné mít tabulky např. jen pro screen, ale ne pro print
      * kdykoli to můžeš úplně přestylovat bez zásahu do HTML

      Samozřejmě, ani css tables nejsou ideální, ale o tom za chvíli, pokud tu to, co chci napsat, ještě nikdo nenapsal.

      1. BoodOk

        Re: CSS i tabulky
        Ad 2) Ono je ale přece možné přestylovat i TD, TR, TABLE, nemusí to být DIV. Neboli, mezi CSS tabulkou a HTML tabulkou není z hlediska možnosti stylování rozdíl.

      2. Rado2

        Re: CSS i tabulky
        1) Aky stroj by aku semantiku hladal v tabulkach v mojom HTML? Ved HTML je vseobecny znackovaci jazyk pre akekolvek informacie. Nepoznam stroj co zozerie vseobecne HTML a "pochopi ho", pokial ma layout robeny cez CSS.

  7. Martin Michálek

    RE: Současnost a budoucnost layoutů: CSS tabulky
    Díky za prima článek, hlavně o faux absolute position myslím v češtině nicmoc zatím nevyšlo.

    Mám takový obecnější postřeh. My CSS kodéři se často stresujeme tím, že "něco nejde" a rádi se díváme do křišťálové koule, jak "to krásně půjde". Třeba v IE 10. Za nějakých pět let. :)

    Jenže on nás do vymýšlení šílených řešení a těšení se na budoucnost nikdo nenutí – nikdo nás nenutí používat PNG, abychom pak "museli" využívat nějaké hacky pro IE6.

    Stejně tak nás nikdo nenutí kódovat layout, kde je nutné aby byly dva sloupce stejně vysoké. Osobně jsem takový problém řešil naposledy snad před 4 lety. Jako nepůjde hora k Mohamedovi, měl by kodér aktivně komunikovat s designérem, zda se takový layout nedá vyřešit jinak.

    1. Martin Hassman

      RE: Současnost a budoucnost layoutů: CSS tabulky
      Já jsem schválně o faux absolute position něco hledal a řekl bych, že v češtině o něm nevyšlo dokonce vůbec nic a tady na Zdrojáku je to taková jeho česká premiéra (teď nepočítám skvělou přednášku Rikiho Fridricha loni na WebExpu ve slovenštině).

      1. karf

        RE: Současnost a budoucnost layoutů: CSS tabulky
        Jo, tohle dobrá metoda. Od té doby, co to vyšlo na ALA jsem to začal používat pro layout téměř výhradně. Akorát se občas vyskytuje problém u IE6 při použití procentuálního margin-left.

        1. Jan SládekAutor příspěvku

          RE: Současnost a budoucnost layoutů: CSS tabulky
          To se mi ještě nestalo. Můžete prosím poskytnou nějakou ukázku kódu, která tento problém má? (Jediné co mě napadá, že by to mohlo způsobovat, je v tuto chvíli double-margin bug, který se v IE vyskytuje právě při aplikování marginu na stejné straně, jako je nastavené float. Ale ten by se měl projevovat při použití jakýchkoli jednotek, ne jen %.)

          1. karf

            RE: Současnost a budoucnost layoutů: CSS tabulky
            Ech, rozbité layouty si neschovávám, musel bych zalovit v svn starších projektů (u aktuálních bych zas nerad dával ven vývojové verze zatím nespuštěných klientských webů). Pokud o to hodně stojíte, zkusím to někde vyhrabat. Double margin bug to nebyl, zkoušel jsem na to obvyklé triky, ale zabralo mi vždycky jen nastavení pozice v px (tedy např. -960px namísto -100%). Děláme jen fixní layouty, takže tam je to jedno. Blíž jsem to nezkoumal, ale asi to bude nějakou konstelací různých CSS vlastností a zanoření, protože se mi to stalo jen párkrát, jindy to funguje. Taky mi to myslím pravidelně blblo v IE6, když jsem chtěl takto pozicovat formulářové prvky (inputy), musel jsem ho obalit divem.

            1. Jan SládekAutor příspěvku

              RE: Současnost a budoucnost layoutů: CSS tabulky
              Určitě mne to zajímá, takže bych byl za nějaké kód, kde to zlobí, vděčný. Samozřejmě to nemusí být zde veřejně, můj email je Vám plně k dispozici. Díky.

      2. Anonym

        RE: Současnost a budoucnost layoutů: CSS tabulky
        O faux absolute position jsem neslyšel, ale už pár let používám např.

        #main {
        width: 590px;
        float: left;
        position: relative;
        left:180px; top:0;
        }

        #side {
        width: 180px;
        float: left;
        position: relative;
        left: -630px; top:0;
        }

        #otherside {
        width: 180px;
        float: right;
        position: relative;
        right: 0; top:0;
        }

        což mi umožňuje zvolit si pořadí sloupců jak potřebuji a vím že nejsem sám kdo to takto používá. Nebo nevidím nějaký podstatný rozdíl?

        1. Ivorius

          RE: Současnost a budoucnost layoutů: CSS tabulky
          Zapomněl jsem se podepsat, nechtěl jsem zůstat v anonymitě :D Ivo Toman

        2. Jan SládekAutor příspěvku

          RE: Současnost a budoucnost layoutů: CSS tabulky
          Vaše řešení je hodně podobné. Jediný rozdíl oproti faux absolute position je v tom, že vy prvky posouváte relativně proti jejich původní pozici na obrazovce (tudíž jí musíte znát a pak spočítat, kam co a jak posunout). Faux absolute position na to jde tak, že prvek vyhodíte pryč a poté znáte jeho přesnou pozici (nachází se na kraji plátna/obrazovky) a posunutí nazpět pak zadáváte tak, že zadáte přesný počet px/em/%/čehokoli jiného od toho okraje obrazovky. Osobně mi pak přijde pozice v kódu jasnější.

          A ještě mě napadá, že u faux absolute position se mi nemůže stát, že by mi poslední box odskočil dolů (protože ty před ním se tam již nenachází, jsou vyjmuty z toku dokumentu). U vašeho řešení, pokud se seknete o pixel v počítané šířce a box by se do řádku nevešel, tak skočí pod ty dva boxy před ním, je to tak?

          1. Ivorius

            RE: Současnost a budoucnost layoutů: CSS tabulky
            Pro pixel perfect návrhy bych řekl, že je snadnější to moje řešení, ale možná to je tím, že ho používám skoro denně a jsem proto na něj zvyklý.

            Jinak podsunutí samozřejmě nehrozí, neboť je to na úplně identickém principu jako faux absolute position (prvky se můžou klidně překrývat – jak je libo:)). Jediný rozdíl vidím v tom, že v tom řešení se to nejprve zasune mimo a pak vrací namísto, kdežto já to rovnou pozicuji bez zasouvání a musím u jednoho prvku pak počítat s předešlým prvkem.

            Jako určitě to má něco do sebe, jen mě překvapilo jakože co to za převratnou techniku ve světě objevili, když v ČR se se obdoba už pár let používá :)

            1. Martin Hassman

              máte nápad? Podělte se o něj. A třeba na Zdrojáku

              Inu používá-nepoužívá, o faux absolute position bychom také nevěděli, pokud by jeden z jeho autorů nenapsal onen jeden zmiňovaný článek na A List Apart. Existuje spousta zajímavých myšlenek a nápadů (a možná bychom se divili, kolik jich je), o který se neví, a které budeme muset znovu objevit, protože nebyly zveřejněny.

              Pokud kdokoliv má nápad, o kterém si myslí, že by stálo za to se o něj podělit s ostatními, nabízím mu na Zdrojáku prostor.

              A pokud se ten nápad ujme, můžeme začít přemýšlet, jak jej zapropagovat dál do světa. Pokud si své nápady nechá někdo pro sebe, tak s ním možná jednou zemřou – a to by byla škoda.

              1. karf

                Re: máte nápad? Podělte se o něj. A třeba na Zdrojáku
                Aniž bych chtěl nějak shazovat nápad s "faux absolute position", který je fakt šikovný, jsem si jistý, že tu samou techniku jistě používali mnozí dávno před tím, než to někdo objevil a publikoval na ALA pod tímhle sexy názvem. Stovky lidí denně používají tisíce různých triků, které třeba druhý den zapomenou a vůbec jim nepřijde, že objevili něco nového. Ono to CSS zas taková věda není :)

                1. Martin Hassman

                  Re: máte nápad? Podělte se o něj. A třeba na Zdrojáku
                  Prilis nepochybuji, ze to nekteri lide drive pouzivali, at uz v blederuzove nebo v oranzovomodrevariante nebo nekdo treba i na puntik stejne. Ale zrejme jen jeden clovek dostal napad, ze je to univerzalni reseni, ktere by se to mohlo i ostatnim a podelil se o nej s nimi. A zatimco na tech pripadnych predchudcich (at uz jich byly desitky nebo stovky) vubec nesejde (a kdyby na to reseni neprisli, tak by se asi nic nezmenilo), tak na tomhle jedinem cloveku ano. Tak je to i s vynalezy a se vsim.

              2. McBig

                Re: máte nápad? Podělte se o něj. A třeba na Zdrojáku
                Zní to nejspíš logicky, ale používá někdo z Vás třeba toto? Napadlo mě to při světlé chvilce když člověk nad tím celým malinko uvažuje ;)

                .row { clear:both; }
                .cell { float: left;}

                prostě tabulka akorát ve stylech (řádky obsahují buňky). V IE6 se to chová trochu zvláštně (někde mimo buňku se musí napsat nějakej znak :D jinak to dělá mezi řádky mezeru.

  8. benzin

    To vse funguje ale...
    Doku do stranek nezacnete psat dynamicky data, tak je css uplne v klidu a dobre reseni. Horsi situace nastane, kdyz zacnete do stranek sypat data dinamicka a nevite predem, jak bude ten ktery sloupecek siroky a vysoky, ale pritom potrebujete aby se mu ostatni prizpusobily. Napr. ten design odkazovany jako ukazka (prohazovani sloupecku) je naprosto nepouzitelny, kdyz nevite kolik tech sloupcu bude a jakou budou mit sirku.

    Tabulky v css, urcite je to krok kupredu, ale nemyslim ze az tak dlouhy. Jak to bude resit collspany? Navic porad budu nucen uzavirat bunky do radku. Sice to resi rozmisteni bunek v radku, ale naprosto to neresi rozmisteni bunek v cele strance. Zkuste udelat transpozici treba toho layautu co je na rootu, moc daleko nedojdete.

    Skutecne kdyz budu chtit totalne prekopat layout, tak nejlepsi cesta XML -> XSLT (jiny transformator) -> HTML (XHTML). Dokonce uprava (resp. nove napsani) transformacni sablony bude vyrazne snazsi.

  9. Rado2

    Vraj vo FX neni problem?
    Prave FX 3.0.7 mi tu ukazku zobrazil blbo, posledny stlpec bol zobrazeny maly a medzi patickou a prym stlpcom. V IE8 to bolo ok.
    Skusil som to teraz znovu v novom okne a na druhy pokus to zvladol aj FX.
    Takze tiez sa na to neda 100% spolahnut.

    1. Martin Hassman

      Re: Vraj vo FX neni problem?
      To je zajímavé, můžete poslat screenshot? Já to ve Firefoxu 3.0.7 vidím v pořádku.

      1. Rado2

        Re: Vraj vo FX neni problem?
        Takto vyzeralo len prve zobrazenie, mozno to bola nahoda a zle sa nacitalo html, alebo css. Ked som to otvoril v novom okne, uz to slo, a uz ked to teraz skusam otvarat, uz mi to stale zobrazuje spravne. Z prveho pokusu som SS nerobil a zavrel som to. Skoda.

        1. Martin Hassman

          Re: Vraj vo FX neni problem?
          Pokud se problem neopakuje, tak odhaduji, ze to mozna byl jen nejaky pozustatek reflow bugu Firefox, ktery se jen jednou za cas objevi.

          1. Jan Vaněk jr.

            Re: Vraj vo FX neni problem?
            Já mám ve FF2 problémy při vypnutých obrázcích; po reloadu se to zdá OK.

        2. sid

          Re: Vraj vo FX neni problem?
          Me se stalo neco podobneho. Ctvrty sloupec byl az uplne dole pod prvnim sloupcem. Reload to take vyresil.

  10. Rado2

    Layout
    Niekolko rokov som web nerobil, takze era CSS layoutov ma obisla. Teraz to trochu skusam, ale neprisiel som na to , ak riesit napr. 2-stlpcovy layout (napr. formular), kde nechcem zadavat sirky stlpcov, aby som nemusel sledovat co je ako siroke pri akom fonte (popisy poloziek sa mozu vkladat z databazy podla vybraneho jazyka).
    Nemam rad weby robene na pevnu sirku. Pri lepsom rozliseni su to potom zbytocne dlhe uzke klobasy, co nevyuziju plochu monitora. Da sa bez tabuliek spravit v CSS napr. 3 stlpcovy layout, kde stredny stlpec ma automaticku sirku na max. vyuzitie sirky okna?

    1. Smasty

      Re: Layout

      Da sa bez tabuliek spravit v CSS napr. 3 stlpcovy layout, kde stredny stlpec ma automaticku sirku na max. vyuzitie sirky okna?

      Samozrejme, ze sa to da. A nie je to vobec zlozite. pouzijes absolutne pozicovanie. Asi to pojde aj s pouzitim float, ale to sm neskusal.
      Tu si to mozes vyskusat.

        1. Hoween

          Re: Layout
          Změnilo by se něco, kdybych jí nenapsal? Pouze jsem tou větou konstatoval stav, nic jiného. Kdybych ovšem ve druhé větě napsal "jste css guru", pak by vše bylo v pořádku, že?

          Je vidět, že komentáře, ve kterých se nechválí a neleze do zadku, jsou na Zdrojáku "nevhodné" a řadě lidí dělá problém přijmout vlastní kritiku.

          1. Logik

            Re: Layout
            Ne, je vidět, že neumíš slušně odpovědět na slušně položenej dotaz.

            PS: Neni problém v tom, že je to kritika, problém je v tom, že je to neoprávněná kritika. Když někdo napíše špatnej článek, tak je správný upozornit na chyby. Když se ale někdo ptá, tak očividně proto, že neví. Extra na to poukazovat je buranství. Navíc je to věc, která tady nikoho nezajímá….
            PPS: Rozdíl mého a Tvého předchozího příspěvku je v tom, že autor dotazu si je svojí nevědomosti evidentně vědomej, zatímco Ty úrovně svého vystupování nikoli…

          2. Karell

            Re: Layout
            Konstatoval jste stav, ktery byl zjevny uz z puvodniho prispevku, sam autor to tam napsal. Nic mu to tedy nedalo, nebyla to konstruktivni kritika. Spis to vypada, ze jste si potreboval pohladit zakomplexovane ego (ostatne ne poprve). Ale kdyz se to schova za kritiku, tak to vypada lip, zejo. Jaky je to pocit takhle to zacatecnikovi nandat?

            Mozna by se usetrilo hodne mista v diskuzich, kdyby kazdy napsal do profilu nebo ke svemu prispevku, jak hodne zvlada CSS a weby obecne. Pokud to neni schopen posoudit, tak si tam napsat co o nem prohlasil profik Hoween. Pak by to Hoween nemusel porad dokola opakovat (mozna).

            abych to nezdrzoval, tak me znalosti CSS jsou take velmi velmi bidne

          3. Ondřej Mirtes

            Re: Layout
            Seš šťastný? Netrpíš komplexy?

            Jaké typy článků by tě uspokojily? Proč sám nepublikuješ a umíš jen kritizovat?

            1. Hoween

              Re: Layout
              Grudl, Staníček, ano, i Met píšou vynikající články. Pejša, Sedlák, to je jeden velký nesmyslný brak.

              Stačí to takhle?

  11. Martin Soukup

    vymýšlení dávno vymyšleného
    Nechápu tyhle lidi odtržené od reality, kteří se stále neúspěšně snaží vymyslet dávno vymyšlené.

    Každý GUI framework musí řešit pozicování prvků při změně velikosti okna. Zkusilo se toho hodně a fungující řešení v podstatě již dávno bylo nalezeno. Nějaký layout manager obsahuje dnes každý jazyk s frameworkem pro tvorbu GUI, ať je to Java, .NET, Flex, cokoliv…. O flexibilitě těchto layout managerů se HTML a CSS nikdy ani nesnilo.

    Proč to nejde jednoduše převzít? Je to dávno vymyšlené a praxí vyzkoušené. Osvědčilo se to! Jdou tak udělat i ty nejsložitější designy! Někteří zoufalci dokonce layout manager implementovali i v javascriptu:

    http://www.ruzee.com/files/lmex/test.html
    http://blog.xilinus.com/layoutmanager/samples/embed.html

    PROČ TO V CSS UŽ DÁVNO NENÍ NATIVNĚ?

    1. Rado2

      Re: vymýšlení dávno vymyšleného
      Zaujimave linky, ale neriesia male okno. Ked sa uz pri zmensovani zacnu bloky prekryvat, malo by sa zmensovanie zastavit a pouzivat scroll bary na cele okno

    2. Martin Hassman

      Re: vymýšlení dávno vymyšleného
      Proč to v CSS není? Na to není příliš složitá odpověď. Stávající CSS2 a nižší to neobsahuje v celku logicky, protože tehdy se představou CSS pro layout webových aplikací nikdo až tak moc nezabýval (je to konec devadesátých let). A pro layout dokumentů, se kterými se tehdy kalkulovalo, to prostě stačí. Později již jakési návrhy počítající i se flexibilitou vznikly a ukáže je příští pokračování tohoto článku.

      Obecně se tu objevila propast webdesigneři vs. vývojáři – řada webdesignerů si na problémy zvykla, umí je "nějak" řešit, sžili se s tím a už si pořádně neuvědomují, v jakém blátě se to brodí – přestalo jim prostě smrdět. Naopak vývojáři, kteří právě pracují s tvorbou layoutu pro jiná prostředí, nechápou, jak mohou webdesigneři v něčem takovém vůbec pracovat. Nejlíp se to pozná, když posadíte tyhle dva lidi vedle sebe, jeden se pak nestačí divit. Někdy si myslím, jestli není škoda, že se do CSS WG nenahrnulo pár desktopových vývojářů, aby zkusili lepší řešení. Možná by s ním nepřišli, ale za pokus by to stálo.

    3. Anonym

      Re: vymýšlení dávno vymyšleného
      "PROČ TO V CSS UŽ DÁVNO NENÍ NATIVNĚ?"
      Asi preto ze webstranka az donedavna nebola GUI ale dokument? Mame v Microsoft Word nastroje na tvorbu GUI?

      1. Martin Soukup

        Re: vymýšlení dávno vymyšleného
        Jen jestli to spíš není tím, že webstránky jsou odjakživa gui, jen si to nikdo neuvědomil.

        Má snad dopis babičce hlavní menu?

        1. Martin Hassman

          Re: vymýšlení dávno vymyšleného
          Jen jestli to spíš není tím, že webstránky jsou odjakživa gui, jen si to nikdo neuvědomil.

          To je vtipný názor, ale nepravdivý. Podívejte se na začátky webu a poznáte sám. Skutečně se jednalo o dokumenty, žádné aplikace. Dokonce na začátku neexistoval žádný způsob jak definovat layout – mezi nejpokročilejší designové prvky patřilo oddělení odstavců nebo vytvoření seznamu.

    4. protectorz

      Re: vymýšlení dávno vymyšleného
      Design zajimavy az do doby nez zacnu hybat s velikosti okna prohlizece. Najednou se to chova jako kaca na spagate.

    1. Martin Hassman

      Re: přijde HTML5...
      HTML v mechanismu tvorby layoutu nic nezmění. Vůbec nic. Přinese řadu novinek (např. nové sémantické značky), ale mechanismu pro tvorby layoutu se to nedotkne.

        1. Martin Hassman

          Re: přijde HTML5...
          Díky za odkaz. Tenhle článek od Lachyho popisuje ony nové sémantické značky, na které jsemu pozorňoval. Oproti stávajícím divům nesou navíc jen sémantickou hondotu. Na jejich stylování se nic nemění. V tomto ohledu zůstanou veškerá dnes platná tvrzení stále platná.

  12. mofo

    problém CSS layoutu jsou lidi
    problém CSS layoutu jsou lidi. jednak nedokáží rozlišit mezi layoutem a mezi zobrazením dat, stejně jako zde v mnoha příspěvcích, jednak se pořád někdo snaží dělat nová, neotřelá, originální a jánevím jaká ještě řešení, která ovšem nejsou obecně spolehlivě interpretovatelná a tudíž jsou nepoužitelná.

    imho css tabulky nejsou žádnou vizí do budoucnam, jsou jednou z mnoha cest do pekel. šťastnou cestu.

    1. Hoween

      Re: problém CSS layoutu jsou lidi
      Amen. A teď to těm filozofům a autorům skvělých neotřelých řešení ještě vysvětlete :-)

      1. mofo

        Re: problém CSS layoutu jsou lidi
        komu? tady polovina lidí css minimálně docela dobře rozumí, ale druhá je totálně mimo. jedněm není proč a druhým nemá smysl cokoliv vysvětlovat.

  13. v6ak

    Pár problémů s CSS tables a pár řešení
    Asi tu nepadlo pár nevýhod, navíc bych měl pro některé řešení, ale asi ne pro IE8.
    * Nenapadlo vás řešit position: relative pomocí vnořeného divu? Ano, nemůžu použít bottom. To by možná spravilo height: 100%, ale mám pocit, že to tak nejde. Jinak prezentační HTML by mohlo jít vyřešit pomocí XBL, což není jen současnost ve Firefoxu, ale snad i budoucnost od W3C. Stav neznám.
    * Možná o tom někdo psal, ale je tu asi problém s poradím sloupců. Na to je taky nějaká -moz vlastnost a možná to bude později i podle W3C CSS. Takže to taky asi nebude problém.
    * Horší to bude se složitějším rozložením, kde nás prezentačního html nezbaví asi ani XBL. Trošku asi pomůže :after, content:""; a display: block;.
    V každém případě nás do většího či menšího nasazení čeká delší doba a dnes je odvážné odhadovat, jak to dopadne.

    1. Hoween

      Re: Holy grail
      Ano, CSS 2.1 už v současné době není omezující v ničem a dá se v něm udělat opravdu jakýkoli layout. Záleží jen na tom, jestli si s tím chci dát tu práci, nebo začnu vymýšlet ptákoviny typu css-table a svádět vlastní neschopnost na CSS.

    2. Jan SládekAutor příspěvku

      Re: Holy grail
      Věta "není to jednoduché" je přesně to, na co jsem v článku narážel. :) Ani jednou neříkám, že to nejde provést, samozřejmě že lze a několikrát jsem to použil. Ale zkrátka je to poměrně složitý postup, který vymyslí a pochopí skutečně až poměrně zkušený kodér.

      Mimo jiné, majoritní většina dnešních řešení stejně vysokých sloupců přidává do kódu nějaké další HTML tagy (obvykle divy), které by jinak byly zcela zbytečné. Jako obvykle si chytří a vynalézaví kodéři našli způsob, jak slabinu CSS obejít, což ale neznamená, že by to nechtěli řešit daleko snadněji a jednodušeji. Tím ale nechci říct, že CSS tabulky jsou nějaké řešení tohoto problému. Závěr celého dnešního článku zní, že dnes nakódovat některé layouty je zkrátka složité a že by to do budoucna chtělo nějaké lepší řešení. A na tom se snad shodneme všichni :)

      1. Rado2

        Re: Holy grail
        Hm no ale pridavanie dalsich tagov je uz potom to iste ako tabulky, akurat sa mi to zda menej prehladne, s CSS hackmi. Tiez tam neni len "semantika" a treba menit HTML.
        Nemal by "semanticky" CSS layout vyzerat takto?

        <div class="text">text</div>
        <div class="navigacia">menu…</div>
        <div class="reklamy">img…</div>

        a potom uz len zmenami v .css vytvorit *lubovolny* layout?
        Mozno sa teraz pytam blbost, nechcem teraz zacinat flame tabulky vs CSS, este raz pripominam ze sa ciastocne vraciam k HTML po dost vela rokoch :)

        1. Jan SládekAutor příspěvku

          Re: Holy grail
          Vždyť „ořezaný“ příklad u CSS tabulek vypadá přesně tak, jak píšete. A jinak mám na problematiku stejný názor, přidávání tagů jen kvůli tomu, že potřebuji stvořit nějaký grafický efekt není ideální (ovšem dnes to je také většinou zcela nezbytné).

          Btw. DIV také není ta ideální sémantická značka, kterou bych měl použít. Takový >article< návrhu HTML5 je mnohem sémantičtější :)

  14. TrSek

    Webdesigneri ako najdolezitejsi ludia na svete
    Nic v zlom ale nie je nacase trochu nad sebou porozmyslat?
    1. To ze CSS nedokaze nahradit table layout len dokazuje ze CSS ma pred sebou este dlhu cestu.
    2. Nezabudli ste nato ze webdesing ma len sprostretkovat data od zdroja k uzivatelovi?
    3. Mne sa zda ze webd. precenuju svoju dolezitost. Hlavne poznamky o tom ze navrhari su prasata, koderi su prasata, amatersky tvorcovia stranok co robia v table su prasata.

    PS: Ja cakam kedy konecne bude kucharka ktora povie ak chces table pouzij tento CSS bude fungovat uplne rovnako uplne vsade. Pokial toto nebude tak reci o prasatach co tvoria cez table si nechajte pre svoje deti na doma.

  15. tobik

    K čemu Faux absolute position?

    nevím, co je na tomto řešení tak úžasného,
    http://pastebin.com/f668e382b funguje v podstatě stejně,
    pouze je kratší. (omlouvám se za pastebin, nepodařilo se mi
    vložit zdroják do příspěvku, pořád to hlásilo spam).

    Také s různou délkou sloupců jsem nikdy neměl výrazné
    problémy. K čemu potřebujeme, aby byly sloupce stejně dlouhé?
    Pokud je celý web jednolitou barvou, tak k ničemu. A když se
    jedná o grafické rozlišení dvou sloupců, prostě stačí dát
    nadřazenému divu na pozadí ten správný obrázek. To samozřejmě už
    není jen čisté css, nicméně pokud je design webu tak jako tak grafický,
    je to jedno. Samozřejmě, toto bude fungovat jen na fixní nebo
    aspoň napůl fixní layout, tomu se holt musí stránka přizpůsobit.

    CSS layouty jsou plně dostačující už teď, tak jak jsou. Fixní
    nebo flexibilní layouty jsou úplně jednoduchoučké, pouze
    jejich kombinace se řeší trochu kostrbatě.

    CSS má mezery někde jinde (nebo je mám já ve vzdělání).
    Netušíte někdo, jak vytvořit horizontální css menu tak, aby se
    chovalo přesně jako v tabulce? Tzn. jednotlivé položky se
    automaticky roztáhly na celou šířku menu a šířky jednotlivých
    položek aby odpovídaly délce textu uvnitř.

    1. Radovan

      Re: K čemu Faux absolute position?
      Uzasne je na tom to, ze to s HTML tabulkami ma len podobne chovanie :)

      Layouty, ktore maju hodnotu obtekania maju taku vlasnost, ze obsah, ktory sa v nom nachadza a je vacsi ako samotny nadradeny element tak jednoducho pretecie prec.

      A co sa tyka automatickeho roztiahnutia na celu dovolenu dlzku:

      ul {
      display: table;
      width: 100%;
      }
      ul li {
      display: table-cell;
      }

      Ze by to tie tabulky boli taka strasna sprostost ? Ts ts ts

      1. tobik

        Re: K čemu Faux absolute position?
        To řešení ohledně horizontálního menu jsem myslel funkční ve všech nejrozšířenějších prohlížečích, tzn. včetně IE6 a IE7, které tuto vlastnost bohužel nepodporují (viz článek) ;)

        Samozřejmě že tabulky zas takové zlo nejsou, pokud jsou udělané dobře, nicméně pořád mám rád sémantický web a tabulky prostě na layout nejsou určeny. Kromě toho pokud chci mít hlavní obsah ve zdrojáku zcela nahoře, řešit se to musí také pomocí prapodivných hacků, takže žádná krása. Osobně jsem s možností tvorby layoutů v css poměrně spokojený.

        Také si myslím, že pokud se v rámci sloupce objeví objekt širší, než samotný sloupec, je někde chyba ;) Dočasně se to dá ošetřit pomocí overflow.

        1. Radovan

          Re: K čemu Faux absolute position?
          Ale ty si nepochopil princip CSS tabuliek. CSS sluzi na definovanie vizualnej casti webovej stranky, cize nie su to iste ako HTML tabulky, ktore definuju obsahovu a vyznamovu cast dokumentu. Inak nechapem ako ti moznost CSS tabulky narusa semantickost webu, vysvetlis mi prosim ? Uz vyssie som spominal, ze pre uzitie obtekaneho alebo tabulkoveho dizajnu sa v HTML nezmeni ani bodka.

          Co sa tyka pretecenia vnoreneho objektu za objekt nadradeny tak je to uplne bezne. Velke tabulky, nezalomitelne slova (ktore by zalomenim stratili vyznam), komplikovanejsie grafy, atd… A je to uplne bezne pri CMS.

          Co sa tyka riesenia problemu. Co ti brani nad tym porozmyslat ?

          pre IE definujes toto

          ul li {
          display: inline-block;
          }

          $("ul li").width( ($("ul").width() / $("ul li").length )

          A to som ti dal uplne riesenie. A ani nebolo treba o tom zbytocne rozpravat.

          1. tobik

            Re: K čemu Faux absolute position?
            Tady totiž došlo k drobnému nedorozumění z mé strany, za což se omlouvám :) V "Ze by to tie tabulky boli taka strasna sprostost ? Ts ts ts" jsem se mylně domníval, že mluvíš o HTML tabulkách a podle toho jsem reagoval. Samozřejmě proti CSS tabulkám nic nemám a těším se, až budou plně podporované.

            K tomu přetečení: nevybavuji si, že by nějaké kvalitnější stránky měnily rozložení webové stránky kvůli širšímu obrázku v jednom ze sloupců. Na ošetření příliš velkých obrázků a grafů tady máme ten overflow a stejně si myslím, že administrátor webu či přímo CMS by si měl šířku těchto objektů ohlídat. A co se týče nezalomitelných slov, takových, co by se nevešly do průměrného postranního pruhu, je opravdu málo. A i tak se to dá ošetřit opět pomocí overflow.

            O display:inline-block jsem dosud neslyšel, děkuji za tip:)

    2. pepa

      Re: K čemu Faux absolute position?

      Sila FAP je v tom, ze poradi sloupcu na obrazovce muze byt uplne jine nez
      poradi divu v html kodu. css napisete jednou, ale html kod muzete libovolne
      preskladat.

  16. cleb

    RE: Současnost a budoucnost layoutů: CSS tabulky
    Ve w3 se můžou třeba rozkrájet a vymyslet dokonalý způsob layoutu, ale nebude to nic platné. Dokud bude většina uživatelů používat dokonalý, nejlepší, a jediný správný operační systém windows xp, samozřejmě s IE6, tak je to úplně k ničemu.

    1. Martin Hassman

      RE: Současnost a budoucnost layoutů: CSS tabulky
      Nezapomeňte, že nový systém se musí napřed vymyslet, aby mohl být implementován. Každý starší prohlížeče dříve či později vymizí. Ano, někdy to trvá neuvěřitelně dlouho, ale pochopitelně to není důvod k tomu, aby se nehledalo lepší řešení.

  17. xurpha

    CSS je prasárna
    Je to (podobně jako třeba javascript, DOM, atd., atd.) nedomyšlený podnik; to se nikdo nedokázal pořádně navrhnout a vymyslet systém, který by byl nějak kompletní? Vezměme třeba floaty. Proč např. není možné, pokud mám něco jako:

    <div>
    <div class="a">…</div>
    <div class="b">…</div>
    </div>

    nastavit div s class="b", aby "floutoval" nad úroveň prvního divu?

    A takových příkladů by bylo spousta, spousta…

    1. Jirka Kosek

      Re: CSS je prasárna
      CSS není prasárna, ale jednoduchý stylový jazyk, který má pouze prezentační část, ale téměř postrádá možnosti transformace vstupního dokumentu před zobrazením. Pomocí transformace je možné dělat věci jako měnit pořadí zobrazených dat, dopočítávat dynamicky hodnoty apod.

      Pokud potřebujete dělat takovéhle věci, musíte sáhnout po nějakém silnějším nástroji jako je XSL nebo DSSSL.

  18. pepa

    a co tisk
    Co myslíte, půjde příklad tohoto layoutu vytisknout? Pokud bude jen na jedné papírové stránce ANO. Zkusil jsem zvětšit výšku stránky tak aby zasahovala na dvě tiskové strany, a pomocí náhledu tisku jsem to zkontroloval. Safari a Chrome jako jedinné browsery vytiskly obě strany bezchybně. FF3 i Opera renderuje jen první stranu, druhou stranu má prázdnou, IE8 "vysoký sloupec" vytiskl samostatně (tedy 4 strany).

    Velké bloky formátované pomocí "float" dělají někdy potíže při tisku, proto bych byl opatrný zejména na stránkách, které mají hodnotu a je předpoklad, že je čtenář bude tisknout.

    V HTML citelně chybí element (tag): layout, nebo grid. Náhradní řešení pak vyvolávají spoustu emocí.

    1. Jan SládekAutor příspěvku

      Re: a co tisk
      Toto se obvykle řeší alternativním tiskovým stylem. Při tisku je totiž záhodno spoustu informací ze stránky schovat (barvy, irelevantní obrázky atd) a nechat jen to důležité – tedy obsah. A při tisku poté mohu samozřejmě naformátovat stránku zcela jinak. Např. tak, že žádné sloupce mít nebude, což mě osobně přijde jako správné řešení.

  19. Daniel Steigerwald

    CSS v roce 2009
    Poslední dobou jsem se musel CSS opět zabývat trochu více do hloubky a překvapilo mne co vše je možné:
    – display: inline-block i pro IE6 a FF2 (layout a moz proprietary)
    – png v IE6 bez javascriptu (via vml)
    – libovolné pořadí sloupců (stačí float a margin)
    – stejná výška sousedních bloků podle obsahu (wrapper s overflow hidden; blokům padding-bottom:10000px; margin-bottom:-10000px;)
    A naopak co není možné :), není možné v IE6 i 7 používat UL LI. Při nestování se mohou objevit takové renderovací problémy, že ani zoom, ni position nepomůže. (pomůže pouze float a to už je moc)

  20. Jakub Vrána

    Hlavní nevýhoda tabulek
    Za nejdůležitější nevýhodu tabulkového layoutu (tedy HTML tabulek) považuji pomalost zobrazení stránky. Vzhledem k tomu, že prohlížeče stránku zobrazí až po načtení celé tabulky (nebo přinejmenším jednoho jejího řádku), tak se stránka uzavřená do jedné velké tabulky zobrazí až po jejím celém načtení. Dojem uživatele je tak mnohem horší – má pocit, že se nic neděje, zkouší refresh, …

    Bez tabulek se stránka zobrazuje průběžně.

  21. pepa

    Nefunguje v IE6

    ani zde uvedena ukazka nefunguje v IE6. Podarilo se mi sice rozfungovat
    sloupce v IE6, ale nelze „vyclearovat“ dalsi tok dat a ta se pak ukazuji
    zapadla pod sloupci (obal sloupcu ma chybne nulovou vysku) Nema nekdo reseni?
    Clear pouzit nelze.

Napsat komentář

Tato diskuse je již příliš stará, pravděpodobně již vám nikdo neodpoví. Pokud se chcete na něco zeptat, použijte diskusní server Devel.cz

Zdroj: https://www.zdrojak.cz/?p=2959