Stopka brak przyklejenia do dolnej cześci ekranu

pytanie zadane 7 kwietnia 2016 w HTML i CSS przez KonDZIKs Bywalec (2,770 p.)
zamknięte 8 kwietnia 2016 przez KonDZIKs

Witam mam problem ze stopką. Chodzi o to ,że chce żeby była cały czas na dole a ona przesuwa mi się do zakończenia tekstu oraz to ,że można przesuwać stronę w bok.

Kod HTML

<!DOCTYPE>
<html lang="pl">
<head>
<meta charset="utf-8"/>
<title>Strona pokemon</title>
<meta name="description" content="Serwis poświęcony pokemonom dokładniej grze pokexgames."/>
<meta name="keywords" content="poki, tutorial, pokemony, rodzaje, pomoc, pokexgames tutorial, pokexgames poradnik"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

<link href="style.css" rel="stylesheet" type="text/css" />
<link href='https://fonts.googleapis.com/css?family=Shadows+Into+Light+Two&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="duzepudlo">
	<div class="naglowek">
		<div class="logo"><img src="pokemon.png">
		<div style="clear:both;"></div>
		</div>
	</div>
	<div class="menu">
		<ol>
			<li><a href="index.html">Strona główna</a></li>
			<li><a href="#">Pokemony</a>
				<ul>
					<li><a href="ogniste.html">Kanto</a></li>
					<li><a href="#">Jotho</a></li>
					<li><a href="#">Sinho</a></li>	
				</ul>
			</li>
			<li><a href="#">Przedmioty</a></li>
			<li><a href="#">NPC</a></li>
			<li><a href="#">Sale</a></li>
			<li><a href="#">Pomoc</a></li>
			<li><a href="#">Instalacja</a></li>
			<li><a href="#">O autorze</a></li>
		</ol>	
	</div>
	<div class="pudlo">
<p><font size="30px">NEWS:</font></p><br>
Dodanie spisu pokemonów<br>
Tekst o autorze<br>
	
	</div>
	<div class="stopka">PokeCity "Piiii Pikachuuuu" &copy; 2016</div>
</div>
</body>
</html>

Kod CSS

body
{
	background-color: #00ff33;
	color: #00009C;
	margin: 0;
}

.duzepudlo
{
	width: 100%;

}
.naglowek
{
	width: 100%;
	padding-top: 10px 0;
	padding-bottom: 20px 0;
}
.logo
{
	width: 800px;
	font-size: 48px;
	margin-left: auto;
	margin-right: auto;
}
.menu
{
	width: 100%;
	padding: 8px;
	background-color: #ffff33;
	text-align: center;
	border-top: 1px solid #336600;
	border-bottom: 1px solid #336600;
	border-top; 2px;
	font-family: 'Shadows Into Light Two', cursive;
}
.pudlo
{
	width: 1000px;
	margin-left:auto;
	margin-right: auto;
	background-color: #99ff66;
	padding-top: 10px;
	padding-bottom: 10px;
	text-align: justify;
}
.stopka
{
	text-align: center;
	background-color: #ffff33;
	color: black;
	padding-bottom: 10px;
	font-size: 16px;
	position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
	position:relative;
}
ol
{
	padding: 0;
	margin: 0;
	list-style-type: none;
	font-size: 18px;
	height: 35px;
	line-height: 200%;
	display: inline-block;
}
ol a
{
	color; white;
	text-decoration: none;
	display; block;
}
ol > li
{
	float: left;
	width: 150px;
	height: 38px;
	border-right: 1px dashed #FFC030;
}
ol > li:first-child
{
	border-left: 1px dashed #FFC030;
}
ol > li:hover
{
	background-color: #FFF200;
}
ol > li:hover > a
{
	color:#80C020;
}
ol > li > ul 
{
	list-style-type: none;
	padding: 0;
	margin: 0;
	height: 40px;
	display: none;
}
ol > li:hover > ul
{
	display: block;
}
ol >li > ul > li
{
	background-color: #ffff33;
	position: relative;
	z-index: 100;
	border-top: 1px dashed #FFC030;
}
ol >li > ul > li :hover
{
	background-color: #FFF200;
}

komentarz zamknięcia: Zanalezienie rozwiązania. :)

2 odpowiedzi

odpowiedź 7 kwietnia 2016 przez Ukis Gaduła (4,580 p.)

Masz tam w stopce 2 razy position w CSS. Spróbuj jedno position: fixed.

komentarz 7 kwietnia 2016 przez KonDZIKs Bywalec (2,770 p.)

Działa :D
Dziękuję :D
A mógłbyś mi wytłumaczyć czym te 3 sie od siebie różnią? :D

I jeszcze jak zrobić ,żeby pudło w sensie ten kolor ciemnozielony był dociągnięty do samej stopki? :)

komentarz 7 kwietnia 2016 przez saliwan22 Gaduła (3,110 p.)

Musisz dać odpowiedni height (odległość od menu do stopki).

komentarz 7 kwietnia 2016 przez Ukis Gaduła (4,580 p.)

fixed pozycjonuje Ci element względem Twojego okna, więc będzie w tym samym miejscu (np. 10px od dołu, tak jak ustawisz) niezależnie od przewijania okna.

absolute pozycjonuje element na podstawie pierwszego przodka, który jest wypozycjonowany. Może np. przykryć inne elementy.

relative pozycjonuje na podstawie tej pozycji, w której normalnie się znajduje. Więc jeśli dodasz margines z prawej, to doda margines z prawej od tej pozycji.

Tutaj możesz zobaczyć jak to wygląda:

http://www.w3schools.com/cssref/playit.asp?filename=playcss_position

Co do pudła, to daj np. height: 100%;

komentarz 7 kwietnia 2016 przez KonDZIKs Bywalec (2,770 p.)
edycja 7 kwietnia 2016 przez KonDZIKs

Dobra zrobione. Dziękuje :D

A żeby nie było dolnego paska do przesuwania? :D

Ukis Dziękuje za wytłumaczenie :D Ten czerwony kwadracik ma tak latać ? :D

komentarz 7 kwietnia 2016 przez saliwan22 Gaduła (3,110 p.)
edycja 7 kwietnia 2016 przez saliwan22

daj body width: 100% (załóżmy że 100% monitora to 1000px w takim przypadku żaden div nie może mieć szerokości niż 1000px;)

edit: Usuń lewy i prawy padding na menu i pasek zniknie.