• 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 PRO i VPS, Openstack, VMWare, MS Hyper-V
0 głosów
1,737 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,560 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,560 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,560 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,560 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,500 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,500 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,930 p.)

1.

się w tworzeniem

2. Tak jak koledzy pisali, position: fixed;

Podobne pytania

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

89,777 zapytań

138,386 odpowiedzi

309,502 komentarzy

59,681 pasjonatów

Advent of Code 2022

Top 15 użytkowników

  1. 1088p. - Argeento
  2. 1032p. - nidomika
  3. 1024p. - rucin93
  4. 1020p. - Michal Drewniak
  5. 1014p. - Łukasz Eckert
  6. 1006p. - Mikbac
  7. 988p. - TheLukaszNs
  8. 963p. - JMazurkiewicz
  9. 960p. - adrian17
  10. 945p. - Jarosław Roszyk
  11. 941p. - Hubert Chęciński
  12. 920p. - Mawrok
  13. 914p. - overcq
  14. 859p. - ssynowiec
  15. 848p. - Adam Salamon
Szczegóły i pełne wyniki

Motyw:

Akcja Pajacyk

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

Sklep oferujący ćwiczenia JavaScript, PHP, rozmowy rekrutacyjne dla programistów i inne materiały

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...