Andor.cz - Dračí doupě online

Hostinec? 

Stylování Andoru

Správci stolu

Eskel, Fistandantilus

zde nemáte právo psát

Durin Mahalul - 09. května 2005 15:21
dwarfm1808.jpg
eh tyjo... tetkons jsem si všimnul, že ty vlasy ti končí hned za uchem... jak mi na to ráno svítilo slunko, tak jsem myslel že máš ty vlasy dlouhý... jéjej...
a chceš teda z dvojky jo? No problemo...
 
Eskel - 09. května 2005 13:19
esk22836.jpg
ale upřímě řečeno docela dobrá práce... což ti ale krk nezachrání... jen počkej v pátek!
(tahle fotka je úděsná)
 
Eskel - 09. května 2005 13:17
esk22836.jpg
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
já tady někoho zakousnu... co takhle si počkat na SW3, tam je mi podobnější a počkat si na nějakou lepší fotku, kde mám rozpuštěný vlasy, he? :)
 
Wors - 09. května 2005 11:28
tanisw9066.jpg
Eskel. já nevěděl, žes hrál v SW ;oD
 
Sargo - 09. května 2005 11:27
wel1d5kk1aaa19357.jpg

Durin Mahalul 09.Května 2005 09:40
He, to se ti povedlo :-D
Teď už s ním tuplem nebude k vydržení ;-)
 
Durin Mahalul - 09. května 2005 09:41
dwarfm1808.jpg
Akorát by tam chcelo ještě něco doladit, akorát mi na to svítí sluníčko a moc sem na to neviděl tam dole u těch písmenek...
 
Durin Mahalul - 09. května 2005 09:40
dwarfm1808.jpg
Hehe... tohle mě napadlo včera ve vlaku...

 
Durin Mahalul - 07. května 2005 18:02
dwarfm1808.jpg
Eskel: když já ti to chtěl zkopírovat a» si počteš hehe... *1
 
Eskel - 07. května 2005 00:10
esk22836.jpg
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. :)
 
Durin Mahalul - 06. května 2005 20:39
dwarfm1808.jpg
a pokud se ti tohle nelíbí, tak vim ještě o dalších dvouch... sem to někde viděl...
 
Durin Mahalul - 06. května 2005 20:38
dwarfm1808.jpg
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.
 
Eskel - 06. května 2005 16:43
esk22836.jpg
jasný, o tom se ví... maličkost.
btw: na validaci je taky parádní plugin do mozilly.
 
Fistandantilus - 06. května 2005 11:43
fuck_y2031.jpg
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.

 
Fistandantilus - 06. května 2005 11:35
fuck_y2031.jpg
já jsem si zase zkoušel na validator W3C přímo na Andor, co to s tím udělá. .)
 
Eskel - 06. května 2005 11:31
esk22836.jpg
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.
 
Durin Mahalul - 06. května 2005 10:43
dwarfm1808.jpg
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...
 
Aratan - 05. května 2005 18:46
dunadan4741.jpg
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)..
 
Fistandantilus - 05. května 2005 13:17
fuck_y2031.jpg
(sakra ani nevím jestli cenit je s dvěma nn) :(
 
Fistandantilus - 05. května 2005 13:17
fuck_y2031.jpg
I tak je parádní, že na Andoru vůbec nějaký styl aplikovat lze ... :)) (moc si toho cenním)
 
Eskel - 05. května 2005 12:43
esk22836.jpg
durin: no jasně, javascriptem, to ví každý... ale těžko to uděláš na andoru, kde můžeš přidávat jen styl.
 
 
 
Andor.cz o.s. © 2003 - 2024 hostováno na VPS u wedos.com
Za obsah příspěvků zodpovídá zadavatel, ne redakce, či administrátor portálu www.Andor.cz
Dračí doupě, DrD a ALTAR jsou zapsané ochranné známky nakladatelství ALTAR

doba vygenerování stránky: 0.075223922729492 sekund

na začátek stránky