Proste jednokolumnowe układy stron w CSS

W tej lekcji będziemy ćwiczyć tworzenie prostych jednokolumnowych układów stron. Zróbmy, na przykład, taki układ:

Przystąpmy do realizacji. Każdy układ z reguły zaczyna się od ogólnego diva o nazwie wrapper, zawierającego całą resztę strony:

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

W naszym przypadku wrapper będzie wyrównany do środka ekranu:

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

Będzie też miał obramowanie:

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

Zróbmy teraz główną strukturę strony. Będzie się składać z menu i głównej zawartości - treści:

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

Dodajmy zawartość naszych bloków:

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 możemy dodać style naszym blokom. Dodajmy styl 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 dodajmy style elementom treści:

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

Możemy teraz zebrać cały kod razem:

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

Najwygodniej jest podawać odstępy od góry do dołu. Na przykład, mamy menu i treść, a między nimi - puste miejsce. Oczywiście, że to miejsce może być zrobione dolnym odstępem menu, górnym odstępem treści, lub ich jednoczesnym wpływem. W tym przypadku lepiej ustawić dolny odstęp menu, a treści usunąć górny padding i margin domyślny dla h1.

Rada 2

Potomkowie nie powinny formować odstępu między rodzicami. Na przykład, mamy menu. Dolny odstęp tego menu można sformować albo margin diva z menu, albo margin linków. Lepiej wybrać pierwszą opcję, ponieważ linki nie powinny działać przez głowę rodzica.

Rada 3

Niech między dwoma elementami będzie odstęp i w tym przypadku wizualnie nie ma różnicy, co wybrać dla odstępu - margin lub padding. W tym przypadku wybierz margin, ponieważ właśnie on powinien tworzyć odstępy między elementami.

Zadania praktyczne