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

Problem ze stopką.

VPS Starter Arubacloud
+1 głos
557 wizyt
pytanie zadane 11 czerwca 2015 w HTML i CSS przez lukaszgo3 Początkujący (440 p.)
Mój pierwszy post więc na początku witam wszystkich ;)

Mam mały problem z footerem; bardzo ładnie trzyma sie dolnej strony do momentu aż tresc strony okaze sie niewystarczajaca aby mozna bylo zjechac nizej, tym samym stopka pojawia sie zaraz pod ostatnim obiektem, nawet jezeli ten jest na srodku, tym samym stopke nagle widzimy na srodku strony.

Jakies sugestie? ;)

5 odpowiedzi

+2 głosów
odpowiedź 11 czerwca 2015 przez Comandeer Guru (599,730 p.)

http://www.forumweb.pl/html/stopka-na-samym-dole-strony/201284#201284 → jak dotąd nigdy mnie sposób Roberto nie zawiódł ;)

komentarz 15 grudnia 2015 przez Zine Obywatel (1,000 p.)
Dwa tygodnie męczę się ze stopką, flex box działał, choć powodował zwężenie wrapu, więc nie mogłem z niego korzystać. Szukałem w googlu, szukałem po forach... Czemu ten post z 2007 roku nie był wcześniej dla mnie osiągalny? Nie wiem, ale działa bajecznie. Bardzo Ci dziękuję za podlinkowanie tego! :)
0 głosów
odpowiedź 11 czerwca 2015 przez SebastianGomularz Dyskutant (9,370 p.)
Pokaż kod tak trudno jest wywnioskować co jest złe
0 głosów
odpowiedź 11 czerwca 2015 przez Adrian1999 Nałogowiec (34,570 p.)
Dawno w webdeveloperce się nie bawiłem, ale zdaje mi się że https://developer.mozilla.org/en-US/docs/Web/CSS/max-height powinno dać radę, kiedyś też taki problem miałem. Edit // Dla treści
0 głosów
odpowiedź 11 czerwca 2015 przez lukaszgo3 Początkujący (440 p.)
/*---------------------------------
:: STOPKA
---------------------------------*/
#footer {
    text-align: center;
	color: #f5f5f5;
	border-top: 1px solid #1f1f1f;
	background: #303030;
	height: 110px;
	width: 100%;
	text-shadow: 1px 1px 0px #4a4a4a;
	font-size: 13px;
	box-shadow: inset 0px 10px 20px rgba(0,0,0,0.2);
}
#footer a { color: #f5f5f5; }
#footer .furniture {
	width: 700px;
	margin: 0 auto;
	padding-top: 10px;
}
#footer .links {
	text-transform: uppercase;
	font-weight: bold;
}
#footer .links a {
	color: #f5f5f5; 
	text-decoration: none; 
	margin: 0px 0px 0px 0px;
 }
 #footer .links a:hover {
	text-decoration: none; 
	border-bottom: 2px solid #f5f5f5;
 }
 #footer .links img {
	position: relative;
	margin: 0px 5px -2px 5px;
 }
 #footer .copyrights {
	display: block;
	margin-top: 12px;
	font-size: 12px;
 }
#right_info {
    margin-left: auto;
    margin-right: auto;
    width: 40%;
    color: #ffffff;
 }

 

komentarz 11 czerwca 2015 przez Comandeer Guru (599,730 p.)

Pokaż CAŁY kod HTML i CSS, najlepiej w formie demo na jsfiddle.net - będzie łatwiej ogarnąć i poprawić.

komentarz 12 czerwca 2015 przez lukaszgo3 Początkujący (440 p.)
komentarz 12 czerwca 2015 przez Comandeer Guru (599,730 p.)

http://jsfiddle.net/Comandeer/Lctvsh6L/

Stopce dodałem position: absolute a dla html, body ustawiłem height: 100%, natomiast później już dla samego body min-height: 100% i position: relative. Tym sposobem nawet przy pustej stronie stopka jest na dole

