ipsace i tiskace

roj.bloguje.czesky!

Plovoucí obsah

Rubrika tiskace
Známka 0 (0)
Pokračování předchozího spotu, k němuž mě vyprovokoval komentář dgxe.

"Proč se ti nelíbí metoda plovoucích bloků.. ?"

Možná je to částečně způsobeno iracionální ideologií. Něco jako nešlapat na chodníku na spáry mezi dlažebními kostkami. Dávat si biftek doprava, přílohu doleva. Sledovat africké porno s nasazeným preservativem.

"Plovoucí blok je vyjmut z toku dokumentu", věta, která mi utkvěla v toku poznání, když jsem louskal kultovní Pixyho knížku. (už je nová?)

Plovoucí blok
Tím, že je vyjmut z toku spotu, chová se spot, jako kdyby v něm plovoucí blok vůbec nebyl. Spot si klidně skončí, i když plovoucí blok pokračuje hluboko dolů, třeba 68 cm pod místo, kde začal. A vy ten mateřský blok žádným způsobem nedonutíte, aby se svým koncem "počkal" na konec plovoucího bloku.

Jediné, co můžete udělat, je umístit do spotu další objekt, který bude mít nastaven clear: right

Ale to nic nemění na tom, že bez této berličky se neobejdete.

Plovoucí bloky navíc mají některé nepředvítatelné vlastnosti. (čtěte ve dvou třetinách textu – harcore CSS octavce)

Plovoucí blog má své původní určení – být obtékán textem. Nikoliv dělat lejout. Jako tabulky. Věci je dobré používat k účelům, pro které byly vymyšleny. Jako tabulky.

Takže udělám-li plovoucí hlavní obsah a chci-li něco umístit na konec hlavního obsahu (patičku), musím to umístit dovnitř plovoucího bloku, nikoliv na konec dokumentu. Není to velký problém, ale může to omezovat flexibilitu při alternativním stylování. A to já rád, co nevidět bude další špek, korelující s aktuálním vývojem světa.

Kromě toho si myslím, že výpočet obtékání u plovoucího bloku dává jádru víc zabrat, než absolutní posice.

"proč prostě Archívy nejsou jen další chlívek v řadě..."

Ten samý důvod. Alternativní styly. Jeden z nich bude třeba tRojsloupcový a navig2 bude ten třetí sloupec. Nebo budu chtít prdnout menu nahoru vodorovně, jako má VFB. Miluju alternativní styly a uživatelky, které je používají.

Zprávy z domova

Možná jste si všimli, že Arthur přidělal na bloguje ukládání typu prohlížeče u komentářů. Máte to všichni v adminském rozhraní. Když jsem si to analysoval, zjistil jsem, že mi ještě NIKDO nepřidal komentář pomocí MSIE!!!. Jsem hrdý na své komentátory :-)

Možná někomu vrtá hlavou, proč se neprojevují žádné problémy se sklem, jak jsem minule naznačil. Je to tím, že "obalový" div má velikost zhruba 1 krát 1 pixel. Plus mínus. Výhoda vnořování absolutně posicovaných objektů je ta, že se nemusí vůbec "zeměpisně" překrývat.

Update večer

dgx si nedá pokoj a pořád mi cpe ten plovoucí div, takže mu to vyvrátím neotřesitelně jednou pro vždy:

pokusný div

Zde je pokusný div, který by měl mít sirku flexi. Aby v ni mohl byt hlavni obsah blogu, který se přizpůsobí šířce okna. {float:left; width:50%; margin:10px 5px;}
Tento text obtéká ten levý pokusný div, aby vytvořil to pomyslně "menu". Menu by mělo mít fixní šířku, hlavní obsah flexi. Jenže to se nekoná, obě části se rozšiřují dle šířky okna proporcionálně. Ten sloupec vpravo nahoře si odmyslete, jako by tu ani nebyl, nemá na nic vliv.

