[CSS]Podzielenie tła na 3 cześci. Opcje

[Skr3czu]

Witam,

Jak podzielić tło na trzy cześci za pomocą CSS ?

Pokaże na screenie:
http://www.f4a.eu/uplGRA/12028944421563.JPG

1.Jakiś obrazek
2.Jakiś kolor (w zależności od wielkości strony to się powiększa)
3.Jeszcze inny obrazek

Mam nadzieje, że wiecie o co mi chodzi (IMG:http://forum.php.pl/style_emoticons/default/tongue.gif)

Pozdrawiam

[vokiel]

Tworzysz każdą część (1,2,3) jako oddzielne div'y.
Umieścić wszystko razem w jednym kontenerze.
Może to Ci się przyda:
sticky-footer

[Skr3czu]

A jeszcze jedno pytanie:

Jak zrobić, aby obrazek był zawsze na samym dole strony ?

[Toadstyle]

A jeszcze jedno pytanie:

Jak zrobić, aby obrazek był zawsze na samym dole strony ?

zalezy od ukladu strony i tego co masz na mysli
-jezeli chcesz zeby obrazek stykal sie z krancem przegladarki
#obrazek {position:absolute;left:0px;bottom:0px;margin:0;padding:0;}
-jezeli niechcesz zeby obrazek byl przesowany wraz z strona
#obrazek {position:fixed;~~~~}

[Skr3czu]

Chce użyć tego:
#obrazek {position:absolute;left:0px;bottom:0px;margin:0;padding:0;}

Ale jak wstawić to w:
.dol{
background:url(img/dol.gif);
width:repeat-x;
height:69px;
position:relative;
}

Bo za bardzo nie wiem ;/

[Toadstyle]

.dol{
background:url(img/dol.gif);
width:repeat-x;
height:69px;
position:relative;
}

Niejest to do konca poprawne.Juz tlumacze

.dol { <--kropka to selektor klasy informuje przegladarke ze odnosimy sie do klasy, dol to jej nazwa
nawias otwiera style

background:url(img/dol.gif); <--skrocony sposob wyrazania wszystkich wartosci tla.w tym przypadku
umieszcza obrazek dol.gif jako tlo,kolor tla pozostawia przezroczysty,tlo bedzie przewijane wraz z elementem,obrazek tla zostanie wyswietlony w pozycji0% 0% (lewy gorny rog)oraz tlo bedzie powielane(repeat).Wszystko to ustalaja wartosci domyslne.
Gdybys chcial to zapisac wyglada to tak

background:transparent url(img/dol.gif) scroll 0% 0% repeat;

width:repeat-x; <-- niestety taka wartosc nie jest dozwolona wiec zostanie zastapiona wartoscia "auto" czyli szerokosc dostosuje sie do zawartosci.

Gdybys chcial aby tlo obrazka sie powielalo musisz wpisac wyzej naprzyklad:
background:url(img/dol.gif)repeat-x; (powielanie w poziomie)

position:relative; - nagazuje pozycjonowac div'a relatywnie


Wiec :
.dol {
background:url(img/dol.gif);
width:auto;
height:69px;
position:absolute;
}

mamy w zasadzie to samo tyle ze zmienilismy rodzaj pozycjonowania.Pozycjonowanie absolutne ...hmm jakby to wyjasnic - wyrywa element z ogolnego przeplywu strony oraz ustala jego pozycje wzgledem najblizszego elementu pozycjonowanego przy uzyciu
position:relative; lub okna przegladarki

Zmienilismy juz rozdzaj pozycjonowania wiec teraz jak przesunac element-sluza do tego left - ustala odleglosc od lewej strony
right- ustala odleglosc od prawej strony
top- ustala odleglosc od gory strony
bottom- ustala odleglosc od dolu strony

zalozmy ze chcemy zeby obrazek znajdowal na dole (polecam sprobowac na pustej stronie wczesniej) wiec :
left:0px;(right niepiszemy w takim wypadku poniewaz przegladarka ustali to za nas)
bottom:0px;(top niepiszemy poniewaz jak wyzej)

to przeniesie obrazek w lewy dolny rog.
Poniewaz obrazek moze odstawac wyzerujemy rowniez marginesy i dopełnienie
margin:0;padding:0;


czyli w efekcie:


.dol {
position:absolute;
width:auto;
height:69px;
background:url(img/dol.gif);
left:0px;
bottom:0px;
margin:0;padding:0;
}


mam nadzieje ze nie zagmatwalem (IMG:http://forum.php.pl/style_emoticons/default/tongue.gif) pozdrawiam

[Skr3czu]

Trochę się rozpisałeś (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg)

Dałem to do CSS, a później w pliku dałem takie coś:
<div class="dol"></div>
i nic się nie wyświetla, a jak dam:
<div class="dol">gggggggggggggggggggggggggggggg</div>
To wtedy tylko pokazuje się na tekście, ale nie jest rozciągnięte do końca.

Co mam zmienić, aby było rozciągnięte na maxa ?

[Toadstyle]

Ustal wymiary.(width i height) jezeli niewiesz jakie najprosciej odczytac rozmiar pliku w windowsie ( pliku w sensie tla) i takie podac ewentualnie metoda prob i bledow poprawic.

[Skr3czu]

dzięki działa (IMG:http://forum.php.pl/style_emoticons/default/winksmiley.jpg)