Едноставни едно-колони распореди на веб-страници во CSS
Во оваа лекција ќе вежбаме да креираме едноставни едно-колони распореди на веб-страници. Ајде, на пример, да направиме ваков распоред:
Да почнеме со имплементација. Секој распоред
како по правило започнува со општ div со име
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
Најпогодно е да се даваат margins од горе надолу.
На пример, кај нас имаме мени и содржина,
а помеѓу нив - празен простор. Очигледно,
дека овој простор може да биде направен со долниот
margin на менито, горниот margin на содржината,
или нивното истовремено влијание. Во овој случај
подобро е да се зададе долен margin на менито, а на содржината
да се отстрани горниот padding и margin по default
за h1.
Совет 2
Потомците не треба да формираат margin помеѓу
родителите. На пример, кај нас имаме мени.
Долниот margin на ова мени може да се формира
или со margin на div-от со мени, или со margin
на линковите. Подобро е да се избере првата опција,
бидејќи линковите не треба да дејствуваат преку главата
на родителот.
Совет 3
Нека помеѓу два елементи има margin
и во овој случај визуелно нема разлика,
што да се избере за margin - margin или padding.
Во овој случај изберете margin, бидејќи
токму тој треба да создава margins помеѓу
елементите.