Pokud se smíříme s proporční šířkou menu, lze toto řešení použít, ale pak není možné do sloupce menu dát žádný obrázek, který by lícoval se sloupcem.

linkuj.cz vybrali.sme.sk
roj, 24.01.2006, 16:24:00, trvalý odkaz,
Novější článek
Starší článek

Komentáře (35)

Varování:
Budu zde nechávat jen komentáře, které se mi líbí. Demokracie je sen. Nechte si o ní zdát :-)
1 Komentar Pavel Dohnal 24.01.2006, 17:38:56
Normalne sice IE nepouzivam, komentare nevkladam, ale aby ti nebylo lito, tak ti jeden komentar pridam.
[X]
2 ront 24.01.2006, 18:07:23
prepol som si Firefox IEtabom a posielam ti komentar :-)

[X]
3 kolik MSIE za den? von banhoff WWW 24.01.2006, 18:18:55
myslíš tím to detailnější zobrazení komentářů v "administrátorským" rozhraní bloguje, jak to vyPISSuje IP, čas a klienta? pokoušel jsem se toochopit, ale nepřišel jsem na to, jak to nějak vyexportovat, abych měl všechny ty informace někde pěkně nakupičce, pokud víš jak na to, napiš o ton nějaký pěkný článeček
[X]
4 Kruci chlapi! Arthur Dent 24.01.2006, 18:55:48
[3] http://www.bloguje.cz/ua.txt
[X]
5 ergo 24.01.2006, 19:10:43
ha! a co říkáš na tenhle komentář?:D
[X]
6 Misha 24.01.2006, 20:09:43
přiznám se, že jsem webů vytvořil už několik desítek, některé mi dokonce vydělaly i nějaké peníze, ale nemám vůbec tušení, co je to plovoucí blok, tok dokumentu a podobné pojmy :) Tím neříkám, že je nepoužívám, ale asi o tom nevím :)
[X]
7 Možná, Johnny Mail WWW 24.01.2006, 20:15:09
že když budu dlouho hledat, někde MSIE najdu, vážně to chceš??
P.S.: Roji, můj guru, nedovolím si nereagovat na tvůj spot o návodu na použitá shrnovadla. Je to jeden z nejlepších návodů na použí, co jsem četl. Další špeky u mě ;-)
[X]
8 AHA! Roj 24.01.2006, 22:10:17
takze komentar [1] ma zaznamenano:
Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322; .NET CLR 2.0.50727)

Komentar [2] ma Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; .NET CLR 1.1.4322)

Takze jasani bylo predcasne. Arthure, japato?

ergo, tvuj Smartfún (místní valašský výraz pro smartphone, podrobnosti u SuE) za dvanact litru jsem identifikoval jiz pred nejakou dobou :-)
[X]
9 dgx 24.01.2006, 23:13:52
Nechtěl bych tě Roji zklamat, ale tvůj bložínek čtu a komentuji zásadně v MSIE verze 6 SP2. Něco je tedy špatně.

Mateřský blok lze donutit, aby počkal na konec plovoucích dětí i čistě pomocí CSS:
#blok:after { content: "."; display: block; line-height: 0; visibility: hidden; clear: both }

Tomu samozřejmě nerozumí IE, ovšem ten mateřský blok natáhne při explicitním udání šířky:
#blok { width: 100% }

Mateřský blok také obepne plovoucí potomky, pokud se sám stane plovoucím.

> Plovoucí blog má své původní určení — být obtékán textem. Nikoliv dělat lejout. Jako tabulky. Věci je dobré používat k účelům, pro které byly vymyšleny. Jako tabulky.Plovoucí blog má své původní určení — být obtékán textem. Nikoliv dělat lejout. Jako tabulky. Věci je dobré používat k účelům, pro které byly vymyšleny. Jako tabulky.

S tím bych souhlasil až na jeden detail: HTML ani CSS dosud nic na tvorbu layoutu neposkytuje. Proto se v HTML používají tabulky a nověji v CSS pozicování a plování.

