Devel.cz Lupa Měšec Podnikatel Root Zdroják.cz DigiZone Slunečnice Vitalia TopDrive KupDnes Navrcholu NovýTarif Dobrý web Weblogy Woko Jagg Computer.cz SK: MojeLinky

Hlavní navigace

Vlákno názorů k článku
Současnost a budoucnost layoutů: CSS tabulky

Martin Michálek aura:85
12. 3. 2009 10:06

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.
Martin Hassman aura:85
12. 3. 2009 10:15

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ě).
Karel Fučík aura:94
12. 3. 2009 11:12

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.
Jan Sládek aura:94
12. 3. 2009 16:00

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 %.)
Karel Fučík aura:94
12. 3. 2009 19:49

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.
Jan Sládek aura:94
12. 3. 2009 20:06

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.
uživatel si přál zůstat v anonymitě 77.48.74.---
12. 3. 2009 13:14

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?
Ivorius
Ivorius (neregistrovaný) 77.48.74.---
12. 3. 2009 13:16

RE: Současnost a budoucnost layoutů: CSS tabulky

Zapomněl jsem se podepsat, nechtěl jsem zůstat v anonymitě :D Ivo Toman
Jan Sládek aura:94
12. 3. 2009 15:52

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?
Ivorius
Ivorius (neregistrovaný) 77.48.74.---
12. 3. 2009 16:44

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á :)
Martin Hassman aura:85
12. 3. 2009 16:52

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.

Karel Fučík aura:94
12. 3. 2009 20:14

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í :)
Martin Hassman aura:85
12. 3. 2009 20:27

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.
Ondřej Tůma
13. 3. 2009 0:11

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.
Zasílat nově přidané příspěvky e-mailem