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

Jak wydłużyć diva w pionie do określonej długości okna przeglądarki bez podawania jej w pikselach? Jak wyrównać input'y?

VPS Starter Arubacloud
0 głosów
449 wizyt
pytanie zadane 15 lipca 2017 w HTML i CSS przez oJkMz0Q6 Początkujący (370 p.)

Rozwiązuję zadanie z tego pdf'a.

1. Chciałbym wydłużyć divy do określonej długości w pionie bez podawania jej w pikselach inną metodą niż {padding: 0 0 100%;} w CSS, gdyż w ten sposób bloki są nierówne. Jak to wykonać?

2. Jak wyrównać białe pola do wpisywania haseł, daty urodzenia etc.?

3. Jeśli widzisz jakieś błędy w zadaniu, daj mi znać.

index.html:


<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
	<div class="container">
		<div class="logo">
			<img src="img/img.png" alt="klan non omnis moriar">
			<p>
			<strong>Uwaga! Trwa rekrutacja! Wymagana ranga: silver.</strong>
			</p>
			<p>
			Słowa te uznawane są za ważne informacje klanowe i będą restrykcyjnie przestrzegane.
			</p>
		</div>
		<div class="nav">
			<ul>
				<li>
					<a href="index.html">Strona główna</a>
				</li>
				<li>
					<a href="register.html">Dołącz do nas</a>
				</li>
				<li>
					<a href="http://bit.ly/streamy-csgo">Streamy z CS:GO</a>
				</li>
		</div>
		<div class="content">
			<h1>Witaj w witrynie klanu CS:GO Non Omnis Moriar!</h1>
			<blockquote>
				<p>Counter-Strike: Global Offensive (CS:GO)- wieloosobowa gra komputerowa z gatunku first-person shooter, stworzona oraz wydana pzez studia Valve Corporation i Hidden Path Entertainment, które już wcześniej pracowały nad Counter-Strike: Source. Jest to najnowsza część serii Counter-Strike.</p>
				<p>Global Offensive wydano 21 sierpnia 2012 roku na platformę Steam. Gra jest dostępna na system: Microsoft Windows, Linux, Mac OS X, Xbox 360 (poprzez Xbox Live Arcade) oraz PlayStation 3 (za pośrednictwem PlayStation Network).
				<footer>
					- źródło: <a href="https://pl.wikipedia.org/wiki/Counter-Strike:_Global_Offensive">Wikipedia</a>
				</footer>
			</blockquote>
		</div>
		<div class="table">
			<strong>Aktualni gracze Non Omnis Moriar</strong>
			<table>
				<thead>
					<tr>
						<th>Nick</th> <th>Płeć</th> <th>Ulubiona broń</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>
							<span class="cz">Sn1p3RR</span>
						</td>
						<td>
							<span class="cz">m</span>
						</td>
						<td>
							<span class="cz">AWP</span>
						</td>
					</tr>
					<tr>
						<td>
							<span class="z">Gh0st256</span>
						</td>
						<td>
							<span class="z">k</span>
						</td>
						<td>
							<span class="z">PP-Bizon</span>
						</td>
					</tr>
					<tr>
						<td>K4w411</td> <td>k</td> <td>MP9</td> 
					</tr>
					<tr>
						<td>S0l1d$nake</td> <td>m</td> <td>Desert Eagle</td>
					</tr>
				</tbody>
			</table>
						<small>
						Legenda: <span class="cz">szef klanu</span>, <span class="z">sekretarz drużyny</span>
						</small>
				</tbody>
			</table>
		</div>
		<div style="eraser"></div>
		<div class="footer">
			<blockquote cite="https://pl.wikiquote.org/wiki/Douglas_MacArthur>">
				<p>Na wojnie się wygrywa albo przegrywa, żyje albo umiera, a decyduje się to <em>w mgnieniu oka</em>
				<footer>
				- <a href="https://pl.wikiquote.org/wiki/Douglas_MacArthur">Douglas MacArthur
				</footer>
			</blockquote>
		</div>
	</div>
