Једноставни једноставни шаблони сајтова у CSS-у
У овој лекцији ћемо вежбати креирање једноставних једноставних шаблона сајтова. Хајде, на пример, да направимо овакав шаблон:
Хајде да почнемо са имплементацијом. Сваки шаблон се
углавном започиње општим дивом са називом
wrapper који садржи цео остатак сајта:
<div id="wrapper">
</div>
У нашем случају, wrapper ће бити центриран на екрану:
#wrapper {
width: 800px;
margin: 50px auto;
}
Такође ће имати ивицу:
#wrapper {
width: 800px;
margin: 50px auto;
border: 1px solid black;
}
Хајде сада да направимо основну структуру странице. Она ће се састојати од менија и главног садржаја - контента:
<div id="wrapper">
<div id="menu">
</div>
<div id="content">
</div>
</div>
Додајмо садржај нашим блоковима:
<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>
Сада можемо додати стилове нашим блоковима. Хајде да додамо стил менију:
#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;
}
Сада можемо саставити цео код заједно:
<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;
}
Савет 1
Најпогодније је давати размаке одозго надоле.
На пример, имамо мени и садржај,
а између њих - празан простор. Очигледно,
да тај простор може бити направљен доњим
размаком менија, горњим размаком садржаја,
или њиховим истовременим утицајем. У овом случају
боље је задати доњи размак менију, а садржају
уклонити горњи padding и margin подразумевано
за h1.
Савет 2
Потомци не би требало да формирају размак између
родитеља. На пример, имамо мени.
Доњи размак овог менија може бити формиран
или margin дива са менијем, или margin
веза. Боље је изабрати прву опцију, јер
везе не би требало да делују преко главе
родитеља.
Савет 3
Нека између два елемента постоји размак
и у овом случају визуелно нема разлике,
шта изабрати за размак - margin или padding.
У овом случају изаберите margin, јер
управо он треба да ствара размаке између
елемената.
