Witajcie,

nie mam pomysłu jak ugryźć taki układ:


Szare przerywane linie to główny kontener o stałej szerokości, wyśrodkowany względem całej strony. Problemem są te czerwone pasy. Muszą one zaczynać się przy odpowiedniej krawędzi kontenera i kończyć na odpowiedniej krawędzi okna (wszystko widać na obrazku).

Proszę o rady jak to ugryźć.

Dla tych czerwonych pasów daj position:absolute; + odpowiedni top

Tylko jak w takim przypadku ustalić szerokość tych pasków?

Czy ktoś potrafi pomóc? Ja nadal nie mam żadnego pomysłu.

te czerwone paski maja miec zmienna szerokosc w zaleznosci od szerokosci okna przegladarki?
i czy glowny box tez ma miec stala szerokosc czy moze procentowa?

Kontener ma stałą szerokość w pikselach, a paski muszą biec do końca okna przeglądarki, czyli dla niskiej rozdzielczości mogą mieć 20px, a dla wysokiej 1020px itd. Mam nadzieję, że takie wytłumaczenie jest OK

Co na tych czerwonych paskach ma się znajdować? Treść, obraz, tło?

Muszą się tam znajdować menusy.

Moim zdaniem bez użycia JS jest to niewykonalne. Bynajmniej nie mam na to pomysłu.

Jest to wykonalne wykorzystując funkcję calc() z CSS. Niestety prawie żadna przeglądarka jej nie obsługuje jeszcze więc pozostaje JavaScript.

Gdyby to miałybyć grafiki to jeszcze dałoby radę to zmontować z menu może być problem...

Mozesz spróbować czegoś takiego:
- w body dajesz 2 divy oba po 50% szerokosci okna. Ustawiasz im odpowiednio tła aby strona wyglądała tak




Następnie tworzysz główny kontener strony umieszczając go ponad tymi warstwami.



Umieszczasz wewnątrz kontenera 2x menu pozycjonowane absolutnie (kontener relatywnie). Jedno powinno mieć left:0 drugie right:0 oraz odpowiednio ustawiony overflow.
Fajny temat jak nie dasz rady to wieczorem spróbuję to złożyć .

Myślałem o podobnym rozwiązaniu, ale ma ono poważną wadę: muszę wiedzieć na jakiej wysokości mają lewitować te paski. Nie wydaje mi się jednak, by było jakieś lepsze rozwiązanie. (tylko tabela załatwiłaby problem, ale wiadomo, że jej nie użyję)