Autor Zpráva
Kry5
Profil
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
Kry5:
jakou bublinu myslíš? Je to ten světlý flek vpravo na tomto obrázku? Kde je její zbytek?
Kry5
Profil
panther:
Ano ten světlý flek se má táhnout až do pravého konce stránky
Kry5
Profil
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
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
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.

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

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

0