Proste jednokolumnowe układy stron w CSS
W tej lekcji będziemy ćwiczyć tworzenie prostych jednokolumnowych układów stron. Zróbmy, na przykład, taki układ:
Przystąpmy do realizacji. Każdy układ
z reguły zaczyna się od ogólnego diva o nazwie
wrapper, zawierającego całą resztę strony:
<div id="wrapper">
</div>
W naszym przypadku wrapper będzie wyrównany do środka ekranu:
#wrapper {
width: 800px;
margin: 50px auto;
}
Będzie też miał obramowanie:
#wrapper {
width: 800px;
margin: 50px auto;
border: 1px solid black;
}
Zróbmy teraz główną strukturę strony. Będzie się składać z menu i głównej zawartości - treści:
<div id="wrapper">
<div id="menu">
</div>
<div id="content">
</div>
</div>
Dodajmy zawartość naszych bloków:
<div id="wrapper">
<div id="menu">
<a href="#">link text 1</a>
<a href="#" class="active">link text 2</a>
<a href="#">link text 3</a>
<a href="#">link text 4</a>
<a href="#">link text 5</a>
</div>
<div id="content">
<h1>Proin tristique lorem</h1>
<p>
...
</p>
<p>
...
</p>
</div>
</div>
Teraz możemy dodać style naszym blokom. Dodajmy styl menu:
#menu {
display: flex;
justify-content: center;
margin-bottom: 20px;
background-color: #484848;
}
#menu a {
margin: 0 5px;
padding: 15px 25px;
text-decoration: none;
color: #fff;
font: bold 14px Arial;
}
#menu a:hover, #menu a.active {
color: #484848;
background-color: #fff;
}
A teraz dodajmy style elementom treści:
#content {
padding: 0 30px 20px;
}
#content h1 {
text-align: center;
margin-top: 0;
margin-bottom: 10px;
}
#content p {
padding: 0 10px;
margin-bottom: 5px;
font: 18px/1.3 Arial;
text-align: justify;
}
Możemy teraz zebrać cały kod razem:
<div id="wrapper">
<div id="menu">
<a href="#">link text 1</a>
<a href="#" class="active">link text 2</a>
<a href="#">link text 3</a>
<a href="#">link text 4</a>
<a href="#">link text 5</a>
</div>
<div id="content">
<h1>Proin tristique lorem</h1>
<p>
...
</p>
<p>
...
</p>
</div>
</div>
#wrapper {
width: 800px;
margin: 50px auto;
border: 1px solid black;
}
#menu {
display: flex;
justify-content: center;
margin-bottom: 20px;
background-color: #484848;
}
#menu a {
margin: 0 5px;
padding: 15px 25px;
text-decoration: none;
color: #fff;
font: bold 14px Arial;
}
#menu a:hover, #menu a.active {
color: #484848;
background-color: #fff;
}
#content {
padding: 0 30px 20px;
}
#content h1 {
text-align: center;
margin-top: 0;
margin-bottom: 10px;
}
#content p {
padding: 0 10px;
margin-bottom: 5px;
font: 18px/1.3 Arial;
text-align: justify;
}
Rada 1
Najwygodniej jest podawać odstępy od góry do dołu.
Na przykład, mamy menu i treść,
a między nimi - puste miejsce. Oczywiście,
że to miejsce może być zrobione dolnym
odstępem menu, górnym odstępem treści,
lub ich jednoczesnym wpływem. W tym przypadku
lepiej ustawić dolny odstęp menu, a treści
usunąć górny padding i margin domyślny
dla h1.
Rada 2
Potomkowie nie powinny formować odstępu między
rodzicami. Na przykład, mamy menu.
Dolny odstęp tego menu można sformować
albo margin diva z menu, albo margin
linków. Lepiej wybrać pierwszą opcję,
ponieważ linki nie powinny działać przez głowę
rodzica.
Rada 3
Niech między dwoma elementami będzie odstęp
i w tym przypadku wizualnie nie ma różnicy,
co wybrać dla odstępu - margin lub padding.
W tym przypadku wybierz margin, ponieważ
właśnie on powinien tworzyć odstępy między
elementami.
