Autor Zpráva
Deny
Profil *
Zdravím,
chtěl bych udělat něco podobného - http://www.ringvemedia.com/introduction myslím ten bílý pohybující se sloupec, chtěl bych uplně stejný efekt. Co je potřeba k tomu umět? Nemáte tip na nějáký tutoriál? Díky
exoslav
Profil
Hmm, to by mě taky zajímalo :) Myslím si, že to je dělaný přes absolutní pozicování, ale jak přesně, to nevím...
Trejpa
Profil
Deny, exoslav:
Ukotvené pozadí

Bílý sloupec může být normální součástí stránky, kromě nastavení šířky, bílého pozadí a odražení od nějakého okraje není ničím výjimečný. Posun proti pozadí stránky je docílen ukotvení pozadí nadřazeného bloku background-attachment: fixed, prohlížeče to podporují.

Ostatní použité technologie mají drobná úskalí:

Roztahování obrázku pozadí na výplň okna prohlížeče řeší background-size: cover. To ale nepodporuje prohlížeč Internet Explorer 8 a nižší. Dá se to obejít napozicováním obrázku <img> pod samotný obsah, ale většina stránek raději použije pozadí nezvětšovací, které je větší a stránku obvykle přesahuje nebo plynule přechází do barvy pozadí.

Umístění proužku dole zajistí vlastnost position: fixed společně s nastavením odražení od kraje, zde vlastností bottom. Fixní pozice nefunguje v Internet Exploreru 6 a nižších. Můžeš podporu oželet (zobrazí se na konci stránky, vyroluje za sloupečkem), případně se to dá řešit hackem postaveným na vlastnosti overflow.

Poloprůhlednou barvu pozadí proužku může řešit obarvení pomocí zápisu barvy v RGBA. Ta však není podporována v Internet Exploreru 8 a nižších, proto bude kompatibilnějším řešením místo barvy použít poloprůhledný obrázek PNG. Jeho (polo)průhlednost není podporována v Internet Exploreru 6 a nižších. To by nemuselo až tolik vadit, proužek se zobrazí aspoň neprůhledný, případně i na to existuje hack.
Deny
Profil *
wow Trejpa, díky moc. Jdu to skusit
Deny
Profil *
Nedaří se mi ten sloupec... udělal jsem to takhle
#sloupec
        {        
         float:left;
         width:500px;
         height:300px;
         overflow: scroll
         background-color: white;        
         }

Ale ty lišty se mi zobrazí uvnitř toho sloupce, ja chci jenom vertikalni listu mimo sloupec, abych mohl hýbat jenom s ním. Jak na to?
Trejpa
Profil
Deny:
Jak na to?
Jako v mém příkladě. Nenastavovat sloupci výšku ani přetékání. Fixní pozici nastavit nepohyblivým částem.
Deny
Profil *
Výšku ale musím nastavit když chci vytvořit bílý sloupec 500x300.


Už se mi to povedlo, buhůžel ten bílý sloupec se mi zobrazuje před tím šedým páskem...


aha, tak stačilo přidat- z-index:999;
Deny
Profil *
Ještě by mě zajímalo, Když se podíváte na ten sloupec http://www.ringvemedia.com/introduction tak u konce je ten sloupec useklý, já ho mám až do konce stránky. Když jsem zadal margin-top: -30px tak vlastně ubral na výšce ale dál pokračuje až do konce stránky.
Petr ZZZ
Profil
margin-bottom jsi zkoušel?
Deny
Profil *
Petr ZZZ jj

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: