Jednostavni jednokolonski rasporedi sajtova u CSS-u

U ovoj lekciji ćemo vežbati kreiranje jednostavnih jednokolonskih rasporeda sajtova. Na primer, hajde da napravimo ovakav raspored:

Počnimo sa realizacijom. Svaki raspored uglavnom počinje opštim div-om pod nazivom wrapper, koji sadrži ostatak sajta:

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

U našem slučaju, wrapper će biti centriran na ekranu:

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

Takođe će imati granicu:

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

Hajde sada da napravimo osnovnu strukturu stranice. Sastojaće se od menija i glavnog sadržaja - content-a:

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

Dodajmo sadržaj našim blokovima:

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>

Sada možemo dodati stilove našim blokovima. Hajde da dodamo stil 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;
}

A sada dodajmo stilove elementima sadržaja:

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

Sada možemo spojiti sav kod zajedno:

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

Savet 1

Najpogodnije je davati razmake odozgo nadole. Na primer, imamo meni i sadržaj, a između njih je prazan prostor. Očigledno, da taj prostor može biti napravljen donjim razmakom menija, gornjim razmakom sadržaja, ili njihovim istovremenim uticajem. U ovom slučaju bolje je postaviti donji razmak meniju, a sadržaju ukloniti podrazumevani gornji padding i margin za h1.

Savet 2

Potomci ne bi trebalo da formiraju razmak između roditelja. Na primer, imamo meni. Donji razmak ovog menija može se formirati bilo margin div-a sa menijem, bilo margin linkova. Bolje je izabrati prvu opciju, jer linkovi ne bi trebalo da deluju preko glave roditelja.

Savet 3

Neka između dva elementa postoji razmak i u ovom slučaju vizuelno nema razlike, šta izabrati za razmak - margin ili padding. U ovom slučaju birajte margin, jer upravo on treba da kreira razmake između elemenata.

Praktični zadaci