[CSS] problematyczny układ strony

[nc715]

Witam,
mam do zrobienia układ strony (jak w załączniku).

Byłbym wdzięczny jakby ktoś podpowiedział jak najlepiej to zrobić. Problemem jest tło które musi składać się z 2 kolorów i zawsze pasować do części z treścią niezależnie od szerokości monitora.

[Ancik]

body { background: #565656 urlścieżka/nazwaobrazkaztlemPoLewejStronie.jpg) top left repeat-y;}

nazwaobrazkaztlemPoLewejStronie to kolor tła po lewej stroinie, o odpowiedniej szerokości, wycięty i powielany w pionie. W ten sposób stanowi on część tła, natomiast cała reszta tła wypełniona będzie tłem o kolorze #565656.

Ewentualnie poczytaj o gradientach w CSS3.

Pozdrawiam.

[Kartofelek]

niee. Nie przejdzie ten patent. Na szerszych monitorach bedzie nie równo
ja bym raczej calował w szerokie tło któremu dałbym center repeat-y. Innej sensownej możliwości raczej nie ma.
Zawsze też można by zasymulować to tło divem z position:absolute; left:50% i margin-right.....

[nc715]

Dzięki, spróbuje z tym szerokim tłem i zobaczę co wyjdzie. Dam znać jeszcze.

[Ancik]

Racja, mój patent pada w przypadku różnych rozdzieloczości.

[Engine]

Można jeszcze użyć tabel:

Kod:

<table width="100%">
  <tr>
    <td style="background:#2b2b2b;">&nbsp;</td>
    <td style="width:1004px; background:#FFFF33;">&nbsp;</td>
    <td style="background:#565656;">&nbsp;</td>
  </tr>
</table>

W środkowej kolumnie zawartość strony i tło (może być w postaci obrazka z repeat-y).

[nc715]

Tabelki są okej ale wolałbym ich unikać.

Poradziłem sobie tak: zrobiłem szerokie tło z background-position: center top;

z tym że gdy przeglądarkę zwęzimy do rozmiaru mniejszego niż blok z treścią, to wtedy on (blok z treścią) wyrównuje się do lewej krawędzi przeglądarki a tło dalej się centruje i znowu się rozjeżdża.

uratowałem się dając kolorowym blokom height: 100% i już wygląda ok.

Z kolei mam kolejny problem, zielony, podłużny blok, jak go zrobić? (patrz załącznik)

dałem { position: absolute; left: 0; bottom: 20px; width: 3000px; }
żółty blok { position: relative; }

tylko pasek przewijania na dole przeglądarki mi się pokazuje, da się ukryć go? lub jakiś inny sposób na umieszczenie tego zielonego bloku?

[Ancik]

A jak chcesz żeby on wyglądał? Chodzi ci o to, że jest za długi?

[nc715]

Chce aby wyglądał jak na rysunku, zaczynał się na początku żółtego bloku i ciągnął się aż bo brzeg przeglądarki. ( oczywiście szerokość przeglądarki jest zmienna )


Edit.
Nie znalazłem rozwiązania w css, więc w ruch poszło jQuery. Póki co działa, poniżej można zobaczyć obrazowo jak to zrobiłem:

var winwidth = $(window).width();
var winheight = $(window).height();

if(winwidth<1004) {
bgImg.css({
width: 780+'px',
});
} else {
bgImg.css({
width: winwidth-((winwidth - 1004) / 2)-224+'px',
});
}

Temat do zamknięcia.