> Kromě toho si myslím, že výpočet obtékání u plovoucího bloku dává jádru víc zabrat, než absolutní posice.

To ti vyvrátí každý geniální a zkušený programátor. Třeba já a za Arthura mluvit nechci :-) Ale pravda, už jsem tento mýtus slyšel vícekrát.
[X]
10 Roj 24.01.2006, 23:47:53
[9] Ale ja nikdy netvrdil, ze by to neslo, dokonce kvuli tomu jsem odpovidal celym spotem, aby bylo jasne, ze vim, jak by to udelat slo :-)

> Mateřský blok také obepne plovoucí potomky, pokud se sám stane plovoucím.

No vidis to! Obcas mi taky neco nedojde :-)

>HTML ani CSS dosud nic na tvorbu layoutu neposkytuje.

Krome sloupcove sazby, ale tu zatim pouzivam jen ve stylu pro tisk :-)

>To ti vyvrátí každý geniální a zkušený programátor.

Delas i do Cecka? ;-) Ne vazne, tohle by me zajimalo, blogni to.

Nicmene si myslim, ze reseni s absolutnim posicovanim neni o nic horsi, nez by bylo s plovoucim obsahem. Jen by se musely trochu jinak delat alternativni styly. BTW je lepsi radici paka pod volantem, nebo na podlaze? Auta s pakou na podlaze jedou o 16.3% rychleji! :-)
[X]
11 Aktualisace! Roj 25.01.2006, 00:39:07
[9], definitivni odpoved mas tady v aktualisaci, klikni [999] :-)
Nejde to použít pro flexi lejút.
[X]
12 dgx 25.01.2006, 01:02:19
Řešení s absolutním pozicováním má tu (vážnou) chybu, že spoléhá na jakousi konstantu v jednotkách em, jejíž odvození jsem vůbec nepochopil ;) Můžeš to vysvětlit?


ad večerní update: "menu" má definovanou procentuální šířku 50%, nikoliv fixní. Mám za to, že se chová korektně. Nebo jsem opět něco nepochopil?
[X]
13 Roj 25.01.2006, 01:13:59
Menu ma vysku takovou, kterou urcis tak, ze to zkusis a pak zkusene korigujes. Jak budou mesice v archivu narustat, bude se zivotni prostor snizovat, to je jasny, ale da se tam prdnout max-height. Nebo to prepsat, coz pri me frekvenci prepisovani sablony je snesitelne.

A ted sis nabeh, a ja ti to preju!!!
Do hodiny mi predved reseni, jak udelas, aby menu nebylo procentni, ale fixni :-)))
Pocitam.... TED!!
[X]
14 dgx 25.01.2006, 02:16:42
dam mu fixní šířku a plování vlevo

{ width: 150px; float: left; }

a hlavnímu bloku dám automatickou šířku a vytvořím mezeru pro menu:

{ margin-left: 160px; }

Vyska menu se meni podle obsahu a ten je predem neodhadnutelny. Napriklad pokud se pri zvetseni pisma nektery radek rozlomi na dva. Teoreticky je to mozne v nekterych vyjimecnych situacich pouzit, ale obecne je to nekoncepcni reseni. Lepe je snazit se podchytit ten tok a navázat na něj, tedy vyhnout se absolutnímu pozicování.
[X]
15 já já já von banhoff WWW 25.01.2006, 08:08:23
já už to příště bude psát ve Firefoxu jako Pája vykřikoval Jája, XiXiXi zasmál se děda Roj po námořnicku...

