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

Question

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;
}

 

Answer 1

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; 

Comments

Pięknie dział, dzięki!
Bardzo przydatna wiedza! =)

---

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?

---

tak height ustawiłeś. 

---

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.

---

Ahh o to ci chodzi, to możesz dla body dać position: relative a dla footer daj aboslute a nie fixed :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);
}

 

---

zamiast fixed daj absolute i do body dodaj margin-bottom o wysokościu footer

---

I w tym momencie znowu footer zasłania treść contentu zostając w jednym niezmiennym miejscu :/

Answer 2

Próbuj z position:fixed; . 

PS: po tagach nie stylizujemy! :P

Comments

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

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

---

@RedMartin https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writing_efficient_CSS

---

W sensie nie powinienem stylizować footer, tylko stworzyć jak już w niej klasę/id i go dopiero stylizować?

---

Dokładnie tak ;)

Answer 3

https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

Można się bawić, jeżeli niekoniecznie patrzysz na wsteczne wsparcie.

Answer 4

1.

się w tworzeniem

2. Tak jak koledzy pisali, position: fixed;