Postavitev strani s CSS

Stran lahko postavimo na različne načine, pri čemer uporabimo eno od naslednjih možnosti:

Postavitev strani s pozicioniranjem

Za postavitev strani s pozicioniranjem uporabimo position in statično, relativno, absolutno ali fiksno pozicioniranje. Oglejmo si praktični primer postavitve strani:

<header>
  V primeru, da uporabljate fiksni "header", pripravite zanj prostor, 
  tako da v "body" dodate lastnost "margin-top".
</header>
<nav>
   <ul>
      <li>eNSA</li>
      <li>HTML</li>
      <li>CSS</li>
      <li>Spletišče</li>
      <li>JavaScript</li>
      <li>PHP</li>
      <li>MySQL</li>
   </ul>
</nav>
<section>
   Prva sekcija
</section>
<section>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vel 
   iaculis nisl, vitae vulputate sem. Sed eu elit consequat, venenatis 
   augue vitae, vestibulum leo. Ut pharetra purus nec lacus sagittis 
   pharetra ut id nibh. Nulla facilisi... 
</section>
<section>
   Tretja sekcija
</section>
<footer>
   V primeru, da uporabljate fiksni "footer", pripravite zanj prostor, 
   tako da v "body" dodate lastnost "margin-bottom".
</footer>

header {
   position: relative;
   top: 0;
   left: 0;
   height: 100px;
   background-color: gainsboro;
   width: 100%;
}                  
nav {
   position: absolute;
   left: 0px;
   width: 200px; /* širina menija */
   background-color: orange;
}
section {
  /* privzeto je pozicija "static" */
  margin-left: 200px; /*prostor za meni */
} 
.sekcija1 { background-color: gold }
.sekcija2 { background-color: yellow }
.sekcija3 { background-color: goldenrod }
footer {
   position: fixed;
   bottom: 0;
   left: 0;
   height: 70px;
   background-color: silver;
   width: 100%;
}
body {
   margin-bottom: 120px; /* prostor za nogo strani */
}

Prikaz primera v brskalniku:

Plavajoča postavitev strani

Za plavajočo postavitev strani uporabimo float. Oglejmo si praktični primer postavitve strani:

<header>
  Glava strani
</header>
<nav>
   <ul>
      <li>eNSA</li>
      <li>HTML</li>
      <li>CSS</li>
      <li>Spletišče</li>
      <li>JavaScript</li>
      <li>PHP</li>
      <li>MySQL</li>
   </ul>
</nav>
<section>
   Prva sekcija
</section>
<section>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vel 
   iaculis nisl, vitae vulputate sem. Sed eu elit consequat, venenatis 
   augue vitae, vestibulum leo. Ut pharetra purus nec lacus sagittis 
   pharetra ut id nibh. Nulla facilisi... 
</section>
<section>
   Tretja sekcija
</section>
<footer>
   Noga strani
</footer>

header {
   height: 100px;
   background-color: gainsboro;
   width: 100%;
}                  
nav {
   float: left;
   width: 200px; /* širina menija */
   background-color: orange;
}
section {
  margin-left: 200px; /*prostor za meni */
} 
.sekcija1 { background-color: gold }
.sekcija2 { background-color: yellow }
.sekcija3 { background-color: goldenrod }
footer {
   height: 70px;
   background-color: silver;
   width: 100%;
}

Prikaz primera v brskalniku:

Plavajoča postavitev strani z odstotki

Za plavajočo postavitev strani uporabimo float, pri čemer širino menija nastavimo v odstotkih. Oglejmo si praktični primer postavitve strani:

<header>
  Glava strani
</header>
<nav>
   <ul>
      <li>eNSA</li>
      <li>HTML</li>
      <li>CSS</li>
      <li>Spletišče</li>
      <li>JavaScript</li>
      <li>PHP</li>
      <li>MySQL</li>
   </ul>
</nav>
<section>
   Prva sekcija
</section>
<section>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vel 
   iaculis nisl, vitae vulputate sem. Sed eu elit consequat, venenatis 
   augue vitae, vestibulum leo. Ut pharetra purus nec lacus sagittis 
   pharetra ut id nibh. Nulla facilisi... 
