Ocena wątku:
  • 0 głosów - średnia: 0
  • 1
  • 2
  • 3
  • 4
  • 5
[CSS] problematyczny układ strony
#1
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.


Załączone pliki
.png   site.png (Rozmiar: 84.95 KB / Pobrań: 23)
Odpowiedz
#2
body { background: #565656 urlSadś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.
[Obrazek: ancik.jpg]
Odpowiedz
#3
niee. Nie przejdzie ten patent. Na szerszych monitorach bedzie nie równo Smile
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.....
Odpowiedz
#4
Dzięki, spróbuje z tym szerokim tłem i zobaczę co wyjdzie. Dam znać jeszcze.
Odpowiedz
#5
Racja, mój patent pada w przypadku różnych rozdzieloczości.
[Obrazek: ancik.jpg]
Odpowiedz
#6
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).
Odpowiedz
#7
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?


Załączone pliki
.png   site2.png (Rozmiar: 84.49 KB / Pobrań: 10)
Przekaż 1 % podatku dla chorej Moniki
Odpowiedz
#8
A jak chcesz żeby on wyglądał? Chodzi ci o to, że jest za długi?
[Obrazek: ancik.jpg]
Odpowiedz
#9
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.
Przekaż 1 % podatku dla chorej Moniki
Odpowiedz


Podobne wątki
Wątek: Autor Odpowiedzi: Wyświetleń: Ostatni post
Question układ divów jak tekst w gazecie - jak uzyskać? Ace 7 3,409 02-01-2012, 21:30
Ostatni post: Kartofelek
  Reklama rozjeżdża układ strony pawstrze 5 2,023 16-08-2011, 03:37
Ostatni post: michalszyd
  Układ 3 kolumnowy bez tabeli, jak to rozgryźć? Lucaszz 9 2,752 09-05-2011, 00:48
Ostatni post: Kartofelek
  problem - układ obrazków będących odsyłaczami cew 4 2,208 10-12-2010, 08:31
Ostatni post: rel
  [CSS] układ 3 kolumn - jak wcisnąć środkową między dwie pozostałe Szorstki 10 5,005 27-10-2010, 02:10
Ostatni post: Szorstki

Skocz do:


Użytkownicy przeglądający ten wątek: 1 gości
Sponsorzy i przyjaciele