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

Jak zrobić by stopka była zawsze na dolę?

VPS Starter Arubacloud
0 głosów
360 wizyt
pytanie zadane 13 września 2020 w HTML i CSS przez Robot 12 Początkujący (340 p.)

Hej zaczynam swoją przygodne z HTML i CSS tworze swoją 1 stronę  i mam problem bo stopka nie chce się czy mać dołu.

CSS

body
{
    background-color: #868686;
     margin:0;
	padding:0;
    height:100%;
}
#container
{
margin: -11px -10px -10px -10px ;
min-height:100%;
position:relative;
}
#pasek_gura
{
    position: -webkit-sticky;
    position: sticky;
    top: 0;
	min-height: 100px;
	background-color: #262626;
	z-index: 10;

}
#logo
{   
    padding: 5px;
    float: left;
}
#Kontakt
{
    text-decoration: none; 
    min-height: 40px;
    padding: 10px;
    margin-right: 1px;
    float: right ;
    color: #ececec;
}
#Kontakt:hover
{
    background-color: #393939;
}
#Wspierajoncy
{
    text-decoration: none; 
    min-height: 40px;
    padding: 10px;
    margin-right: 1px;
    float: right ;
    color: #ececec;
}
#Wspierajoncy:hover
{
    background-color: #393939;
}
#Poradniki
{
    text-decoration: none; 
    min-height: 40px;
    padding: 10px;
    margin-right: 1px;
    float: right ;
    color: #ececec;
}
#Poradniki:hover
{
    background-color: #393939;
}
#home
{
    text-decoration: none; 
    min-height: 40px;
    padding: 10px;
    margin-right: 1px;
    float: right ;
    color: #ececec;
}
#home:hover
{
    background-color: #393939;
}
#informacje
{
    padding: 300px;
    color: #ececec;
    min-height: 300px;
    background-color: #737373;
    clear: both;
}
#Naguwek
{
    font-size: 30px;
    position:relative;
    Top:-190px;
}
#innfo
{
    position:relative;
    Top:-100px;
}
#dolanczanie
{
    font-size: 40px;
    padding: 10px;
    background-color:#262626;
    color: #ececec;
    min-width:400px;
}
#dolanczanie:hover
{
    background-color: #393939;
}
#adminstracja
{
    padding: 40px;
    color: #ececec;
    min-height: 1000px;
    background-color: #868686;
}
#aNagluwe
{
    font-size: 35px;
}
#Robot
{
    padding: 40px;
    color: #ececec;
    min-height: 250px;
    position:relative;
    left: -20px;
}
#kaczor
{
    text-align: left;
    padding: 40px;
    color: #ececec;
    min-height: 250px;
    position:relative;
    left: -20px;
}
#brajan
{
    text-align: right;
    padding: 40px;
    color: #ececec;
    min-height: 250px;
    position:relative;
    left: -20px;
}
#grenek
{
    text-align: right;
    padding: 40px;
    color: #ececec;
    min-height: 250px;
    position:relative;
    left: -20px;
}
#stopka
{
	    padding: 0px;
    min-height: 70px;
    background-color: black;
    color: #ececec;
    clear: both;

}






#pszerwa
{
        font-size: 40px;
    padding: 10px;
    color: #ececec;
    margin-left: 100px;
	margin-right: 100px;
	min-height: 600px;
}


#kontakt
{
    padding: 10px;
    color: #ececec;
    margin-left: 100px;
	margin-right: 100px;
	min-height: 600px;
}

Wiem że były już tu takie wątki ale żadne rozwiązanie nie chciało mi działać.

1
komentarz 13 września 2020 przez gnu_ewm Gaduła (3,340 p.)
Tworząc stronę dobrą praktyką jest używanie angielskich nazw.
komentarz 19 września 2020 przez RobertGelu Nowicjusz (160 p.)

<div id="footer">

Something tralalala

</div>

w CSS

div#footer    {
    position:fixed;
    width: 100%;
    border: 4px solid #7c7;
    background-color: black;
    color: white;
    text-align: center;
    bottom: 0px;
}

2 odpowiedzi

+1 głos
odpowiedź 13 września 2020 przez KosaTV Obywatel (1,260 p.)
wybrane 13 września 2020 przez Robot 12
 
Najlepsza

Masz straszny bałagan w kodzie i to on powoduje problemy. Zamieniłem tylko trochę ten kod html żeby chociaż działał, ale nadal uważam że praktycznie wszystko jest do poprawy, a potem pozmieniaj sobie co tam chcesz.

<!DOCTYPE HTML>
<html lang="pl">
<head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="imige/logo.png">
    <title>Polski RoolPlay Discord</title>
    <meta name="description" content="Strona serwera Polski RoolPlay Discord" />
    <meta name="keywords" content="PRD,RP,POLSKI,polska" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
     
    <link rel="stylesheet" href="index.css" type="text/css" >