už jsem málem zapomněl jak vypadají weby v Exploiter-u hnusně, v tý mý 7mičce ti ten blog nějak neplave, respektivě není obtékán žádným textem
[X]
16 ergo 25.01.2006, 08:43:58
ano, je to poslední věc, co jsem od táty dostala;) a stál 13:D
[X]
17 Pavel Dohnal 25.01.2006, 09:29:40
[8] Tak nevim, pustil jsem si IE6 a pridal komentar.
[X]
18 Roj 25.01.2006, 10:01:33
[14] Sorry, usl jsem, tennis me neudrzel nazivu.
Ale to, co popisujes, je prece normalni reseni fixne tlusteho menu, bezne pouzivane. Ale nutnou podminkou je, aby menu bylo v kodu na zacatku. Inversne to udelat NEJDE, leda by sirka byla dana procentne. Tedy tebou popisovana "metoda plovoucích bloků k tomu, abys přehodil v kódu části, co budou na začátku a co na konci" v danem pripade NEFUNGUJE!
Priznej to chlapsky :-)

Vy fixlejoutiste vite o zivote kulovy :-)

[16] Kazdy darek je posledni do doby, nez ho na posledni misto predbehne dalsi darek.

[17] no dyt jo! Ja svym komentatorum verim :-)
[X]
19 Misha 25.01.2006, 11:17:03
už jsem to pochopil, všechny tyhlety pitomosti se dělají pro to, aby mohlo být menu v kódu na konci stránky? A proč jako? na webu je to jedno, ale hodně často si nechávám přeložit stránky googlem do wapu a tam uvítám menu na začátku...
[X]
20 Misha 25.01.2006, 11:22:29
update: tak sem se na to chtěl podívat ve wapu a google to nezchroustal vůbec :)

jinak při zadávání předchozího komentáře se objevilo tohle:
Can't connect to local MySQL server through socket '/tmp/mysql.sock' (2) Error - too many connections. Sorry for this inconvenience. Wait a moment and try to Reload (press F5)
[X]
21 Arthur Dent 25.01.2006, 11:26:11
[19] protože SEOguruové a jiní přístupníci rozhodli, že na začátku kódu by měly být informace unikátní pro tu stránku (tedy její hlavní informační obsah) a balast, jako jsou menu, patičky a podobné věci, by měly být až na konci. Základní mantra je velmi levicová: "A co chudý uživatel s modemem 33.6? Jak ten k tomu přijde, když se mu nejdřív natahujou menu a sloupce a obsah, tedy to hlavní na co čeká, přijde až nakonec?" atd.
[X]
22 Roj 25.01.2006, 11:36:31
[19][21] A ted mi po pravde reknete, na kterou polozku meho menu si tak nutne potrebujete kliknout? UZ JSTE SI VUBEC NEKDY NA NEJAKOU KLIKLI? Ze ji nutne potrebujete mit nactenou jako prvni?
Ze nektere stranky maji menu na zacatku, protoze je dobre ho tam mit, je fajn, ale jak to souvisi s mym blogem??!

A je lepsi radici paka pod volantem nebo na podlaze?? Tak zacnete poradnou flamewar :-)

Arthure, socky, kteri si jezdi v A osmickach a landcruiserech a kterym na jejich horske chalupy s bazenem zatim nenatahly paterni draty, opravdu pouzivaji dialup, GPRS nebo s velkym stestim CDMA, ktere jede jako snek.
[X]
23 Misha 25.01.2006, 11:41:52
uznávám, že na rojův blog jsem neměl potřebu chodit přes wap, ale na těch stránkách, kam chodím, tam normálně klikám.

a stejně to SEO rojovi nejede, na výraz "roj" není v googlu první :)
[X]
24 Arthur Dent 25.01.2006, 11:42:00
[22] Co řveš na mě? Já jen Mishovi odlehčenou formou vysvětloval, proč je trend dávat kód menu na konec kódu stránky. A s horskými chalupami a sockami jsi úplně mimo, takže bys možná měl brzdit... :-/
[X]
25 misho Roj 25.01.2006, 11:46:27
Ve kterem jazyce se ti muj blog cte nejlepe? Ze bych udelal nejakou mutaci specielne pro tebe a google ? :-))
[X]
26 Misha 25.01.2006, 11:51:49
jo kurwa, nechci na posledním existujícím blogu žádné hádky, ROZUMÍTE???:)

