• 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

VPS Starter Arubacloud
0 głosów
701 wizyt
pytanie zadane 10 stycznia 2017 w HTML i CSS przez Krzysiek_34 Mądrala (6,050 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 niezalogowany
Wszystko fajnie, tylko że w kodzie HTML nie widzę kodu z footerem
komentarz 10 stycznia 2017 przez Krzysiek_34 Mądrala (6,050 p.)
Sorry, zapomniałem dodać footera do HTML. Zaraz to poprawię.
komentarz 10 stycznia 2017 przez Krzysiek_34 Mądrala (6,050 p.)
Teraz jest cały HTML i cały CSS.
komentarz 10 stycznia 2017 przez jaca121212 Nałogowiec (40,760 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 niezalogowany
@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 (40,760 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 Mądrala (6,050 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
2 odpowiedzi 498 wizyt
pytanie zadane 24 kwietnia 2021 w HTML i CSS przez FabQ Początkujący (450 p.)
0 głosów
1 odpowiedź 470 wizyt
pytanie zadane 17 lutego 2020 w HTML i CSS przez Antoni2422 Użytkownik (570 p.)
0 głosów
5 odpowiedzi 8,629 wizyt
pytanie zadane 11 listopada 2015 w HTML i CSS przez Duduś Początkujący (380 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!

...