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" © 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;
}