Enostavne enostolpne postavitve spletnih strani v CSS

V tej lekciji bomo vadili ustvarjanje enostavnih enostolpnih postavitev spletnih strani. Na primer, naredimo takšno postavitev:

Začnimo z implementacijo. Vsaka postavitev se praviloma začne s splošnim div z imenom wrapper, ki vsebuje celotno preostalo spletno stran:

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

V našem primeru bo ovojnica poravnana na sredino zaslona:

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

Prav tako bo imela obrobo:

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

Zdaj naredimo glavno strukturo strani. Sestavljena bo iz menija in glavne vsebine:

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

Dodajmo vsebino naših 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>

Zdaj lahko dodamo sloge našim blokom. Dodajmo slog meniju:

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

In zdaj dodajmo sloge elementom vsebine:

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

Zdaj lahko zberemo celotno kodo skupaj:

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

Nasvet 1

Najbolj priročno je dajati odmike od zgoraj navzdol. Na primer, imamo meni in vsebino, med njima pa je prazen prostor. Očitno je, da je ta prostor lahko narejen z spodnjim odmikom menija, zgornjim odmikom vsebine, ali hkratnim vplivom obeh. V tem primeru je bolje nastaviti spodnji odmik meniju, vsebini pa odstraniti privzete vrednosti padding in margin za h1.

Nasvet 2

Potomci ne bi smeli oblikovati odmika med starši. Na primer, imamo meni. Spodnji odmik tega menija je mogoče oblikovati z margin div z menijem, ali z margin povezav. Bolje je izbrati prvo možnost, saj povezave ne bi smele delovati čez glavo starša.

Nasvet 3

Recimo, da med dvema elementoma obstaja odmik in v tem primeru vizualno ni razlike, kaj izbrati za odmik - margin ali padding. V tem primeru izberite margin, saj je prav ta tisti, ki naj bi ustvarjal odmike med elementi.

Praktične naloge