nevím co je to zajazyk, asi lotyšština. putím wap, záložky, dám google a zadám roj bloguje, kliknu a pak mi to napíše "page can not be displayed". Takže si bohužel tvé perly nebudu moci číst při čekání na vleku :)

nicméně tvoje nabídka na speciální mutaci je zajímavá, to se jinak dostává jen uživatelkám :)
[X]
27 Roj 25.01.2006, 11:54:51
[24] To nebylo na tebe :-) A nebylo to rvani. Jen si potrebuju ujasnit, co znamena slovo "socka" (skoda ze sem nemuzu dat odkaz :-) Jsem na to slovo nejak vysazenej a reaguju moc rychle a muj milacek Federer prohraval, ale uz to brejknul, takze OK :-)
Jestli se te to dotklo, prijmi omluvu, nic jsem tim nemyslel :-)

Ono kdyz mas smulu, nezbyva ti nic jineho nez dialup, ze ktery finalne davas mesicne vic, nez za luxusni Chello tady na Letny.
[X]
28 Arthur Dent 25.01.2006, 12:05:52
[27] Přečti si znovu [20] a uvidíš, že já o sockách nepsal. Já psal, že "myšlenka je levicová" a o "chudém uživateli" - ani slovo o sockách, protože s tak vážným termínem nežertuju. ;)

Takže kdyby Federer neprohrával, tak bys pochopil nadsázku a odlehčení? Znamená to tedy že za to může Federer? Hejhola, kde jste kdo, je třeba zlynčovat Federera... :)
[X]
29 Roj 25.01.2006, 12:12:27
Muze za to Davydenko, respektive toho je treba lyncovat :-)
Ale je to uzasnej zapas.... Pust si to :-)
[X]
30 Žjóva! Johnny Mail WWW 25.01.2006, 13:09:39
Před časem jsem na Wikipedii četl, co znamená flamewar a říkal si, že jsem to snad ještě nikde nezažil...
Jinak mi nedá se nezeptat: jestli význam těch hrátek je opravdu takový, aby měl Roj dobrou SEO, je to vážně tak nutný, bejt všude první? Chápu to u prodejců zubních kartáčků, kteří všichni prodávaj to samý za stejnou cenu a tudíž potřebují být vidět dříve než ostatní, ale uvědomte si, že ROJ, je jen jeden a k nezaplacení ;-)
Na druhou stranu, chápu, že si někdo může dát (pro mě) nepředstavitelnou práci s nějakejma (pro mě) píčovinkama, aby to a to vypadalo pořád stejně, ale zapsaný v kódu aby to bylo nějak hodně brutálně.

Ale jsem jen lama a nejspíš mi pravý důvod Života, Vesmíru a Tak Vůbec uniká, že?
[X]
31 Roj 25.01.2006, 13:51:30
[30] Na ipsaci i tiskace mam pomerne dobry SEO :-)

All: Prave jsem asi definitivne overil, ze Gecko 1.8 je spolehlive shoditelne mym novym, zatim neverejnym stylem. Dela mi to na dvou pocich, kazdy s jinou grafarnou (Ati vs Nvidia) a pad je tak dukladny, ze je treba restartovat W98!
Asi si kvuli tomu nainstaluju stary Firefox. Ale dela to jen na te me strance na lokalnim disku :-)
Zkousel jsem na: SeaMonkey 1.5 alfa, Seamonkey 1.0 beta, FF 1.5.
FF1.5 vydrzi nejdele, SM 1.0 nejmene.
[X]
32 dgx WWW 25.01.2006, 15:49:58
Roji, vraťme se na chvíli k tvému původnímu článku, který se týkal pozicování bloku do výšky Xpx + Yem. Samotný trik toho dvojího posuvu je určitě vtipný, ale jak už jsem psal, jako celek to kulhá. Kvůli spoléhání se na bulharskou konstantu. Je fakt, že se na to dívám pohledem programátora a použití takové konstanty je pak znamení, že kód je téměř s jistotou chybný. Shodou okolností v jednom konkrétním případě v závislosti na konkrétním textovém obsahu produkuje docela použitelné výsledky, proto jej lze použít k pozicování chlívku Archív. V pohodě. Ale *obecně* to není průchozí řešení a právě proto jsem se ozval.

