Layout di siti web a colonna singola semplici in CSS

In questa lezione ci eserciteremo a creare layout di siti web a colonna singola semplici. Facciamo, ad esempio, un layout come questo:

Iniziamo l'implementazione. Ogni layout di solito inizia con un div generale chiamato wrapper, che contiene l'intero resto del sito:

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

Nel nostro caso il wrapper sarà centrato rispetto allo schermo:

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

Avrà anche un bordo:

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

Ora creiamo la struttura principale della pagina. Consisterà in un menu e nel contenuto principale:

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

Aggiungiamo il contenuto dei nostri blocchi:

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>

Ora possiamo aggiungere gli stili ai nostri blocchi. Aggiungiamo lo stile al 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;
}

E ora aggiungiamo gli stili agli elementi del contenuto:

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

Ora possiamo mettere insieme tutto il codice:

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

Suggerimento 1

È più conveniente dare i margini dall'alto verso il basso. Ad esempio, abbiamo un menu e un contenuto, e tra di loro - uno spazio vuoto. Ovviamente, questo spazio può essere creato dal margine inferiore del menu, dal margine superiore del contenuto, o dalla loro influenza simultanea. In questo caso è meglio impostare il margine inferiore al menu, e al contenuto rimuovere padding e margin di default per h1.

Suggerimento 2

Gli elementi figlio non dovrebbero formare margini tra gli elementi genitore. Ad esempio, abbiamo un menu. Il margine inferiore di questo menu può essere formato o dal margin del div con il menu, o dal margin dei link. È meglio scegliere la prima opzione, poiché i link non dovrebbero agire oltre la testa del genitore.

Suggerimento 3

Supponiamo che tra due elementi ci sia un margine e in questo caso visivamente non c'è differenza in cosa scegliere per il margine - margin o padding. In questo caso scegli margin, poiché è proprio lui che dovrebbe creare margini tra gli elementi.

Compiti pratici