 [CSS][HTML]Przezroczysty div na calej wysokosci strony. |
  |
| [CSS][HTML]Przezroczysty div na calej wysokosci strony. |
Post
#1
|
|
|
Grupa: Zarejestrowani Postów: 164 Pomógł: 21 Dołączył: 21.08.2009 Ostrzeżenie: (0%) 
 |
Chodzi o to, ze chce przykryc cala zawartosc strony divem (polprzezroczystym), w ktorym mam zamiar umiescic panel logowania.
Stosuje taki kod (w uproszczeniu) Kod <div id="tresc strony" style="z-index: 1; width:100%; height:100%; background-color:#ffffff; text-align:center;"> ...jakas tresc strony... </div> <div id="zaslona_logowanie" style="z-index 2; position: absolute; left: 0px; top:0px; background-color:black; filter: alpha(opacity=80); -moz-opacity: 0.8; opacity: 0.8; width:100%; height:100%;"> ...panel logowania... </div> Niby wszystko ok, ale gdy tresc strony jest dluzsza (wyzsza) od wysokosci okna przegladarki, to przykryta zostaje tylko czesc strony, a gdy scrollbarem zjade nizej, to strona juz wyglada normalnie. Wiem ze jest taka mozliwosc, bo widuje to na innych stronach, ale pomimo setek prob, nie udaje mi sie osiagnac takiego efektu. Strona, na ktorej zawartosc zostaje calkowicie przykryta, nawet jak zjedzie sie scrollem na sam dol: KLIK, wystarczy kliknac w sugestie, ktore znajduja sie po prawej stronie (z boku), a strona calkowicie zostaje przyciemniona. Zna ktos rozwiazanie? Ten post edytował cros 19.04.2010, 16:13:38 |
 |
 