</section>
<section>
   Tretja sekcija
</section>
<footer>
   Noga strani
</footer>

header {
   height: 100px;
   background-color: gainsboro;
   width: 100%;
}                  
nav {
   float: left;
   width: 25%; /* širina menija v % */
   background-color: orange;
}
section {
  margin-left: 25%; /*prostor za meni */
} 
.sekcija1 { background-color: gold }
.sekcija2 { background-color: yellow }
.sekcija3 { background-color: goldenrod }
footer {
   height: 70px;
   background-color: silver;
   width: 100%;
}

Prikaz primera v brskalniku, kjer za poln prikaz učinka spreminjajte širino okna:

Plavajoča postavitev strani z odstotki in media queries

Z uporabo lastnosti @media screen in poizvedbo, postavimo stran, ki se prilagodi različni velikosti zaslona.

Oglejmo si praktični primer postavitve strani, kjer za plavajočo postavitev strani uporabimo float, pri čemer širino menija nastavimo v odstotkih. Ko se širina okna brskalnika zmanjša pod 600 px, se meni postavi v vodoravni položaj:

<header>
  Glava strani
</header>
<nav>
   <ul>
      <li>eNSA</li>
      <li>HTML</li>
      <li>CSS</li>
      <li>Spletišče</li>
      <li>JavaScript</li>
      <li>PHP</li>
      <li>MySQL</li>
   </ul>
</nav>
<section>
   Prva sekcija
</section>
<section>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vel 
   iaculis nisl, vitae vulputate sem. Sed eu elit consequat, venenatis 
   augue vitae, vestibulum leo. Ut pharetra purus nec lacus sagittis 
   pharetra ut id nibh. Nulla facilisi... 
</section>
<section>
   Tretja sekcija
</section>
<footer>
   Noga strani
</footer>

header {
   height: 100px;
   background-color: gainsboro;
   width: 100%;
}
.sekcija1 { background-color: gold }
.sekcija2 { background-color: yellow }
.sekcija3 { background-color: goldenrod }

@media screen and (min-width:600px) {                  
   nav {
      float: left;
      width: 25%; /* širina menija v % */
      background-color: orange;
   }
   section {
     margin-left: 25%; /*prostor za meni */
   }
} 
@media screen and (max-width:599px) {
    nav li {
      display: inline;
    }
}

footer {
   height: 70px;
   background-color: silver;
   width: 100%;
}

Prikaz primera v brskalniku, kjer za poln prikaz učinka spreminjajte širino okna:

Prilagodljiva postavitev strani z flexbox

Oglejmo si praktični primer postavitve strani, kjer za postavitev strani uporabimo flex, pri čemer širino menija nastavimo v pikah ali odstotkih:

<header>
  Glava strani
</header>
<nav>
   <ul>
      <li>eNSA</li>
      <li>HTML</li>
      <li>CSS</li>
      <li>Spletišče</li>
      <li>JavaScript</li>
      <li>PHP</li>
      <li>MySQL</li>
   </ul>
</nav>
<section>
   Prva sekcija
</section>
<section>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vel 
   iaculis nisl, vitae vulputate sem. Sed eu elit consequat, venenatis 
   augue vitae, vestibulum leo. Ut pharetra purus nec lacus sagittis 
   pharetra ut id nibh. Nulla facilisi... 
</section>
<section>
   Tretja sekcija
</section>
<footer>
   Noga strani
</footer>

header {
   height: 100px;
   background-color: gainsboro;
   width: 100%;
}
.container {
   display: flex;
}                  
nav {
   width: 25%; /* širina menija v % */
   background-color: orange;
}

section {
  flex: 1;
} 
.sekcija1 { background-color: gold }
.sekcija2 { background-color: yellow }
.sekcija3 { background-color: goldenrod }
footer {
   height: 70px;
   background-color: silver;
   width: 100%;
}

Prikaz primera v brskalniku, kjer za poln prikaz učinka spreminjajte širino okna:

Več o Flexbox si lahko ogledate na css-tricks.com.