</body>
</html>

register.html:

<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
	<div class="container">
		<div class="logo">
			<img src="img/img.png" alt="klan non omnis moriar">
			<p>
			<strong>Uwaga! Trwa rekrutacja! Wymagana ranga: silver.</strong>
			</p>
			<p>
			Słowa te uznawane są za ważne informacje klanowe i będą restrykcyjnie przestrzegane.
			</p>
		</div>
		<div class="nav">
			<ul>
				<li>
					<a href="index.html">Strona główna</a>
				</li>
				<li>
					<a href="register.html">Dołącz do nas</a>
				</li>
				<li>
					<a href="http://bit.ly/streamy-csgo">Streamy z CS:GO</a>
				</li>
		</div>
		<div class="content">
			<form action="new.php" method="post">
				<label for="nick">Nick:</label>
				<input type="text" id="nick" placeholder="istniejący nick z CS">
			</form>
			<form action="new.php" method="post">
				<label for="haslo">Hasło:</label>
				<input type="password" id="haslo">
			</form>
			<form action="new.php" method="post">
				<label for="haslo2">Powtórz hasło:</label>
				<input type="password" id="haslo2">
			</form>
			<form action="new.php" method="post">
				<label for="birthday">Data urodzenia:</label>
				<input type="number" id="birthday">
			</form>
			<form action="new.php" method="post">
				<label><input type="radio" value="m" name="sex" checked>Mężczyzna</label>
				<label><input type="radio" value="k" name="sex">Kobieta</label>
			</form>
			<form action="new.php" method="post">
				<label><input type="checkbox" value="yes" name="accept_rules" checked>Akceptuję regulamin serwisu</label>
			</form>
			<form action="new.php" method="post">
				<label><input type="checkbox" value="yes" name="accept_newsletter">Wyrażam zgodę na otrzymywanie newslettera</label>
			</form>
			<form action="new.php" method="post">
				<label for="list_one">Ulubiona broń</label>
				<select id="list_one">
					<option>Five-SeveN</option>
					<option>Desert Eagle</option>
					<option>PP-Bizon</option>
					<option>AWP</option>
					<option>MP9</option>
					<option>AK-47</option>
				</select>
			</form>
			<form action="new.php" method="post">
				<label for="list_multiple">Ulubione mapy</label>
				<select id="list_multiple">
					<option>Dust II</option>
					<option>Mirage</option>
					<option>Cache</option>
					<option>Inferno</option>
					<option>Nuke</option>
					<option>Train</option>
				</select>
			</form>
			<form action="new.php" method="post">
				<label for="kilka">Kilka słów o sobie</label>
				<p><textarea id="kilka" rows="5" cols="44"></textarea></p>
				<p><small>Opisz swoją przygodę z CS:GO, dlaczego wybrałeś akurat nasz klan?</small></p>
			</form>
			<form action="new.php" method="post">
				<input type="submit" value="Zarejestruj się!">
			</form>
		</div>
		<div class="table">
			<strong>Aktualni gracze Non Omnis Moriar</strong>
			<table>
				<thead>
					<tr>
						<th>Nick</th> <th>Płeć</th> <th>Ulubiona broń</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>
							<span class="cz">Sn1p3RR</span>
						</td>
						<td>
							<span class="cz">m</span>
						</td>
						<td>
							<span class="cz">AWP</span>
						</td>
					</tr>
					<tr>
						<td>
							<span class="z">Gh0st256</span>
						</td>
						<td>
							<span class="z">k</span>
						</td>
						<td>
							<span class="z">PP-Bizon</span>
						</td>
					</tr>
					<tr>
						<td>K4w411</td> <td>k</td> <td>MP9</td> 
					</tr>
					<tr>
						<td>S0l1d$nake</td> <td>m</td> <td>Desert Eagle</td>
					</tr>
				</tbody>
			</table>
						<small>
						Legenda: <span class="cz">szef klanu</span>, <span class="z">sekretarz drużyny</span>
						</small>
				</tbody>
			</table>
		</div>
		<div style="eraser"></div>
		<div class="footer">
			<blockquote cite="https://pl.wikiquote.org/wiki/Douglas_MacArthur>">
				<p>Na wojnie się wygrywa albo przegrywa, żyje albo umiera, a decyduje się to <em>w mgnieniu oka</em>
				<footer>
				- <a href="https://pl.wikiquote.org/wiki/Douglas_MacArthur">Douglas MacArthur
				</footer>
			</blockquote>
		</div>
	</div>
