GoldenLine
Zaloguj się
Maja Miarecki

Maja Miarecki Senior Frontend
Developer

Temat: pozycjonowanie divow i puste pole w ich miejscu

Witajcie,

mam div ze stopka, na ktory nachodzi div z kontentem (fantazja grafika), ze wzgledu na to, ze nie znam dlugosci strony wszedzie mam position: relative i ustalanie pozycji kolejnego diva wzgledem poprzedniego.

I wszystko wygladaloby OK, gdyby nie to, ze pod ostatnim divem zostalo mi puste miejsce (na skutek przesuniecia ostatniego diva troche do gory).

Bede wdzieczna za rady jak to usunac... chcialabym, zeby strona konczyla sie na ostatnim divie, tak jak jest on widziany przez uzytkownika.
Link do wypowiedziLink

konto usunięte

Temat: pozycjonowanie divow i puste pole w ich miejscu

Maju nie narzekam na wyobraźnie, ale to chyba mnie przerasta. Może rzut ekranu?Krzysztof Tomasz Jasiak edytował(a) ten post dnia 22.12.10 o godzinie 15:22
Link do wypowiedziLink
Maja Miarecki

Maja Miarecki Senior Frontend
Developer

Temat: pozycjonowanie divow i puste pole w ich miejscu

Bardzo prosze i od razu przepraszam za niezbyt plastyczne wyjasnienie :)


Obrazek


Chodzi o czywiscie o szare miejsce pod zielona belka, ktora jest stopka. Stopka zostala podniesiona, zeby wejsc pod bale tlo (kontent)Maja Miarecka edytował(a) ten post dnia 22.12.10 o godzinie 15:28
Link do wypowiedziLink

konto usunięte

Temat: pozycjonowanie divow i puste pole w ich miejscu

Maja Miarecka:
Chodzi o czywiscie o szare miejsce pod zielona belka, ktora jest stopka. Stopka zostala podniesiona, zeby wejsc pod bale tlo (kontent)

Pozycjonowanie relatywne to nie jest dobry pomysł w tym przypadku. Szara trawa jako tło dla body, zielony gradient jako tło dla zewnętrznego diva i będzie grać.
Link do wypowiedziLink
Maja Miarecki

Maja Miarecki Senior Frontend
Developer

Temat: pozycjonowanie divow i puste pole w ich miejscu

body ma w tle szara trawe oraz szary kolor (dla wyzszych rozdzielczosci), div ze stopka ma w tle zielony gradient. Zalezy mi na pozycjonowaniu a nie na pocieciu layoutu w paski, bo tak to kazdy umie. Mialam nadzieje, ze ktos zna jakis tip, zeby wyeliminowac miejsce po divie przesunietym do gory. ustawienie marginesu na wartosc ujemna (znalazlam takie rozwiazanie w necie) niestety nie skutkuje.

i dlaczego uwazasz, ze pozycjonowanie relatywne jest w tym przypadku zlym rozwiazaniem? Jak inaczej wsunac stopke pod kontent (bez ciecia layoutu na poziome pasy)?
Link do wypowiedziLink
Łukasz Stępa

Łukasz Stępa Front-End developer

Temat: pozycjonowanie divow i puste pole w ich miejscu

Czyli w tej chwili zielona stopka jest podniesiona marginem?
Trzeba pamiętać że position: relative zmienia położenie jakiegoś diva na ekranie, ale z tego co wiem nadal przypisuje mu miejsce tam gdzie normalnie powinien sie znajdować. Dlatego przypuszczam że tak jak pisał wcześniej jeden z użytkownikow, w tym przypadku gdyby kontener okalający miał przypisane zielone tło dla stopki to wszystko kończyło by się tam gdzie powinno :)

Łatwiej było by coś stwierdzić widząc samą stronę ale rozumiem że jest w trakcie cięcia.
Link do wypowiedziLink
Maja Miarecki

Maja Miarecki Senior Frontend
Developer

Temat: pozycjonowanie divow i puste pole w ich miejscu

Zielona stopka to div o wysokosci 116px i szerokosci 100%, background tego diva to powielajacy sie obrazek o szerokosci 1px i wysokosci 116px.

