Прости едноколонови оформления на сайтове в CSS

В този урок ще се упражняваме да създаваме прости едноколонови оформления на сайтове. Нека, например, направим такова оформление:

Да започнем реализацията. Всяко оформление като правило започва с общ div с име wrapper, съдържащ целия останал сайт:

html<div id="wrapper">
  
</div>

В нашия случай wrapper-ът ще бъде подравнен в центъра на екрана:

css#wrapper {
  width: 800px;
  margin: 50px auto;
}

Също така ще има граница:

css#wrapper {
  width: 800px;
  margin: 50px auto;
  border: 1px solid black;
}

Сега нека направим основната структура на страницата. Тя ще се състои от меню и основно съдържание - контент:

html<div id="wrapper">
  <div id="menu">
    
  </div>
  <div id="content">
    
  </div>
</div>

Нека добавим съдържанието на нашите блокове:

html<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>

Сега можем да добавим стилове към нашите блокове. Нека добавим стил към менюто:

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

А сега нека добавим стилове към елементите на съдържанието:

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

Сега можем да съберем целия код заедно:

html<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>

css#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 на div с меню, или чрез margin на връзките. По-добре е да изберете първия вариант, тъй като връзките не трябва да действат над главата на родителя.

Съвет 3

Нека между два елемента има отстъп и в този случай визуално няма разлика, какво да изберете за отстъп - margin или padding. В този случай изберете margin, тъй като точно той трябва да създава отстъпи между елементите.

Практически задачи