HTML, CSS strona na całą "długość strony"

pytanie zadane 17 listopada 2016 w HTML i CSS przez Falwack Początkujący (400 p.)

Witam!

Mam taki mały problem z ustawieniem strony na jej hm... pełną długość.

Chodzi mi o to, że w zależności na jakim aktualnie pracuje monitorze, to strona inaczej jest wyświetlana. (np. u mnie w domu mam trochę mniejszy niż w szkole i u mnie jest strona na całą długość a w szkole tak jak na obrazku, bo monitor ma inną rozdzielczość)

Raz jest na pełną długość strony, raz jest tylko do połowy strony tak jak na obrazku.

Chciałbym, żeby strona była wyświetlana na całą długość monitora, niezależnie od tego jakie rozmiary będzie miał sam monitor.

komentarz 17 listopada 2016 przez jaca121212 Nałogowiec (40,760 p.)

pokaż nam kod tej strony to poradzimy coś

4 odpowiedzi

odpowiedź 17 listopada 2016 przez Przemek Zembrzuski Gaduła (3,240 p.)

odpowiedź 17 listopada 2016 przez pablop76 VIP (123,180 p.)

odpowiedź 17 listopada 2016 przez Falwack Początkujący (400 p.)

body 
{
	/*========================================================
	This pattern is downloaded from www.subtlepatterns.com 
	========================================================*/
	background-image: url('../obrazy/tlo.png');
	margin: 0 auto;
	font-family: 'Source Sans Pro', sans-serif;
}

#glowny
{
	position: relative;
	min-height: 100vh;
	padding-bottom: 10px;
}

#baner
{
	min-height: 100px;
	text-align: center;
}

#baner > span
{
	font-size: 50px;
	font-weight: bold;
}

#menu
{
	text-align:center;
	min-height: 30px;

}

#menu > a 
{
	text-decoration: none;
	color: brown;
}

#tresc
{
	min-height: 100px;
	margin: 0 auto;
}

#strona
{
	margin-top: 20px;
	text-align: center;
}

#strona > span
{
	font-weight:bold;
	font-size: 20px;
}

#pilkarz
{
	width: 50%;
	text-align: center;
	font-style: italic;
	outline: 1px solid black;
}

#wpisz_pilkarza
{
	margin-top: 50px;
	margin-bottom: 100px;
	border: 2px solid blue;
	border-radius: 10px;
	text-align:center;
	position: relative;
	left: 25%;
	width: 50%;
}

#stopka
{
	text-align: center;
	min-height: 100px;
	width: 100%;
	position: absolute;
	bottom: 0;
}

#stopka > span
{
	font-weight:bold;
	font-size: 20px;
}

Ogólnie to kod strony głównej wygląda tak. No i w sumie, leży u mnie totalnie formatowanie, jak teraz przeniosłem się z komputera szkolnego gdzie wszystko było pięknie i ładnie wyśrodkowane, tak teraz tutaj już np. widziałem że tamto pole do wpisywania piłkarza jest praktycznie w ogole nie oddzielone od stopki.

Tutaj macie jeszcze HTML tej strony:

<!DOCTYPE html>
<html lang="pl">
	<head>
		<title> Strona główna </title>
		<meta charset="UTF-8">
		<link rel="Stylesheet" type="text/css" href="style/glowna.css">
		<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
	</head>
<body>

	<div id="glowny">
	
		<div id="baner">	
			<span> BANER </span>	
		</div>

		
			<div id="menu"> 
				<a href="glowna.html"> Strona Główna </a>
				<a href="pilkarze.html"> Piłkarze </a> <!-- Tu będą wypisani wszyscy piłkarze dostępni w bazie danych -->
				<a href="logowanie.html"> Logowanie </a>
				<a href="rejestracja.html"> Rejestracja </a>
			</div>
			
		
		<div id="tresc">
		
			<div id="strona"> 
				<span> JAKIŚ KRÓTKI OPIS O TYM CO BĘDZIE NA TEJ STRONIE
						ORAZ JAK POSŁUGIWAC SIĘ POLEM NIŻEJ  
				</span>
			</div>

			
			<div id="wpisz_pilkarza">
				<br>
				<input type="text" id="pilkarz" name="pikarz" placeholder="Wpisz imię i nazwisko piłkarza"> 
				<br><br>
				<input type="submit" value="Sprawdź" id="sprawdzenie">
				<br><br>
			</div>
			
		</div>
		
		<div id="stopka">
		
			<span> TU KIEDYŚ BĘDZIE SKRYPT, KTÓRY BĘDZIE POKAZYWAŁ: <br>
					- DZISIEJSZĄ DATĘ I GODZINĘ <br>
					- DATĘ ORAZ CZAS OSTATNIEJ AKTUALIZACJI DANYCH NA STRONIE
			</span>
		
		</div>
	</div>
		
</body>
</html>

komentarz 17 listopada 2016 przez xandros Nałogowiec (29,450 p.)

Usuń wszystkie <br> i dodaj do kontenerów "padding" lub "margin"

komentarz 17 listopada 2016 przez xandros Nałogowiec (29,450 p.)

http://codepen.io/anon/pen/gLLKxY masz paste

Ogólnie usuń wszystkie ID i zapomnij o nim. Ostyluj to na klasach.

Nie nadużywaj ">"

komentarz 19 listopada 2016 przez Falwack Początkujący (400 p.)

Co to jest ta pasta? Bo niezbyt rozumiem.

Czemu usuwać ID i robić na klasach? Czym jest ID gorsze od klasy?

komentarz 19 listopada 2016 przez xandros Nałogowiec (29,450 p.)
edycja 19 listopada 2016 przez xandros

Co to jest ta pasta? Bo niezbyt rozumiem.

Jest to kod wklejony (z angielskiego paste) na zewnetrzny serwer. Dokładniej to jest twój kod, tylko trochę poprawiony.

Czym jest ID gorsze od klasy?

Takie samo ID można przypisać tylko do jednego elementu na danej stronie. Zupełnie inaczej jest z klasami. Klasy można, a nawet powinno się przypisywać do wielu elementów z takim samym stylowaniem.

ID używa się przeważnie do JavaScriptu, a nawet wtedy trzeba uważać. Czyli jeśli nie używasz javascriptu, to na razie się nie przejmuj ID.

komentarz 19 listopada 2016 przez Falwack Początkujący (400 p.)

No akurat ja używam javascriptu w tej stronie.

A dałem wszędzie id bo i tak każdy element ma osobne formatowanie, więc nie widziałem potrzeby wrzucania tam klas.