Pozycjonuje go uzywajac position: relative i top -61px.

Po dokladnym doczytaniu widze, ze raczej nikt nie znalazl sposobu na "oszukanie przegladarki" przy pozycjonowaniu relatywnym. Wiem, ze przegladarka pamieta miejsce, w ktorym pierwotnie znajdowal sie div.

Najchetniej uzylabym pozycjonowania absolutnego, ale nie znam dokladnych wartosci pixelowych, tak wiec to odpada.
Link do wypowiedziLink
Łukasz Stępa

Łukasz Stępa Front-End developer

Temat: pozycjonowanie divow i puste pole w ich miejscu

no to te 61px minusowe to właśnie ten niechciany szary pasek na dole, dlatego napisalem o kontenerze z bakcgroundem jako zielony pasek bez pozycjonowania relatywnego co ułatwiło by myśle sprawe. Ale jak już musi być to pozycjonowanie relatywne to niestety nic mi nie przychodzi do głowy tak na sucho jak można to usunąć. Może kto inny borykał się z podobnym przypadkiem i będzie umiał pomóc. Ja mogę spróbować pomóc na gorąco widząc ten szablon przed sobą na jakims http np.
Link do wypowiedziLink
Ivo Bogucki

Ivo Bogucki Grafik, Koder
HTML/CSS/JS /
tanieprojektowanie.c
om / avan...

Temat: pozycjonowanie divow i puste pole w ich miejscu

kiedyś tez miałem taki problem z tłem w stopce, ale zrobiłem następująco i działa:
-robisz 2 div jeden pod drugim w body
-każdemu dajesz inne id
-w pierwszym będzie górna cześć serwisu
-w drugim cześć dot stopki
-w css dla body ustalasz tło zielone (ostatni odcien tla stopki)
-pierwszemu divowi dajesz szare tlo przez css
-potem w każdym z divow dajesz swoje zawartości (divy, i inne bloki tekstowe itd) którym nadajesz szerokość i margin '0 auto' (dot tylko xhtml)

dobrze piszę?
Link do wypowiedziLink
Maja Miarecki

Maja Miarecki Senior Frontend
Developer

Temat: pozycjonowanie divow i puste pole w ich miejscu

Poradzilam sobie ciut inaczej.

Mam dwa glowne divy (wczesniej byly 3, ale stopke usunelam). W drugim (kontent) wrzucilam na dol jako background (background image: url(); background-position: bottom) ten moj nieszczesny zielony gradient i ustawilam padding-bottom i bangla :)

Ale teraz borykam sie z innym problemem, moze ktos robil cos podobnego i bedzie mogl podzielic sie wiedza. Dla ulatwienia opisze, na tym samym layoucie.

Zalozmy, ze grafik sobie wymyslil, zeby stopka (zielony gradient) trzymal sie dolu przegladarki (position: absolute; bottom: 0) jesli tresc nie zajmuje calej strony. Jesli jednak tresci jest wiecej, to zeby zachowywal sie jak na kazdej innej stronie - czyli byl na dole (do zobaczenia po przesunieciu scrollbara przegladarki).

Umiem osiagnac jeden z efektow na raz... Ktos moze wie, jak to polaczyc? Myslalam o JS, ale zeby sprawdzic wysokosc DIVa musze poczekac az strona sie zaladuje i wtedy ewentualnie operowac na DOM, ale to spowoduje zmiany na juz zaladowanej stronie a na to pozwolic sobie nie moge...Maja Miarecka edytował(a) ten post dnia 22.12.10 o godzinie 21:22
Link do wypowiedziLink

konto usunięte

Temat: pozycjonowanie divow i puste pole w ich miejscu

http://www.cssstickyfooter.com/
Link do wypowiedziLink
Maja Miarecki

Maja Miarecki Senior Frontend
Developer

Temat: pozycjonowanie divow i puste pole w ich miejscu

Dzieki o to wlasnie chodzilo :)
Link do wypowiedziLink
« Wróć do tematów
Odpowiedz

Podobne tematy





Wyślij zaproszenie do
Anuluj