Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Pozycjonowanie div-a względem bottom okna przeglądarki
Forum PHP.pl > Forum > Po stronie przeglądarki
Czadus
Jak w temacie. Sam nie wiedziałem, pod jakimi hasłami dokładnie tego szukać. Zatem mam potrzebę umieszczenia pewnego obrazka, niezależnie od całej zawartości strony, wyrównując zawsze względem dołu przeglądarki. Nieważne, gdzie jestem na stronie, czy przesuwam ją w dół, czy w górę, element ten jest zawsze na dole przeglądarki pod całą zawartością strony. Ma to być taki element tła.

Piszę o tym w tym temacie, chociaż nie do końca jestem przekonany, czy we właściwym nie wiedząc również, z czego dokładnie skorzystać do stworzenia takiego efektu.
wookieb
position: fixed,
bottom: 0px;

A teraz możesz szuakc w google.
Czadus
Moje poszukiwania doprowadziły mnie do następującego rozwiązania:

Kod
.warstwaNiezaleznaBottom
{
     width: 70%;
     height: 100%;
     position: fixed !important;
     position: absolute;
     top: 70%;
     margin-bottom: 0px;
     left: 30%;
     z-index: -3;
}


Oczywiście zmuszony byłem dodać drobną poprawkę pod IE. Na chwilę obecną testując element pod IE6, IE7, Opera, FF, Safari, nie zauważyłem błędów w działaniu elementu. Zatem chyba wszystko jest OK.

Hej. Niestety pozycjonowanie to nie działa.

Czasami na stronach internetowych na dole przeglądarki widnieje pasek, ktory jest tam umieszczony zawsze, mimo przewijania strony. za pomocą CSS nei jestem tego w stanie osiągnąć. A może coś pod JS?? ma ktoś jakiegoś pomysła na takie cośquestionmark.gif
wookieb
Piszesz funkcje ktora ustawia wlasciwosc TOP dla tego elementu

Kod
element
{
position: absolute;
z-index: 100;
}


Funkcja wyglada mniej wiecej tak ze pobierasz wysokosc okna i odejmuejsz wysokosc elementu.
Funcje wywolujesz dla zdarzen window.onScroll , window.onResize, window.onLoad
Czadus
Hej.

Pod adresem http://new.parastudio.pl/pl/aktualnosci/ znajduje się strona. Na dole mam dwie zawartości. Jedna to takie paski powtarzające się w poziomie, druga, to copyrights nad nimi. Wszystko jest ok przy ekranach ze stosunkowo małą rozdzielczością ekranu. Gdy jednak ktoś uruchomi stronę na rozdz. np. 2000px na ...... to okazuje się, że te paski są w połowie ekranu i w tym momencie te paski powinny znaleźć się przy bottom ekranu. Jak to zrobić??

Mam np. taki oto przykład http://www.wickham43.net/footerfix.php

i wszystko mogłoby działać, gdyby moja strona nie miała takiej struktury, jaką ma obecnie. I skrypt ten na tę chwilę nie udało mi się poprawnie wstawić na stronę.

Ma ktoś może inną koncepcję na to?? Jakąkolwiek w czymkolwiek??
R&R
Popraw strukturę..

I daj tego swojego diva ->div class="mainLine2" jako naprawdę ostatniego przed </body

Sam znalazłeś i dałeś świetny przykład.. podejrzałeś źródło?

U gościa ten dolny div wyglada tak:

  1. <!--end of container4-->
  2.  
  3. <div id="footer2">
  4. <p style="padding: 0; margin: 0;">&copy; Wickham 2008</p>
  5. </div>
  6.  
  7. </body>


natomiast style i opis do tych styli wygląda tak:

  1. <style type="text/css">
  2. /*<![CDATA[*/
  3. <!--
  4. html, body { height: 100%; margin: 0; padding: 0; }
  5. #container4 { width: 730px; margin: 0 auto; border: 0; padding: 0 20px; min-height: 100%; }
  6. * html #container4 { height: 100%; } /*IE browsers less than IE7*/
  7. #clearfooter { height: 45px; border: 0; margin: 0; padding: 0; }
  8. #footer2 { width: 100%; text-align: center; height: 35px; padding: 10px 0 0 0; margin: -45px auto 0 auto; border: 0; background-color: #ccccc2; }
  9. html { overflow-y: scroll; } /*to create a vertical dummy scrollbar in Firefox or Safari which would not have a scrollbar with height 100%. If you move to and from pages which don't have a vertical scrollbar to a page which does, it makes the page content jump sideways without a forced dummy scrollbar (works in Firefox and Safari but not in Opera; IE always shows a dummy scrollbar; Opera needs min-height and height: 101% in the container styles but it causes a standard scrollbar, not a dummy, and is less correct.)*/
  10. #container4 h1 { margin: 0px; padding: 0px; }
  11. //-->
  12. /*]]>*/


