Jednostavni jednokolonski rasporedi sajtova u CSS-u
U ovoj lekciji ćemo vežbati kreiranje jednostavnih jednokolonskih rasporeda sajtova. Na primer, hajde da napravimo ovakav raspored:
Počnimo sa realizacijom. Svaki raspored
uglavnom počinje opštim div-om pod nazivom
wrapper, koji sadrži ostatak sajta:
<div id="wrapper">
</div>
U našem slučaju, wrapper će biti centriran na ekranu:
#wrapper {
width: 800px;
margin: 50px auto;
}
Takođe će imati granicu:
#wrapper {
width: 800px;
margin: 50px auto;
border: 1px solid black;
}
Hajde sada da napravimo osnovnu strukturu stranice. Sastojaće se od menija i glavnog sadržaja - content-a:
<div id="wrapper">
<div id="menu">
</div>
<div id="content">
</div>
</div>
Dodajmo sadržaj našim blokovima:
<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>
Sada možemo dodati stilove našim blokovima. Hajde da dodamo stil meniju:
#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 sada dodajmo stilove elementima sadržaja:
#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;
}
Sada možemo spojiti sav kod zajedno:
<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;
}
Savet 1
Najpogodnije je davati razmake odozgo nadole.
Na primer, imamo meni i sadržaj,
a između njih je prazan prostor. Očigledno,
da taj prostor može biti napravljen donjim
razmakom menija, gornjim razmakom sadržaja,
ili njihovim istovremenim uticajem. U ovom slučaju
bolje je postaviti donji razmak meniju, a sadržaju
ukloniti podrazumevani gornji padding i margin
za h1.
Savet 2
Potomci ne bi trebalo da formiraju razmak između
roditelja. Na primer, imamo meni.
Donji razmak ovog menija može se formirati
bilo margin div-a sa menijem, bilo margin
linkova. Bolje je izabrati prvu opciju, jer
linkovi ne bi trebalo da deluju preko glave
roditelja.
Savet 3
Neka između dva elementa postoji razmak
i u ovom slučaju vizuelno nema razlike,
šta izabrati za razmak - margin ili padding.
U ovom slučaju birajte margin, jer
upravo on treba da kreira razmake između
elemenata.
