Pozycjonowanie div-a względem bottom okna przeglądarki Opcje

[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ś

[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:

[HTML] pobierz, plaintext 
<!--end of container4-->
 
<div id="footer2">
<p style="padding: 0; margin: 0;">&copy; Wickham 2008</p>
</div>
 
</body>
[HTML] pobierz, plaintext 

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

[HTML] pobierz, plaintext 
<style type="text/css">
/*<![CDATA[*/
<!--
html, body { height: 100%; margin: 0; padding: 0; }
#container4 { width: 730px; margin: 0 auto; border: 0; padding: 0 20px; min-height: 100%; }
* html #container4 { height: 100%; } /*IE browsers less than IE7*/
#clearfooter { height: 45px; border: 0; margin: 0; padding: 0; } 
#footer2 { width: 100%; text-align: center; height: 35px; padding: 10px 0 0 0; margin: -45px auto 0 auto; border: 0; background-color: #ccccc2; } 
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.)*/
#container4 h1 { margin: 0px; padding: 0px; }
//-->
/*]]>*/
</style>
[HTML] pobierz, plaintext 

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

[HTML] pobierz, plaintext 
.mainLine2 
{ 
	width: 100%; 
	height: 136px; 
	float: left; 
	background-image: url('/pliki/grafika/backgroundBottom.jpg'); 
	margin-top: 15px; 
}
[HTML] pobierz, plaintext 

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

Pozdrawiam
rr

Ten post edytował R&R 2.03.2009, 08:32:39

[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

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

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
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 :]