CSS zależny od rozdzielczości przeglądającego


(Slq Babe) #1

Witam.

Mam taki problem.

Mam na stronie div'a z background image i posiotion:absolute, odsunięty jest on top i left w miejsce gdzie chce żeby był wszystko gra.

Problem pojawił się kiedy chce żeby nad tymi divem z tłem było div z img.

Div z img jest pod divem z tłem. Nie wiem jak wyciągnąć tego diva z img na wierzch.

Pewnie rozwiązanie byłoby zamienienie position:absolute diva z tłem na poprostu odsunięcie je marginesami w wybrane miejsce ? niby działa ale jak to będzie na innych rozdzielczościach ? np. jeśli ustawie margin-top: - 250 px; to działa.

jestem początkującym koderem.

Z góry dzięki za pomoc.

//edit teraz wyglada to tak z margin-top -250px;

http://sloniczeczek.info/artur/


(Sitemaster) #2

poczytaj o z-index


(Slq Babe) #3

Ok super dzięki.

Pomogło =)

A mam jeszcze jedno pytanie można jakoś przygotować plik css w zależności od rozdzielczości na jakiej pracuje "użyszkodnik" ?

tzn. żeby przeglądarka rozpoznawała rozdzielczość monitora przeglądającego i względem niej używała odpowiedniego pliku css.

I jeden standardowy defult'owy css. ?


(mario@) #4

W js możesz sterować, który plik css w danym momencie ma być używany (zależnie do rozdzielczości).

Podstawą będzie screen.width oraz screen.height resztę można zrobić na dwa sposoby(jeden to dodawanie odpowiednich plików do sekcji head, a drugi to 'aktywacja' konkretnych plików css zawierających ustawienia dla danych rozdzielczości).

Drugi sposób na przykładzie szerokości

W niektórych przeglądarkach zamiast

document.styleSheets

należy użyć

document.getElementsByTagName("link")

Atrybut title został dodany w celu łatwiejszego rozróżniania plików np. w pętlach(chociaż po np. atrybucie href także można je rozpoznawać).

Osobiście jednak polecam zrobić szablon pod jedną konkretną rozdzielczość - bądź szablon oparty na wartościach %.