• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Wyśrodkowany, przyklejony footer do dołu strony - HTML/CSS

Aruba Cloud - Virtual Private Server VPS
0 głosów
2,947 wizyt
pytanie zadane 14 kwietnia 2016 w HTML i CSS przez RedMartin Użytkownik (640 p.)

Witam!
Bawię się w tworzeniem stron internetowych, ale mam jeden problem. Jako stopkę chce ustawić grafikę. Wyznaczyłem jej szerokość i wysokość. Następnie użyłem "footer{ margin-left: auto; margin-right: auto; }" co mi wyśrodkowało ładnie grafikę,  a następnie chciałbym, aby obrazek pojawił się u dołu strony. użyłem do tego "footer{ bottom: 0; position: absolute; }"
I wtedy mam problem, bo "position: absolute" przesuwa wszystko w mój dolny lewy róg.
Jak mogę rozwiązać mój problem?


Kod css:
 

footer{
	background-image: url(png/footer.png); 	
	height: 57px;
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0px;
	bottom: 0;
	position: absolute;
}

 

4 odpowiedzi

+1 głos
odpowiedź 15 kwietnia 2016 przez Eimens Maniak (69,240 p.)
wybrane 15 kwietnia 2016 przez RedMartin
 
Najlepsza

Dodaj do footer 

   left: calc(50% - 500px);
   right: calc(50% - 500px);

calc oznacza w css obliczanie ustawiłem ci odstęp od lewej krawędzi to 50% szerokości strony - 1/2 szerokości footer, co powoduje jej wyśrodkowanie. 

 

Do tego możesz dodać position: fixed; 

komentarz 15 kwietnia 2016 przez RedMartin Użytkownik (640 p.)
Pięknie dział, dzięki!
Bardzo przydatna wiedza! =)
komentarz 15 kwietnia 2016 przez RedMartin Użytkownik (640 p.)
A da się zrobić tak, by przy dłuższej treści stopka nie była na stałe przypięta do dołu strony?
komentarz 16 kwietnia 2016 przez Eimens Maniak (69,240 p.)

tak height ustawiłeś. 

komentarz 16 kwietnia 2016 przez RedMartin Użytkownik (640 p.)

Niezbyt rozumiem. height ustawiłem tylko do wysokości stopki. Próbowałem margin-top: calc(100%-57); ale to pobiera wysokość wcześniejszych elementów, a nie całego ekranu.

komentarz 16 kwietnia 2016 przez Eimens Maniak (69,240 p.)
Ahh o to ci chodzi, to możesz dla body dać position: relative a dla footer daj aboslute a nie fixed :p
komentarz 16 kwietnia 2016 przez RedMartin Użytkownik (640 p.)

Ale teraz stopka się przykleja do diva umieszczonego wyżej,  a chodzi o to, by jak ktoś ma wysokość pulpitu mniejszą, to ona nie zasłaniała treści, a gdy ktoś ma większą, to by nie wisiała gdzieś w powietrzu, tylko u dołu ekranu
 

body{
	background-image: url(png/zestaw.png);
	background-size: 100%;
	font-size: 20px;
	margin: 0;
	position: relative;
}
footer{
	background-image: url(png/footer.png); 	
	height: 57px;
	width: 1000px;
	bottom: 0;
	position: fixed;
	left: calc(50% - 500px);
	right: calc(50% - 500px);
}

 

komentarz 16 kwietnia 2016 przez Eimens Maniak (69,240 p.)
zamiast fixed daj absolute i do body dodaj margin-bottom o wysokościu footer
komentarz 16 kwietnia 2016 przez RedMartin Użytkownik (640 p.)
I w tym momencie znowu footer zasłania treść contentu zostając w jednym niezmiennym miejscu :/
+1 głos
odpowiedź 14 kwietnia 2016 przez radek024 Szeryf (77,160 p.)

Próbuj z position:fixed; . 

PS: po tagach nie stylizujemy! :P

komentarz 14 kwietnia 2016 przez RedMartin Użytkownik (640 p.)

Z position:fixed; próbowałem, ale nie działało.

"PS: po tagach nie stylizujemy! :P" - Niezbyt czaję o co chodzi :/

1
komentarz 15 kwietnia 2016 przez RedMartin Użytkownik (640 p.)
W sensie nie powinienem stylizować footer, tylko stworzyć jak już w niej klasę/id i go dopiero stylizować?
1
komentarz 15 kwietnia 2016 przez radek024 Szeryf (77,160 p.)
Dokładnie tak ;)
0 głosów
odpowiedź 14 kwietnia 2016 przez Mariusz O Mądrala (5,290 p.)
https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

Można się bawić, jeżeli niekoniecznie patrzysz na wsteczne wsparcie.
0 głosów
odpowiedź 15 kwietnia 2016 przez Mateusz11 Pasjonat (22,910 p.)

1.

się w tworzeniem

2. Tak jak koledzy pisali, position: fixed;

Podobne pytania

0 głosów
1 odpowiedź 683 wizyt
0 głosów
2 odpowiedzi 1,771 wizyt
pytanie zadane 11 kwietnia 2016 w HTML i CSS przez BlauVeB Początkujący (410 p.)
0 głosów
1 odpowiedź 176 wizyt
pytanie zadane 28 lutego 2018 w HTML i CSS przez Kamilos1906 Nowicjusz (240 p.)

93,329 zapytań

142,323 odpowiedzi

322,400 komentarzy

62,662 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...