Autor | Zpráva | ||
---|---|---|---|
Kry5 Profil |
#1 · Zasláno: 31. 1. 2011, 19:29:29
Zdravím,
mám zajímavý problém při vytváření jedné stránky. Jedná se o konkrétně tuto rozpracovanou verzi: Odkaz (vím, že opakující se pruh v pozadí je špatně rozřezaný a působí to špatně) Nyní mi jde o tu "bublinu" která je vpravo od nápisu Administrace Webu. Podle grafického návrhu by se tato bublina měla táhnout až k pravému konci monitoru. Samotná stránka má pevnou šířku a je vycentrovaná (což je vidět, ale jen pro jistotu :-)). Jednoduché řešení je pomocí javascriptu (zjištění šířky obrazovky -> screen.width), ale radši bych to vyřešil pomocí CSS. Napadlo mě udělat element, který by měl jako šířku nastavenou třeba 30% a byl by napozicovaný a přesahující zbytek by byl schovaný pod logem. Ale to není ideální řešení, protože přestane fungovat jakmile se stránka oddálí (např. ctrl+kolečko myši v chrome). Nevíte jak to vyřešit v CSS a nebo se opravdu budu muset obrátit na JS? Díky Darkry |
||
panther Profil |
#2 · Zasláno: 31. 1. 2011, 19:42:05
Kry5:
jakou bublinu myslíš? Je to ten světlý flek vpravo na tomto obrázku? Kde je její zbytek? |
||
Kry5 Profil |
#3 · Zasláno: 31. 1. 2011, 19:42:51
panther:
Ano ten světlý flek se má táhnout až do pravého konce stránky |
||
Kry5 Profil |
#4 · Zasláno: 31. 1. 2011, 20:34:21
Tak to nakonec řeším pomocí javascriptu a uživatelé bez něj hold budou mít smůlu.
<script type="text/javascript"> var position, bublinaWidth; if(screen.width > 1024) { bublinaWidth = (screen.width - 1024) / 2; position = screen.width - bublinaWidth; document.getElementById('bila').style.width = bublinaWidth + "px"; document.getElementById('bila').style.left = position + "px"; } </script> #bila { background-color: #EBEBEB; height: 150px; position: absolute; top: 0; } Ovšem nastává problém, když uživatel oddálí stránku (nebo přiblíží) tak bílá by se měla prodloužit nebo zkrátit a měla by se přepočítat vzdálenost zleva. Není na to nějaká JS událost? Díky |
||
panther Profil |
#5 · Zasláno: 31. 1. 2011, 20:38:42 · Upravil/a: panther
Kry5:
Tahat do tohohle CSS je nesmysl. Zkus něco na tento způsob. <body> <div style="position: absolute; top: 0; right: 0; background: #fff; width: 50%; height: 150px; z-index: 1;"></div> … <div id="head" style="position: relative; z-index: 2;"> |
||
Kry5 Profil |
#6 · Zasláno: 31. 1. 2011, 20:42:56
panther:
Jj, to jsem psal jako jednu z těch možností jak to udělat, ale pokus by se stránka extrémně oddálila tak by to nefungovalo, ale to už asi nebudu řešit. A jak jsem koukal na javascript tak ten by měl asi stejnej problém s oddálením, takže to vyřeším asi takhle. |
||
Časová prodleva: 13 let
|
0