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

Stopka połowa sukcesu

VPS Starter Arubacloud
0 głosów
187 wizyt
pytanie zadane 6 kwietnia 2016 w HTML i CSS przez KonDZIKs Bywalec (2,770 p.)
edycja 6 kwietnia 2016 przez KonDZIKs

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" &copy; 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. :)

2 odpowiedzi

0 głosów
odpowiedź 6 kwietnia 2016 przez radek024 Szeryf (77,180 p.)
Mogłeś to zrobić za pomocą position:fixed - zdecydowanie łatwiej ;)
0 głosów
odpowiedź 6 kwietnia 2016 przez HaKIM Szeryf (87,590 p.)
Jeżeli kod działa poprawnie, możesz zamknąć temat kłódką, którą znajdziesz zaraz pod tagami, po prawej stronie.

Ps. Dobrze że dałeś rozwiązanie.

Podobne pytania

0 głosów
2 odpowiedzi 299 wizyt
pytanie zadane 5 lutego 2023 w HTML i CSS przez Cypika Początkujący (290 p.)
0 głosów
1 odpowiedź 80 wizyt
pytanie zadane 12 grudnia 2022 w HTML i CSS przez EmilB Użytkownik (980 p.)
+1 głos
2 odpowiedzi 414 wizyt
pytanie zadane 25 września 2021 w HTML i CSS przez Teknal Początkujący (290 p.)

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

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

...