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

question-closed Stopka (footer) pojawiła się prawie na środku strony, a powinna być na samym dole

Ultraszybki serwer VPS NVMe BIZNES
0 głosów
123 wizyt
pytanie zadane 10 stycznia 2017 w HTML i CSS przez Krzysiek_34 Gaduła (3,910 p.)
zamknięte 11 stycznia 2017 przez Krzysiek_34

Witam.

Stopka (footer) pojawiła się prawie na środku strony, a powinna być na samym dole. Wcześniej stopka była na samym dole strony i  było OK, ale od kiedy wprowadziłem "boczne_menu", to pojawiła się prawie na środku strony. Zauważyłem, że stopka przyczepiła się na samym dole do bocznego menu tuż pod napisem ---> Sport.

<div class="wrapper">

	<div class="panel-1">
			
		<div class="boczne_menu">
			<nav>
				<ul>
							
					<li><a href="muzyka.php">
					<img src="obrazki/muzyka.png" width="32px" height="24px" style="border: 1px solid #000000; position: absolute; left: 14px; top: 14px" />
					Muzyka</a></li>
								
					<li><a href="filmy.php"><div class="margin_top">
					<img src="obrazki/filmy.png" width="32px" height="24px" style="border: 1px solid #000000; position: absolute; left: 14px; top: 62px" />
					Filmy</a></li>
								
					<li><a href="sport.php"><div class="margin_top">
					<img src="obrazki/sport.png" width="32px" height="24px" style="border: 1px solid #000000; position: absolute; left: 14px; top: 110px" />
					Sport</a></li>
								
				</ul>
			</nav>
		</div>				
			
	</div>

	<div class="footer">Strona internetowa &copy; 2017</div>

</div>
body
{
	background-color: #303030;
	font-family: Verdana;
	margin: 0px;
	width: 100%;
	height: 800px;
	position: relative;
}

.wrapper
{
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
}

.panel-1
{
	clear: both;
	width: 1000px;
	height: 322px;
	background: -webkit-linear-gradient(to right, black, white);
	background: -o-linear-gradient(to right, black, white);
	background: -moz-linear-gradient(to right, black, white);
	background: linear-gradient(to right, black, white);
	border-bottom-left-radius:.5em;
	border-bottom-right-radius:.5em;
	position: relative;
}

.boczne_menu
{
	top: 14px;
	overflow: hidden;
	position: relative;
}

nav
{
	width: 190px;
	font-size: 17px;
	line-height: 200%;
	display: block;
}

nav ul
{
	padding: 10px 10px 10px;
	background-color: #000080;
	display: block;
}

nav ul li
{
	text-align: center;
}

nav ul li a
{
	text-decoration: none;
	color: white;
	display: block;
}

nav ul li a:hover
{
	background-color: #BCE27F;
	color: black;
	cursor: pointer;
}

.margin_top
{
	margin-top: 14px;
}

.footer
{
	text-align: center;
	background-color: #222222;
	color: white;
	font-size: 14px;
	position: absolute;
	bottom: 0;
	width: 1000px;
	line-height: 50px;
	margin-left: auto;
	margin-right: auto;
}

Co muszę poprawić w kodzie, aby stopka z powrotem pojawiła się na samym dole strony?

komentarz zamknięcia: Problem został rozwiązany.
komentarz 10 stycznia 2017 przez shead VIP (145,840 p.)
Wszystko fajnie, tylko że w kodzie HTML nie widzę kodu z footerem
komentarz 10 stycznia 2017 przez Krzysiek_34 Gaduła (3,910 p.)
Sorry, zapomniałem dodać footera do HTML. Zaraz to poprawię.
komentarz 10 stycznia 2017 przez Krzysiek_34 Gaduła (3,910 p.)
Teraz jest cały HTML i cały CSS.
komentarz 10 stycznia 2017 przez jaca121212 Nałogowiec (35,530 p.)
Ja tu nie widzę aby była przyklejona do bocznego menu

http://jsbin.com/gepenofiko/1/edit?output
1
komentarz 10 stycznia 2017 przez shead VIP (145,840 p.)
@Krzysiek od HTML5 istnieje tag <footer>, nie używaj do tego divów...

http://www.w3schools.com/html/html5_new_elements.asp

1 odpowiedź

+1 głos
odpowiedź 10 stycznia 2017 przez jaca121212 Nałogowiec (35,530 p.)
edycja 10 stycznia 2017 przez jaca121212
Jak dodałem diva o clasie  footer do tego kodu HTML to  stopka jest na dole strony.

http://jsbin.com/gepenofiko/edit?html,css,output

wstaw najlepiej  cały kod HTML. i CSS bo może gdzieś indziej leżeć  problem.

@edit:

Zrobiłem ci szkielet strony po wyżej wypisanym kodzie CSS widzę że zaczynasz przygodę z programowaniem

możesz o stylować (o kodować za pomocą CSS ten kod HTML) pod twoje potrzeby jakie chciałeś uzyskać w  wyżej w szablonie kodu.

http://jsbin.com/lesafuveba/1/edit?html,css,output
komentarz 10 stycznia 2017 przez Krzysiek_34 Gaduła (3,910 p.)
edycja 10 stycznia 2017 przez Krzysiek_34
Dzisiaj jednak nie mam czasu się tym zajmować, aby przetestować tego footer.

Mam 2 pytania w tym temacie:

1. W jakim celu umieszczać za obrazkiem taki zapis, np. alt="obraz muzyka", skoro to nie przynosi żadnego efektu?

2. Co muszę dodać w HTML, aby po najechaniu na "Muzyka" pojawiła się pod kursorem chmurka z napisem "Muzyka"? Na stronie https://www.youtube.com jest pokazane po lewej jak to wygląda. Najedźcie kursorem na 'Muzyka', 'Sport', 'Gry' itd, to zobaczycie jak to tam wygląda.

Podobne pytania

0 głosów
5 odpowiedzi 376 wizyt
pytanie zadane 11 listopada 2015 w HTML i CSS przez Duduś Początkujący (380 p.)
0 głosów
1 odpowiedź 126 wizyt
0 głosów
3 odpowiedzi 122 wizyt
Porady nie od parady
Komentarze do pytań nie służą do odpowiadania, od tego jest wydzielona sekcja odpowiedzi. Funkcją komentarzy jest natomiast możliwość uzyskania dodatkowych informacji na temat samego posta.
Ciekawy innych porad? Odwiedź tę stronę!

44,063 zapytań

83,829 odpowiedzi

166,829 komentarzy

21,053 pasjonatów

Przeglądających: 154
Pasjonatów: 5 Gości: 149

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...