Andor.cz - Dračí doupě online

durin: tos mohl říct jednou větou že to fixuješ uvnitř divu s overflow auto... problém je ale v tom, že to se na kódu na andoru simuluje dost blbě...
vlastně je to skoro nemožný - a natolik mě podpora IE netrápí, abych se pokoušel o takovýhle husarský kousek. :)

a pokud se ti tohle nelíbí, tak vim ještě o dalších dvouch... sem to někde viděl...

V čem je problém? Prohlížeč MSIE/Windows nepodporuje position:fixed, někdy dokonce použití této vlastnosti dokáže prohlížeči způsobit velké problémy a mít za následek i zborcení stránky. Přitom fixní prvky na stránce mohou být velmi užitečné — pevně umístěné postranní menu, které se nehýbe, když posouváme obsahem stránky, je typickým příkladem. Ale naštěstí existuje způsob, jak stejného efektu dosáhnout ve všech prohlížečích.

Celá finta spočívá v tom, že stránku vytvoříme ze dvou vrstev: jedna bude posuvná, druhá, na ní nezávislá, se posouvat nebude. To vytvoří stejný výsledek, jako by prvky ve druhé vrstvě měly position:fixed. Dosáhneme toho poměrně snadno:

* celý posuvný obsah stránky uzavřeme do jednoho bloku, který bude mít přesně šířku a výšku okna prohlížeče a bude posuvný (bude mít overflow:auto)
* fixní obsah uzavřeme do druhého bloku (vně toho prvního), který absolutně napozicujeme na vhodné místo

První krok je postaven na již známé fintě se výškou prvků podle rozměrů okna: prvkům body i html nastavíme height:100%, čímž zajistíme, že vnitřní prvek #page, který bude mít také height:100% bude zobrazen přes celou výšku okna prohlížeče. Pochopitelně musíme všem prvkům nastavit také margin:0 a padding:0, abychom se vyhnuli nepříjemným problémům s rozdílnými výpočty rozměrů (viz Matrjoška). Když prvku #page ještě nastavíme overflow:auto, máme první část úkolu vyřešenu. Celá stránka svými rozměry kopíruje rozměry okna, ale její obsah se přímo neposouvá — tuto funkci převzal prvek #page.

body,html {
margin:0; padding:0;
height:100%;
_overflow:hidden;
}
#page {
margin:0; padding:0;
height:100%;
overflow:auto;
}

...




Posuvný obsah stránky





Protože MSIE (přinejmenším ve verzi 5) zobrazuje na stránce posuvník, i když není co posouvat, je vhodné prvkům body a html přidat ještě overflow:hidden. S tímto nastavením má ale velké problémy Opera, proto je zde použit "hack". Místo vlastnosti overflow definujeme vlastnost _overflow, což zpracuje pouze prohlížeč MSIE, a to stejně, jako by to bylo overflow. Díky tomu z MSIE zmizí druhý posuvník a zůstane jen ten správný (patřící prvku #page).

Ve druhém kroku přidáme fixní, neposuvný obsah. Použijeme stejnou fintu s "podtržítkovou" vlastností — všem prohlížečům nejprve nastavíme position:fixed (ty, které to umějí, to použijí) a pro MSIE to následně předefinujeme na position:absolute (zápis s podtržítkem budou ostatní prohlížeče ignorovat).

...
#menu {
position:fixed; _position:absolute;
top:20px; left:20px;
...
}
...


Posuvný obsah stránky



Fixní obsah stránky


Tento fixní, pozicovaný obsah se zobrazí "nad" posouvaným obsahem, bude formátován nezávisle na něm. Ale protože posuvníky hýbají obsahem jen v prvku #page, na prvek #menu, který je vně něj, nebude mít posouvání žádný vliv. Prvek se bude chovat jako by měl position:fixed i v MSIE ve WIndows.

Výsledek si prohlédněte na příkladu. Obsah uvnitř prvku #page je uzvařen ještě v jednom bloku, abychom mohli bez problémů nastavit okraje (opět viz Matrjoška).

Toto řešení funguje ve všech moderních prohlížečích (testováno v MSIE 5 i 6, Mozille, Firefoxu, Opeře i Safari). Jedinou jeho nevýhodou je to, že některé prohlížeče (Mozilla, Safari) zatím nepodporují posouvání bloků kolečkem myši. Takže i když běžnou stránku lze bez problémů kolečkem posouvat, v tomto případě si můžete kolečko třeba ukroutit, ale nestane se nic. Doufejme, že v nějakých dalších verzích i tento problém zmizí. V MSIE i Opeře ale kolečko funguje.

jasný, o tom se ví... maličkost.
btw: na validaci je taky parádní plugin do mozilly.

Tohle je zajímavé:

Ampersands (&'s) in URLs
Another common error occurs when including a URL which contains an ampersand ("&"):

...

This example generates an error for "unknown entity section" because the "&" is assumed to begin an entity. In many cases, browsers will recover safely from the error, but the example used here will cause the link to fail in Netscape 3.x (but not other versions of Netscape) since it will assume that the author intended to write §ion, which is equivalent to §ion.

To avoid problems with both validators and browsers, always use & in place of & when writing URLs in HTML:

...

Note that replacing & with & is only done when writing the URL in HTML, where "&" is a special character (along with ""). When writing the same URL in a plain text email message or in the location bar of your browser, you would use "&" and not "&". With HTML, the browser translates "&" to "&" so the Web server would only see "&" and not "&" in the query string of the request.

já jsem si zase zkoušel na validator W3C přímo na Andor, co to s tím udělá. .)

durin: mohl bys to sem hodit? ami říkal že IEčko nějak zkousne implementaci JS kódu nějak schovaného v CSSku, ane nevím jak.
byl bych moc vděčný kdyby jsi to sem hodil.

Eskel: já to viděl normálně CSSkem helejď... sem si to hledal a normálka... ale v Mozille to je komfort, jen napsat fixed a máš to hehe...

Taky jsem na IE7 zvědavej... Snad bude lepší než 6 (hlavně co se bezpečnosti týče).... Na net už nevlezu s ničim jinym než Firefoxem (mám taky klasa Mozillu)..

(sakra ani nevím jestli cenit je s dvěma nn) :(

I tak je parádní, že na Andoru vůbec nějaký styl aplikovat lze ... :)) (moc si toho cenním)

durin: no jasně, javascriptem, to ví každý... ale těžko to uděláš na andoru, kde můžeš přidávat jen styl.

Eskel: a bude podporovat ají position: fixed;
?? protože se mi nechce to obcházet i když vim jak na to *1*

a za měsíc by měla být beta.
což je skutečně úleva. i když... známe microsoft. :-/ ty tam zase něco nasekaj. :(

Zpráva dne:
vyhlídky na IE7 dodržující standarty W3C!
odkaz

jaký šup šup?! >:E už je to hotový...

Eskel 04.Května 2005 19:21
hehe, ja sem hodne domysliva ^_^

btw. ja take porad pouzivam original, tak sup sup ^_^

tak si dejte ctrl+R, přestyloval jsem to.
(tedy original, asi sotva vision :P)

na orginál se v poslední době zapomíná až příliš často a příliš často se také zapomíná na to, že ho v převážné většině stále používá spousta lidiček (jak k tomu příjdou, chudáčci)

a zapoměl jsem na original no, měli jste mi to připomenout... :-/