komentarz 12 czerwca 2015 przez lukaszgo3 Początkujący (440 p.)
Stopka co prawda jest widoczna caly czas an dole przegladarki, ale przy scrolowaniu w dol przesuwa sie na srodek ekranu i zachowuje sie wtedy jakby byla fixed, do tego ucieka na prawo i ucina z lewej ;(
komentarz 12 czerwca 2015 przez Comandeer Guru (599,730 p.)
Coś jest nie tak raczej w reszcie kodu w takim razie…
komentarz 12 czerwca 2015 przez lukaszgo3 Początkujący (440 p.)
Jutro zacznę szukać to może coś znajdę,  co prawda nie wiem gdzie zacząć,  ale od czegoś trzeba :)

W każdym razie dzięki wielkie za odpowiedzi,  może dzięki temu coś mi zaświta.
0 głosów
odpowiedź 11 czerwca 2015 przez Geek Pasjonat (19,660 p.)
html,
body {
	margin:0;
	padding:0;
	height:100%;
}

.content {
	padding-bottom:50px;
}
 
footer {
	height: 50px;
	position:absolute;
	bottom:0;
	left:0;
}

.content to klasa kontenera nad footerem.

Jego padding-bottom jest równy wysokości footera :)

komentarz 11 czerwca 2015 przez lukaszgo3 Początkujący (440 p.)

Jak dodaje height: 100%; do

* {padding: 0; margin: 0; }

 

To rozwala sie cała strona, reszta krokow bez zarzutów.

komentarz 11 czerwca 2015 przez Comandeer Guru (599,730 p.)
Ta metoda nie działa jeśli strona jest dłuższa niż jeden ekran. W takim wypadku należy zastosować metodę Roberto, którą podlinkowałem.
komentarz 11 czerwca 2015 przez Comandeer Guru (599,730 p.)

@lukaszgo3 bo masz to wstawić dla html, body a nie dla wszystkich elementów na stronie.

komentarz 11 czerwca 2015 przez lukaszgo3 Początkujący (440 p.)

Tak wygląda początek CSS'a

@import url(http://fonts.googleapis.com/css?family=PT+Sans+Narrow&subset=latin,latin-ext);
* {padding: 0; margin: 0; }
body {
	background-color: #eee;
	background-image: url('img/1_body.jpg');
	background-position: top, 100px;
	background-repeat: repeat;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 13px;
    margin-top: 60px;
    min-height: 100%;
    position: relative;
}
a  {color: #e7e7e6;text-decoration: none;}
a:hover{color: #23678a; text-decoration: underline;}
img { border: 0; }
#wrapper { 
	margin:  auto;
	width: 1350px;
	margin-bottom: 0px;
}

Jak widać nie ma tam nawet HTML ;(

komentarz 11 czerwca 2015 przez Comandeer Guru (599,730 p.)

Ermm… To dlaczego po prostu nie dopiszesz na początku regułki dla html, body?

komentarz 11 czerwca 2015 przez lukaszgo3 Początkujący (440 p.)
@import url(http://fonts.googleapis.com/css?family=PT+Sans+Narrow&subset=latin,latin-ext);
html
{padding: 0; margin: 0; height: 100%; }
body {
	background-color: #eee;
	background-image: url('img/1_body.jpg');
	background-position: top, 100px;
	background-repeat: repeat;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 13px;
    margin-top: 60px;
    min-height: 100%;
    position: relative;

Aktualnie wygląda to tak. Niestety stopka nie zmienila polozenia.

Podobne pytania

+1 głos
5 odpowiedzi 373 wizyt
pytanie zadane 6 grudnia 2015 w HTML i CSS przez Zine Obywatel (1,000 p.)
0 głosów
0 odpowiedzi 236 wizyt
pytanie zadane 27 lutego 2019 w HTML i CSS przez zerakot Obywatel (1,870 p.)
0 głosów
2 odpowiedzi 887 wizyt
pytanie zadane 5 czerwca 2018 w HTML i CSS przez Virtual Nowicjusz (120 p.)

92,451 zapytań

141,261 odpowiedzi

319,073 komentarzy

61,853 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!

...