</body>
</html>

main.css:

body
{
	margin: 0;
	width: 100%;
	height: 100%;
}

.container
{
	background-color: white;
	width: 100%;
	height: 100%;
	margin:0;
	margin: auto;
	font-size: 0;
}

.logo
{
	background-color: lightgreen;
	width: 100%;
	min-height: 20%;
	float: left;
	font-size: 16;
}

.nav
{
	background-color: gray;
	width: 20%;
	min-height: 60%;
	float: left;
	font-size: 16px;
	padding: 0 0 100%;
}

.content
{
	background-color: green;
	width: 50%;
	min-height: 60%;
	float: left;
	font-size: 16px;
	padding: 0 0 100%;
}

.table
{
	background-color: blue;
	width: 30%;
	min-height: 60%;
	float: left;
	font-size: 16px;
	padding: 0 0 100%;
}

.cz
{
	color: red;
}

.z
{
	color: green;
}

.footer
{
	background-color: orange;
	width: 100%;
	min-height: 20%;
	font-size: 16px;
	clear: both;
}

 

3 odpowiedzi

+1 głos
odpowiedź 15 lipca 2017 przez mbabane Szeryf (79,280 p.)
Przed tym wszystkim poszukaj w internecie/ksiazce, jak sie robi formularze w HTML
+1 głos
odpowiedź 15 lipca 2017 przez Nicolaus Dyskutant (9,740 p.)
Zmień w CSS w body height: 100%;, na height: 100vh;
+1 głos
odpowiedź 15 lipca 2017 przez niezalogowany
Błędów jest raczej sporo. W footerze jakieś linki niepodomykane, nie wiadomo do czego wgl. Jakiś div który nie wiadomo po co istnieje, do którego atrybuty style wpisałeś 'eraser'. Domyślam się, że to ma być class="eraser".

Tag <form> istnieje po to, aby grupować w nim (wewnątrz niego) inputy :) Jak dostajesz kartę do wypełnienia gdzieś w urzędzie to dostajesz FORMULARZ w którym są pogrupowane elementy, w które coś wpisujesz - INPUTY. Nie dostajesz trzech osobnych formularzy do wpisania 1) imienia, 2) nazwiska, 3) nr PESEL, tylko jeden FORMularz, a w nim INPUTY.

Co do stylowania to też pełno o tym w sieci, wykaż się odrobiną więcej chęci i poszukaj. Sam pan Zelent prezentuje to: https://www.youtube.com/watch?v=9Pl0EYcndgc

Możesz poczytać o flexbox, ułatwia to tworzenie stron. Chyba że chcesz być 'old school' to poszukaj rozwiązań w google, co do wysokości divów. Też nie wiem na czym Ci zależy. Jakie mają być te wysokości'? Jeśli na wysokość okna przeglądarki to czytaj o height vh. Możesz opakować dwa divy w innego, nadać wysokość paddingiem np. na 1000px, coś takiego jak tutaj: http://www.ejeliot.com/samples/equal-height-columns/example-7.html

Podobne pytania

0 głosów
3 odpowiedzi 233 wizyt
pytanie zadane 11 listopada 2022 w HTML i CSS przez Dawidziu Bywalec (2,610 p.)
+2 głosów
5 odpowiedzi 259 wizyt
pytanie zadane 23 czerwca 2021 w HTML i CSS przez NA Użytkownik (590 p.)
0 głosów
2 odpowiedzi 285 wizyt
pytanie zadane 16 stycznia 2019 w HTML i CSS przez Cheatsu Nowicjusz (120 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!

...