Jednoduché jednosĺpcové layouty stránok v CSS

V tejto lekcii si budeme precvičovať vytváranie jednoduchých jednosĺpcových layoutov stránok. Urobme napríklad takýto layout:

Poďme na realizáciu. Každý layout zvyčajne začína všeobecným divom s názvom wrapper, ktorý obsahuje celý zvyšok stránky:

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

V našom prípade bude wrapper zarovnaný na stred obrazovky:

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

Tiež bude mať ohraničenie:

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

Poďme teraz vytvoriť hlavnú štruktúru stránky. Bude pozostávať z menu a hlavného obsahu - contentu:

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

Pridajme obsah našich blokov:

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>

Teraz môžeme pridať štýly našim blokom. Pridajme štýl menu:

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

A teraz pridajme štýly elementom contentu:

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

Teraz môžeme celý kód poskladať dokopy:

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

Rada 1

Najpohodlnejšie je dávať odsadenia zhora nadol. Napríklad, máme menu a content, a medzi nimi - prázdny priestor. Je zrejmé, že tento priestor môže byť vytvorený dolným odsadením menu, horným odsadením contentu, alebo ich súčasným vplyvom. V tomto prípade je lepšie nastaviť dolný odstup menu, a contentu odstrániť horný padding a margin predvolené pre h1.

Rada 2

Potomkovia by nemali formovať odstup medzi rodičmi. Napríklad, máme menu. Dolný odstup tohto menu môže byť formovaný buď margin divu s menu, alebo margin odkazov. Lepšie je zvoliť prvú možnosť, pretože odkazy by nemali konať cez hlavu rodiča.

Rada 3

Nech medzi dvoma prvkami je odstup a v tomto prípade vizuálne nie je rozdiel, čo zvoliť pre odstup - margin alebo padding. V tomto prípade zvoľte margin, pretože práve on by mal vytvárať odstup medzi prvkami.

Praktické úlohy