Postavitev strani s CSS

Stran lahko v CSS postavimo na več načinov. Nekateri pristopi so danes predvsem zgodovinsko pomembni ali uporabni le v posebnih primerih, drugi pa predstavljajo sodobno osnovo odzivnega spletnega oblikovanja.

V sodobni praksi za postavitev strani najpogosteje uporabljamo flex, grid in @media. Lastnosti float in position sta še vedno pomembni, vendar ju navadno uporabljamo za bolj posebne naloge. Pristop z inline-block in starejše postavitve z odstotki je koristno poznati predvsem zaradi razumevanja razvoja CSS.

Osnovna pravila

• Postavitev strani določa, kako so razporejeni glava, meni, vsebina, stranski stolpec in noga.
• Starejši pristopi so pomembni za razumevanje, vendar niso nujno najbolj primerni za nove projekte.
• Za sodobno postavitev v eni smeri je zelo uporaben Flexbox.
• Za postavitev po vrsticah in stolpcih hkrati je zelo uporaben Grid.
• Za odzivnost strani moramo pogosto uporabiti tudi @media.

Postavitev strani s position

Za postavitev strani s pozicioniranjem uporabimo position. Tak pristop je uporaben za posebne elemente, na primer pripete glave, stranske menije ali plavajoče gumbe, ni pa danes najprimernejši za celotno glavno postavitev strani.

<header>Glava strani</header>
<nav>Meni</nav>
<section>Glavna vsebina ...</section>
<footer>Noga strani</footer>

header {
   position: relative;
   height: 80px;
   background-color: gainsboro;
   padding: 10px;
}

nav {
   position: absolute;
   left: 0;
   width: 180px;
   background-color: orange;
   padding: 10px;
}

section {
   margin-left: 200px;
   padding: 10px;
}

footer {
   position: fixed;
   bottom: 0;
   left: 0;
   width: 100%;
   background-color: gainsboro;
   padding: 10px;
}

body {
   margin-bottom: 80px;
}

Prikaz enake postavitve v zunanji datoteki:

Plavajoča postavitev z float

Za plavajočo postavitev uporabimo float. Tak način je bil včasih zelo pogost, danes pa se za glavno postavitev strani uporablja redkeje. Še vedno pa je uporaben za posebne primere, na primer za slike, okoli katerih se preliva besedilo.

nav {
   float: left;
   width: 180px;
   background-color: orange;
   padding: 10px;
}

section {
   margin-left: 200px;
   padding: 10px;
}

Prikaz enake postavitve v zunanji datoteki:

Postavitev z inline-block

Pred razširjeno uporabo Flexboxa so razvijalci pogosto uporabljali tudi inline-block. Ta pristop je lahko uporaben za manjše postavitve, vendar je pri večjih postavitvah manj priročen kot sodobni Flexbox ali Grid.

nav {
   display: inline-block;
   vertical-align: top;
   width: 25%;
   background-color: orange;
   padding: 10px;
}

.vsebina {
   display: inline-block;
   vertical-align: top;
   width: 72%;
   padding: 10px;
}

Prikaz enake postavitve v zunanji datoteki:

Postavitev z odstotki

Če širine elementov določimo v odstotkih, se postavitev bolje prilagaja različnim širinam zaslona. To je preprosta odzivnejša različica starejših postavitev.

nav {
   float: left;
   width: 25%;
   background-color: orange;
   padding: 10px;
}

section {
   margin-left: 27%;
   padding: 10px;
}

Prikaz enake postavitve v zunanji datoteki, kjer za poln prikaz učinka spreminjajte širino okna:

Odzivna postavitev z @media

Z uporabo @media lahko prilagodimo postavitev različnim velikostim zaslona. To je temelj odzivnega oblikovanja. Na manjših zaslonih lahko stranski meni postane vodoraven ali se prestavi nad vsebino.

@media screen and (min-width: 600px) {
   nav {
      float: left;
      width: 25%;
   }

   section {
      margin-left: 27%;
   }
}

@media screen and (max-width: 599px) {
   nav {
      width: 100%;
   }

   nav li {
      display: inline-block;
   }

   section {
      margin-left: 0;
   }
}

Prikaz enake postavitve v zunanji datoteki, kjer za poln prikaz učinka spreminjajte širino okna:

Prilagodljiva postavitev s Flexboxom

Flexbox je sodoben način postavitve elementov v eni smeri: v vrstici ali v stolpcu. Zelo primeren je za glavno postavitev strani z menijem in vsebino, za vrstice kartic, gumbe, menije in podobne sklope.

.container {
   display: flex;
   gap: 12px;
}

nav {
   width: 25%;
   background-color: orange;
   padding: 10px;
}

main {
   flex: 1;
   padding: 10px;
}

Prikaz enake postavitve v zunanji datoteki:

Prilagodljiva postavitev z Grid

Grid je sodoben način postavitve v dveh dimenzijah: hkrati po vrsticah in stolpcih. Primeren je za celotno postavitev strani, kartice, galerije, mreže vsebine in druge kompleksnejše razporeditve.

.postavitev {
   display: grid;
   grid-template-columns: 220px 1fr;
   grid-template-areas:
      "header header"
      "nav    main"
      "footer footer";
   gap: 12px;
}

header { grid-area: header; }
nav { grid-area: nav; }
main { grid-area: main; }
footer { grid-area: footer; }

Prikaz enake postavitve v zunanji datoteki:

Primerjava pristopov

Priporočila

• Za nove projekte se najprej odloči med Flexboxom in Gridom.
• Pravilo @media uporabi za prilagajanje postavitve različnim širinam zaslona.
• position uporabi za posebne elemente, ne pa kot prvo izbiro za celotno postavitev strani.
• float uporabi predvsem tam, kjer želiš doseči oblivanje vsebine.
• Starejše pristope poznaj zaradi razumevanja obstoječe kode, vendar pri novih postavitvah raje izberi sodobnejše rešitve.

Pogoste napake

• Za nove postavitve se še vedno uporablja float, čeprav bi bila primernejša sodobnejša rešitev.
• Absolutno ali fiksno pozicioniranje se uporablja kot splošna rešitev za postavitev strani.
• Pri prilagajanju zaslonu se pozabi na pravilo @media.
• Zamenjuje se namen Flexboxa in Grida.
• Pri starejših pristopih ni jasno, kateri del kode skrbi za odzivnost in kateri le za osnovno razporeditev.