Layout-uri simple de site cu o singură coloană în CSS

În această lecție vom exersa crearea unor layout-uri simple de site cu o singură coloană. Să facem, de exemplu, un astfel de layout:

Să începem implementarea. Fiecare layout începe de obicei cu un div general numit wrapper, care conține întregul site:

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

În cazul nostru, wrapper-ul va fi aliniat la centrul ecranului:

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

De asemenea, va avea o bordură:

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

Să creăm acum structura principală a paginii. Aceasta va consta dintr-un meniu și conținutul principal:

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

Să adăugăm conținutul blocurilor noastre:

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>

Acum putem adăuga stiluri blocurilor noastre. Să adăugăm stil meniului:

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

Și acum să adăugăm stiluri elementelor de conținut:

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

Putem acum să asamblăm tot codul împreună:

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

Sfatul 1

Este mai convenabil să dai spații de la sus în jos. De exemplu, avem un meniu și conținut, iar între ele - spațiu liber. Evident, că acest spațiu poate fi făcut cu margin-ul de jos al meniului, cu margin-ul de sus al conținutului, sau cu influența lor simultană. În acest caz este mai bine să setăm margin-ul de jos pentru meniu, iar conținutului să îi eliminăm padding și margin implicit pentru h1.

Sfatul 2

Descendenții nu ar trebui să formeze spațiu între părinți. De exemplu, avem un meniu. Spațiul de jos al acestui meniu poate fi format fie cu margin al div-ului cu meniu, fie cu margin link-urilor. Este mai bine să alegem prima variantă, deoarece link-urile nu ar trebui să acționeze peste capul părintelui.

Sfatul 3

Să presupunem că între două elemente există un spațiu și în acest caz vizual nu există diferență, ce să alegi pentru spațiu - margin sau padding. În acest caz alegeți margin, deoarece tocmai acesta ar trebui să creeze spații între elemente.

Exerciții practice