+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: [CSS] problematyczny układ strony (/thread-css-problematyczny-uklad-strony)
[CSS] problematyczny układ strony - nc715 - 03-01-2012
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.
RE: [CSS] problematyczny układ strony - Ancik - 03-01-2012
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.
RE: [CSS] problematyczny układ strony - Kartofelek - 03-01-2012
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.....
RE: [CSS] problematyczny układ strony - nc715 - 03-01-2012
Dzięki, spróbuje z tym szerokim tłem i zobaczę co wyjdzie. Dam znać jeszcze.
RE: [CSS] problematyczny układ strony - Ancik - 04-01-2012
Racja, mój patent pada w przypadku różnych rozdzieloczości.
RE: [CSS] problematyczny układ strony - Engine - 04-01-2012
Można jeszcze użyć tabel:
Kod:
<table width="100%">
<tr>
<td style="background:#2b2b2b;"> </td>
<td style="width:1004px; background:#FFFF33;"> </td>
<td style="background:#565656;"> </td>
</tr>
</table>W środkowej kolumnie zawartość strony i tło (może być w postaci obrazka z repeat-y).
RE: [CSS] problematyczny układ strony - nc715 - 04-01-2012
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?
RE: [CSS] problematyczny układ strony - Ancik - 04-01-2012
A jak chcesz żeby on wyglądał? Chodzi ci o to, że jest za długi?
RE: [CSS] problematyczny układ strony - nc715 - 04-01-2012
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.