[18] ad plovoucí boxy:

Pokud chceš přehazovat části kódu, tak se samozřejmě možnosti layoutotvorby dále zužují.

Asi tak. V době nekritického jásání nad CSS se nechalo několik guru strhnout k prohlášením, které se časem ukázaly být jako, řekněme, nepřesné. Proto i tehdejší literaturu je třeba číst s jistým kritickým nadhledem.

Jedno z nadšených prohlášení říká, že CSS umožňuje tvorbu natahovacích layoutů a vykreslování bloků v jiném pořadí, než jsou zapsány v HTML kódu. (těmi natahovacími layouty myslím nejen gumovou šířku, ale i změnu velikosti písma, řádkování atd.)

Praxe mě přivedla k poznání, že tyto dvě věci se vzájemně rozporují. Tedy dgxův první zákon CSS (dnes poprvé publikovaný) zní: CSS umožňuje tvorbu natahovacích layoutů A NEBO vykreslování bloků v jiném pořadí, než jsou zapsány v HTML kódu.

To je takový povzbuzující komentář k tvé sisyfovské snaze :-) Fandím a držím palce!



[X]
33 Roj 25.01.2006, 18:29:54
[32] Konecne chlap s gulami ;-) uz jsem se lekl, ze vymirame :-)

Dika za ten prvni octavec, konecne jsem pochopil, co ti vadi. Ja jsem ve spotu malo zduraznil, ze je to vhodne pouze pro takove pripady, kde, je tam MENU popripade vice mene nemenne prvky, jako treba vyhledavaci box, logo, vysvetlivky s fixnim textem, tedy zadny uzivatelsky vkladany obsah. Potom je jediny variabilni prvek velikost pisma. A v takovem pripade je predepsani posice stejne legitimnim zpusobem, jako predepsani sirky textarey, velikosti paddingu kdekoliv a tak podobne. Neni to universalne pouzitelna metoda tvorby lejoutu, to jsem nikdy netvrdil. OK?

Naopak je to VELMI VHODNA metoda k umisteni externe vkladanych objektu z tretich serveru, na ktere nekdy cekas, i kdyz mas sebeluxusnejsi lajnu. OK?
Pocitadlo pristupu, toplisty a podobne sluzby mezi takove prvky patri. A prave proto je mam na konci kodu stranky, ale nechci je mit dole 232cm od horniho kraje pod poslednim spotem. Zaroven chci flexi obsah. OK?

Kdyby to byla stranka na zakazku, samozrejme bych se s tim nepatlal a ridil bych se prvnim zakonem (i dalsimi zakony zde nepublikovatelnymi). Ale to je MUJ blog, na ktery chodi MOJE UZIVATELKY, a ty jsou krasne a zaslouzi si MAXIMALNI PECI. A pro ne mi trocha te driny stoji za to. :-)

A krome toho me to bavi, ostatne jako (skoro) vsechno co delam :-)

Jinaxtebou vicemene souhlasim. Do smrti dobry! :-)


[X]
34 SEO opt ipsace von banhoff WWW 26.01.2006, 10:47:09
[33] koukám že jsi jedním z otců zakladatelů nového podoboru SEO a to GE (gender optimalisation), už jen ty názvy lubrik (hlavně vibrátory) mi byly podezdřelé a teď jsi to přiznal veřejně BRAVO!
[X]
35 ergo WWW 26.01.2006, 23:05:45
Ne, díky tomu, že mi táta slíbil, že se ozve v říjnu a ještě to neudělal, nevěřím, že by se ozval díky něčemu jinému : )
[X]

Přidání komentáře...

zde vpište
bloguje.cz
Získejte Seamonkey!
Valid XHTML 1.0 Strict