</head>
<body>
 
	<div id="container">
		<div id="pasek_gura">
			 <div id="logo">
			<img src="imige/logo.png" width="150" height="90" />
			</div>
			
			<a href="Kontakt.html">
			<div id="Kontakt">
			<h1>Kontakt</h1>
			</div>
			</a>
			
			<a href="Wspierajacy.html">
			<div id="Wspierajoncy">
			<h1>Wspierający</h1>
			</div>
			</a>
			
			<a href="Poradnik.html">
			<div id="Poradniki">
			<h1>Poradniki</h1>
			</div>
			</a>
			
			<a href="index.html">
			<div id="home">
			<h1>Home</h1>
			</div>
			</a>
			
		</div>
			<div>
			</div>
		 <div id="footer">
			<h6>Wszelkie prawa zastrzeżone <br>©Autor: Robot 12<br><h6>
		</div>
	</div>
 
</body>
</html>

 

0 głosów
odpowiedź 13 września 2020 przez EdeX Mądrala (5,110 p.)
1. Proszę powiedz, że specjalnie napisałeś te błędy ortograficzne

2. Height nie ustawia się w % przynajmniej póki się nie ustali wysokości danego "pudełka" w vh

3. Próbowałeś bottom:0;
komentarz 13 września 2020 przez Robot 12 Początkujący (340 p.)

@EdeX, bottom:0; nie działa

#stopka
{
	    padding: 0px;
    min-height: 70px;
    background-color: black;
    color: #ececec;
    clear: both;
    bottom:0;
}

A jeżeli chodzi o błędy mam dysortografie.

1
komentarz 13 września 2020 przez KosaTV Obywatel (1,260 p.)
Nie działa bo nie ustawiłeś pozycji. Dodaj to:

position: absolute;

W tedy bottom zadziała.
komentarz 13 września 2020 przez Robot 12 Początkujący (340 p.)

Dodałem i nic się nie zmieniło oprócz tego że musiałem dodać  width: 100% bo inaczej stopka była w rogu.

;#stopka
{
        padding: 0px;
    min-height: 70px;
    background-color: black;
    color: #ececec;
    clear: both;
    width: 100%;
    position: absolute;
    bottom:0;
}

 

1
komentarz 13 września 2020 przez KosaTV Obywatel (1,260 p.)
Czy ta stopka "siedzi" w czymś?
komentarz 13 września 2020 przez Robot 12 Początkujący (340 p.)

w container

<!DOCTYPE HTML>
<html lang="pl">
<head>
	<meta charset="utf-8" />
	<link rel="shortcut icon" href="imige/logo.png">
	<title>Polski RoolPlay Discord</title>
	<meta name="description" content="Strona serwera Polski RoolPlay Discord" />
	<meta name="keywords" content="PRD,RP,POLSKI,polska" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	
	<link rel="stylesheet" href="index.css" type="text/css">
</head>
<body>

	<div id="container">
		<div id="pasek_gura">
			<div id="logo">
					<img src="imige/logo.png" width="150" height="90" />
			 </div>
			 <a href="Kontakt.html">
			    <div id="Kontakt">
					<h1>Kontakt</h1>
			    </div>
			 </a>
			 <a href="Wspierajacy.html">
			    <div id="Wspierajoncy">
					<h1>Wspierający</h1>
			    </div>
			 </a>
			 <a href="Poradnik.html">
			    <div id="Poradniki">
					<h1>Poradniki</h1>
			    </div>
			 </a>
			<a href="index.html">
				<div id="home">
					<h1>Home</h1>
				</div>
			</a>
		</div>
		<div>
		    
		    
		</div>
		<div id="stopka">
		    <h6><p style="text-align: center"><br>Wszelkie prawa zastrzeżone ©<br>Autor: Robot 12</p></h6>
		</div>
	</div>

</body>
</html>

 

1
komentarz 13 września 2020 przez KosaTV Obywatel (1,260 p.)

@Robot 12, Usuń ten średnik obok #stopka. Przeglądarka nie wie o co ci chodzi.

komentarz 13 września 2020 przez Robot 12 Początkujący (340 p.)
Przez przypadek go wklejałem go tam nie ma w kodzie.

Podobne pytania

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.)
0 głosów
1 odpowiedź 120 wizyt
pytanie zadane 16 maja 2020 w HTML i CSS przez Goszczu31 Nowicjusz (160 p.)
0 głosów
2 odpowiedzi 498 wizyt
pytanie zadane 24 kwietnia 2021 w HTML i CSS przez FabQ Początkujący (450 p.)

92,451 zapytań

141,261 odpowiedzi

319,073 komentarzy

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

...