Natomiast style Twojego diva : < div class="mainLine2" ></ div>, (stopy strony), wyglądają tak:

  1. .mainLine2
  2. {
  3. width: 100%;
  4. height: 136px;
  5. float: left;
  6. background-image: url('/pliki/grafika/backgroundBottom.jpg');
  7. margin-top: 15px;
  8. }


Poza tym, tu: http://www.dave-woods.co.uk/?p=170 jest to naprawdę przejrzyście opisane..

Myślę, że poradzisz sobie z przestawieniem klocków? No nic, nie będę Ci odbierał miłej zabawy winksmiley.jpg

Pozdrawiam
rr
Czadus
Niestety nie udało się doprowadzić tego do ładu..... Głównie przez ten boczny panel z formularzem.....
R&R
Boczny panel jest spoko, z tymi paskami na dole też fajnie to wyglada..
Nic Ci nie podpowiedziały moje sugestie?

Powiem to dokładniej.. Zobacz, wysuwa się panel boczy, przepychając tę dolną grafikę, co oczywiście powoduje pojawienie się dolnego suwaka, który jak wiemy jest to wstyd jak beret dla webmastera nie? hehe

Mógłbyś choć przykleić niewidzialną 1px'elowa grafikę, żeby ta dolna w paski wsuwała się pod nią..
ja jednak zaproponowałem coś innego.. Tak bardzo Ci zalezy na efekcie hmm nie wiem "tłoka", moim zdaniem ten wysuwany panej powinien chodzić, na tym dolnym "pasiaku", tj. po nim. Wcale nie stracilbyś efektu, gdyby panel wysuwał się nad "pasiakiem", wiesz ślizgał się po jego górnej krawędzie nie powodując przepychania prawej krawędzi strony i pojawiania się suwaka.. rozważ to, bo to byłoby dla najprostrze do wykonania zadanie, o czym pisałem wyżej.

Przynajmnie podziel "pasiaka" i nich się wsuwa pod siebie, ja bym dał go na sam dół, czyli również pod diva z panelem, przynajmniej to przetestuj wizualnie..

Rzuciło mi się jeszcze cos, bez urazy winksmiley.jpg

Masz tam odrobinkę textu.. i zmieniłbym jedno wyrażenie.. Piszesz:

Cytat
Witamy wszystkich serdecznie. Mamy nadzieje, że dużo z Was czekało na ta stronę. Zajęło nam to troche dłużej niż planowaliśmy, ale czasami warto poczekać. Dla tych, którzy od dawna mieli ochotę zobaczyć czym sie zajmujemy mowimy


Nawet ten brak ęcji.. nie jest tak rażący jak zwrot: "Mamy nadzieje, że dużo z Was" hmm to jak byś mówił o np. cukierkach w słoiku.. tych może być dużo..

Proponowałbym to zamienić na "Wielu" - czyli byłoby: "Mamy nadzieje, że wielu z Was czekało na ta stronę", przynajmniej brzmi po ludzku..

To było tak btw. nawet to nie krytyka, rozumiesz? - nie traktuj tego personalnie.. i popraw to bo mocno razi..

Przemyśl też moją propozycję z panelem i paskowana grafiką..

Pozdrawiam smile.gif
rr.
Czadus
Oczywiście niczym się nie przejmuję, bo duży wpływ na to, co dzieje się na stronie ma osoba, która projekt zleciła i proszę mi wierzyć, strasznie narzeka i co chwilę coś zmienia, więc i koncepcja z paskiem już kilka razy ulegała większej lub mniejszej modyfikacji. Teraz także nie jest to rzecz ostateczna. Co do tekstów, to wciąż czekamy na dostarczenie tych oficjalnych, więc nie przykuwałbym do nich aż tak szczególnej uwagi :] Fakt faktem za uwagi dzięki :]
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.