• 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

VPS Starter Arubacloud
0 głosów
2,381 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,180 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,180 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ź 466 wizyt
0 głosów
2 odpowiedzi 1,383 wizyt
pytanie zadane 11 kwietnia 2016 w HTML i CSS przez BlauVeB Początkujący (410 p.)
0 głosów
1 odpowiedź 132 wizyt
pytanie zadane 28 lutego 2018 w HTML i CSS przez Kamilos1906 Nowicjusz (240 p.)

92,452 zapytań

141,262 odpowiedzi

319,080 komentarzy

61,854 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.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...