|
|
Post
#2
|
|
|
Grupa: Zarejestrowani Postów: 117 Pomógł: 29 Dołączył: 20.05.2009 Ostrzeżenie: (0%)
|
zastosuj position:fixed
|
|
|
|
|
Post
#3
|
|
|
Grupa: Zarejestrowani Postów: 164 Pomógł: 21 Dołączył: 21.08.2009 Ostrzeżenie: (0%)
|
Niestety "position:fixed;" nie dziala w IE, przez co divy nie nakladaja sie na siebie, tylko jeden jest pod drugim.
Czy sa jakies inne mozliwosci? Ten post edytował cros 20.04.2010, 17:04:19 |
|
|
|
|
Post
#4
|
|
|
Grupa: Zarejestrowani Postów: 1 135 Pomógł: 158 Dołączył: 19.03.2009 Skąd: Toruń Ostrzeżenie: (0%)
|
Z tego co wiem to są problemy z position w ie (IMG:style_emoticons/default/biggrin.gif) denerwuję mnie ta przeglądarka ...
|
|
|
|
|
Post
#5
|
|
|
Grupa: Zarejestrowani Postów: 164 Pomógł: 21 Dołączył: 21.08.2009 Ostrzeżenie: (0%)
|
Dokladnie, juz kombinuje na rozne sposoby, raz z opacity, a pozniej z polprzezroczystym png, ale zawsze przykrywa tylko ta czesc strony, ktora na poczatku jest widoczna, po zjechaniu scrollbarem nizej, juz mam normalne tlo.
position:Fixed zalatwia sprawe w FF w 100%, ale jak zwykle IE ma problemy, niestety ludzie nadal korzystaja z tego badziewia i trzeba sie pomeczyc :/ PS! Ma ktos pod reka kod javascript, ktory dopasowuje wysokosc (albo polozenie) diva do wysokosci strony? Probowalem wygooglac, ale nie potrafie sformulowac zapytania, wyskakuja mi rozne dziwne rzeczy, oprocz tego co potrzebuje (IMG:style_emoticons/default/biggrin.gif) W tym przykladzie strony, ktory podalem w 1 poscie, widac ewidentnie ze sprawe zalatwili javascript, bo widac jak div sie "nadpisuje", gdy szybko przewijamy strone. Probowalem podejrzec zrodlo, zeby wyjac czego mi trzeba, ale tam to jest masakra w tym kodzie (IMG:style_emoticons/default/winksmiley.jpg) Ten post edytował cros 20.04.2010, 17:46:17 |
|
|
|
|
Post
#6
|
|
|
Grupa: Zarejestrowani Postów: 428 Pomógł: 128 Dołączył: 17.06.2007 Ostrzeżenie: (0%)
|
"Półprzezroczyste warstwy overlay i okienka div". Aby mieć możliwość przewijania treści w tle daj sobie overflow-x:hidden; i overflow-y:auto;
|
|
|
|
|
Post
#7
|
|
|
Grupa: Zarejestrowani Postów: 1 135 Pomógł: 158 Dołączył: 19.03.2009 Skąd: Toruń Ostrzeżenie: (0%)
|
A wspierasz jeszcze ie 6 ? jak nie to zamiast position: absolute daj te position: fixed; i działa poprawnie pod 7 i 8 (IMG:style_emoticons/default/biggrin.gif)
|
|
|
|
|
Post
#8
|
|
|
Grupa: Zarejestrowani Postów: 164 Pomógł: 21 Dołączył: 21.08.2009 Ostrzeżenie: (0%)
|
Cytat(krzysztof_kf @ 20.04.2010, 18:58:29 )  A wspierasz jeszcze ie 6 ? jak nie to zamiast position: absolute daj te position: fixed; i działa poprawnie pod 7 i 8 (IMG:style_emoticons/default/biggrin.gif) No u mnie pod IE 8 nie dziala fixed, div z tlem laduje pod divem z zawartoscia. |
|
|
|
|
Post
#9
|
|
|
Grupa: Zarejestrowani Postów: 1 135 Pomógł: 158 Dołączył: 19.03.2009 Skąd: Toruń Ostrzeżenie: (0%)
|
A może byś wrzucił dokumentację odpowiednią bo to też dużo daję (IMG:style_emoticons/default/biggrin.gif)
Ten post edytował krzysztof_kf 20.04.2010, 18:25:04 |
|
|
|
|
Post
#10
|
|
|
Grupa: Zarejestrowani Postów: 164 Pomógł: 21 Dołączył: 21.08.2009 Ostrzeżenie: (0%)
|
Cytat(ziqzaq @ 20.04.2010, 18:55:08 ) "Półprzezroczyste warstwy overlay i okienka div". Aby mieć możliwość przewijania treści w tle daj sobie overflow-x:hidden; i overflow-y:auto; To powoduje, ze gdy wyswietli mi sie ta warstwa przykrywajaca tresc strony, to wtedy nie moge korzystac z przewijania, wszystko wraca do normy (mozna przewijac), gdy "przykrycie" zostanie wylaczone - nie wiem czy o to ci chodzilo, ale ten efekt jest nawet fajny, narazie z niego skorzystam, dokpoki nie wykombinuje czegos innego. Cytat(krzysztof_kf @ 20.04.2010, 19:24:24 ) A może byś wrzucił dokumentację odpowiednią bo to też dużo daję (IMG:style_emoticons/default/biggrin.gif)
Mam caly naglowek strony (IMG:style_emoticons/default/winksmiley.jpg) Mysle ze moze nie mam odpowiednio zaktualizowanego IE 8 i dlatego u mnie fixed nie dziala, albo cos w kodzie mam nie tak, co raczej nie wchodzi w gre. |
|
|
|
|
Post
#11
|
|
|
Grupa: Zarejestrowani Postów: 1 135 Pomógł: 158 Dołączył: 19.03.2009 Skąd: Toruń Ostrzeżenie: (0%)
|
Faktycznie patrzyłem po przez ie-tester (IMG:style_emoticons/default/biggrin.gif)
|
|
|
|
|
Post
#12
|
|
|
Grupa: Zarejestrowani Postów: 1 332 Pomógł: 294 Dołączył: 12.10.2008 Skąd: Olkusz Ostrzeżenie: (0%)
|
Cytat(cros @ 20.04.2010, 17:06:39 ) Niestety "position:fixed;" nie dziala w IE, przez co divy nie nakladaja sie na siebie, tylko jeden jest pod drugim. Czy sa jakies inne mozliwosci? są 2 a nawet 3 rozwiązania... ie7 obsługuje position fixed -> musi być w trybie standardów... w ie6 można zemulować to przez odpowiednie ułożenie warstw i nadanie position absolute -> wniosek?? jest position fixed ale leniwy microsoft ;p : CSS Emulating Fixed Positoning -> Prosty sposób na IE dalej... w sieci jest fajny skrypt -> google i klep jak najszybciej "ie7 javascript" (lub js - projekt hostowany przez google)... i działa position fixed na ie6 (IMG:style_emoticons/default/winksmiley.jpg) to pseudo trzecie rozwiązanie już nie jest rewelacyjne gdyż polega na tym, iż masz warstwę z całą stroną rozciągniętą... dajesz jej position relative i na końcu niej (jeszcze w niej ale na końcu) dodajesz tą warstwę co chciałeś z position absolute... dajesz left i top 0px i height (pewnie błąd ;p) 100% i szerokość 100% - rozciągnie się na całą warstwę ale będzie można niestety przewijać -> więc pierwsze 2 rozwiązania do tego lepiej będą wyglądać (IMG:style_emoticons/default/winksmiley.jpg) ps. w ie6 png przezroczystość jest ale nie pamiętam jakie - bodajże na 8 bitów?? [sorki nie chcę w błąd wprowadzać - ale nie ma pełnej przezroczystości bez skryptów] Ten post edytował zegarek84 20.04.2010, 19:37:47 |
|
|
|
|
Post
#13
|
|
|
Grupa: Zarejestrowani Postów: 428 Pomógł: 128 Dołączył: 17.06.2007 Ostrzeżenie: (0%)
|
Cytat To powoduje, ze gdy wyswietli mi sie ta warstwa przykrywajaca tresc strony, to wtedy nie moge korzystac z przewijania, wszystko wraca do normy (mozna przewijac), gdy "przykrycie" zostanie wylaczone - nie wiem czy o to ci chodzilo, ale ten efekt jest nawet fajny, narazie z niego skorzystam, dokpoki nie wykombinuje czegos innego. A próbowałeś tego co napisałem o overflow? //Edit: Jak chcesz to szybko przetestować to otwórz sobie demo z tej stronki i w Firebugu wyedytuj styl overflow body tak jak napisałem wcześniej. Ten post edytował ziqzaq 20.04.2010, 19:51:39 |
|
|
|
|
Post
#14
|
|
|
Grupa: Zarejestrowani Postów: 164 Pomógł: 21 Dołączył: 21.08.2009 Ostrzeżenie: (0%)
|
Cytat(krzysztof_kf @ 20.04.2010, 19:24:24 ) A może byś wrzucił dokumentację odpowiednią bo to też dużo daję (IMG:style_emoticons/default/biggrin.gif) Patrzylem tysiac razy i tego nie zobaczylem Kod <meta http-equiv="X-UA-Compatible" content="IE=5"> Przez ta linijke wszystko sie sypalo w IE8, bez tego smiga. Cytat(ziqzaq) A próbowałeś tego co napisałem o overflow? //Edit: Jak chcesz to szybko przetestować to otwórz sobie demo z tej stronki i w Firebugu wyedytuj styl overflow body tak jak napisałem wcześniej. po usunieciu tej linijki, o ktorej napisalem wyzej, wszystko smiga jak nalezy. Dzieki chlopaki za pomoc (IMG:style_emoticons/default/biggrin.gif) 2 dni i mnostwo nerw straconych przez bezmyslne kopiowanie naglowkow (IMG:style_emoticons/default/sad.gif) EDIT: Jednak problem stanowi cos innego, otoz po wpisaniu tego Kod <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> Nie dziala position:fixed w IE8, ale za to dziala Kod <a href='java script:funkcja();">KLIK</a> Ale jesli dam Kod <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> to Fixed dziala w IE8, ale za to nie dziala odwolanie do funkcji javascript w FF. Normalnie mam juz odsyc (IMG:style_emoticons/default/smile.gif) Ten post edytował cros 21.04.2010, 14:43:00 |
|
|
|
|
|
Aktualny czas: 26.09.2025 - 20:37 |
