![]() |
![]() |
![]()
Post
#1
|
|
Grupa: Zarejestrowani Postów: 215 Pomógł: 0 Dołączył: 12.03.2007 Ostrzeżenie: (0%) ![]() ![]() |
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 |
|
|
![]() |
![]()
Post
#2
|
|
Grupa: Zarejestrowani Postów: 215 Pomógł: 0 Dołączył: 12.03.2007 Ostrzeżenie: (0%) ![]() ![]() |
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 ;/ |
|
|
![]()
Post
#3
|
|
Grupa: Zarejestrowani Postów: 54 Pomógł: 4 Dołączył: 26.01.2008 Skąd: Kraków Ostrzeżenie: (0%) ![]() ![]() |
.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 |
|
|
![]() ![]() |
![]() |
Aktualny czas: 15.10.2025 - 13:08 |