Witam mam problem ze stopką mianowicie chciałem ,żeby cały czas trzymała się dołu ekranu. Niby trzyma sie dołu ekranu ale po zjechaniu scrollem do dołu zostaje w jednym punkcie nie przesuwa się.
Kody
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>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus vestibulum leo non sollicitudin. Pellentesque at molestie justo. Vestibulum tristique eros sit amet cursus malesuada. Integer erat ante, consequat vel dignissim at, facilisis vel felis. Ut rhoncus ultrices urna. Suspendisse feugiat id ante eget fringilla. Morbi in erat feugiat, faucibus neque id, imperdiet nisl. Curabitur tincidunt nunc a purus luctus bibendum. Mauris pharetra consectetur ante, ornare pretium turpis accumsan non. Quisque ultrices pellentesque dolor aliquet mollis. Morbi hendrerit et velit malesuada ullamcorper. Duis id tempus magna, sit amet pharetra massa. Sed fringilla odio nec tellus rutrum faucibus. Phasellus nec tortor tellus. Quisque dui quam, porta in purus at, tincidunt ullamcorper sem. Mauris laoreet urna nec felis vehicula, id ornare est dignissim.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi libero nisi, fermentum sed scelerisque a, sagittis ut orci. Praesent sed sapien malesuada, blandit mi ut, dignissim quam. Mauris ut enim mattis, auctor est ut, maximus libero. Nulla vitae turpis velit. Maecenas sollicitudin dapibus convallis. Mauris rutrum, neque id mattis dapibus, urna libero placerat nulla, vitae aliquet libero libero maximus dui. Fusce ornare sagittis mi, in convallis magna accumsan ullamcorper. Maecenas eu lacus lobortis, sodales elit a, efficitur turpis. Quisque eget dolor ultricies, tincidunt risus at, venenatis dolor. Donec ut sapien quam. Nulla nibh erat, pulvinar eleifend quam a, pharetra viverra neque.</p>
<p>Duis ac ante euismod, egestas quam sed, pharetra odio. Cras viverra ex cursus nunc blandit fringilla. Donec sodales justo non semper porttitor. Vestibulum id quam ut diam interdum condimentum id non ante. Nulla porta consectetur enim, quis ornare dui rutrum id. In eleifend, dolor vitae luctus dignissim, odio risus viverra erat, quis euismod velit velit quis felis. Etiam vehicula, est nec mattis interdum, tortor est commodo urna, sed dictum libero orci sit amet enim. Sed ut viverra erat.</p>
<p>Curabitur egestas est non nibh commodo blandit. In eu ex nec lorem viverra molestie. Aliquam et tortor dignissim, finibus massa non, accumsan ex. Nullam tincidunt dui eros, id congue magna auctor id. Nullam gravida commodo ornare. Nunc pretium faucibus cursus. Vivamus in dolor semper, pretium nulla luctus, lacinia nisi. Nullam vestibulum placerat enim, id sagittis nulla congue eget. Integer tempus nisi id lacus imperdiet, eu vehicula augue dignissim. Morbi eu risus lacus. Pellentesque elit </p>dui, efficitur blandit nisl id, porttitor porttitor neque. Pellentesque at leo a lorem interdum vestibulum. Aliquam pulvinar id nibh sit amet bibendum.
<p>Mauris sagittis pharetra erat, nec fermentum lacus tincidunt sit amet. Curabitur imperdiet venenatis urna, ac convallis nisi molestie sit amet. Quisque pellentesque pellentesque varius. Proin auctor quam et erat vestibulum, faucibus ornare felis gravida. Mauris finibus ullamcorper libero in consectetur. Nullam ut nisi a augue sagittis interdum ut quis purus. Duis arcu quam, elementum in venenatis at, rhoncus quis libero. Nunc ac sem enim. Nunc non justo sed ex efficitur pulvinar at faucibus odio. Suspendisse nec venenatis libero. Donec blandit ligula at magna faucibus, ac hendrerit massa luctus.
</div>
<div class="stopka">PokeCity "Piiii Pikachuuuu" © 2016</div>
</div>
</body>
</html>
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;
padding-top: 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%;
}
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;
}
@@ EDIT: Dla tych co kiedyś chcieli by znać rozwiązanie tego dopisałem jeszcze "position:relative" i wszystko działa jak należy. :) Jeżeli wątek jest nie potrzebny zbędny to proszę o usunięcie. :)