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;
}
