Едноставни едно-колони распореди на веб-страници во 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

Најпогодно е да се даваат margins од горе надолу. На пример, кај нас имаме мени и содржина, а помеѓу нив - празен простор. Очигледно, дека овој простор може да биде направен со долниот margin на менито, горниот margin на содржината, или нивното истовремено влијание. Во овој случај подобро е да се зададе долен margin на менито, а на содржината да се отстрани горниот padding и margin по default за h1.

Совет 2

Потомците не треба да формираат margin помеѓу родителите. На пример, кај нас имаме мени. Долниот margin на ова мени може да се формира или со margin на div-от со мени, или со margin на линковите. Подобро е да се избере првата опција, бидејќи линковите не треба да дејствуваат преку главата на родителот.

Совет 3

Нека помеѓу два елементи има margin и во овој случај визуелно нема разлика, што да се избере за margin - margin или padding. Во овој случај изберете margin, бидејќи токму тој треба да создава margins помеѓу елементите.

Практични задачи