Noga spletne strani

noga_spletne_strani_thumb
Vsaka spletna stran potrebuje nogo, ki ji angleško rečemo tudi footer. Vodič vam bo pokazal CSS kodo, s katero postavite nogo točno na dno strani, neglede, ali je vsebine veliko ali malo. Zadnje čase so velike noge vedno bolj in bolj popularne. Preberite vodič in si še vi izdelajte eno.

 

Najprej vam bom prikazal HTML in CSS kodo, nato pa vam jo bom še razložil. Noga spletne strani je zelo uporabna, še posebej za portale z veliko vsebine. Spodaj imate naštetih nekaj idej, kaj lahko vstavite v nogo.

 

PRIKAZ spodnje kode

 

HTML koda
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<link rel="stylesheet" type="text/css" href="/style.css" />
 
</head>
 
<body>
<div class="vsebina">
 
Vsebina spletne strani.

 <div class="nogaVmes"></div>
</div>
 
<div class="noga"> Noga spletne strani</div>
 
</body>
</html>

 

style.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
html, body{
height: 100%;
padding: 0;
margin: 0;
text-align: center;
}
 
.vsebina{
margin: 0 auto -300px auto;
width: 500px;
min-height: 100%;
background: #FFCC66;
 
}
 
.nogaVmes {
height: 300px;
}
 
.noga{
height: 300px;
background: #FF3333;
}

 

PRIKAZ spodnje kode

Razlaga HTML kode:

 

Postavitev vsebuje 3 okvirje (dive).  V okvir, ki ima definiran class vsebina, dodajamo vsebino spletne strani (menije, besedila, slike, ... ). Okvir urejate s CSSjem, določa pa ga razred vsebina.

 

Pod vso vsebino pa moramo vključiti še div, ki bo nogi spletne strani pripravil prostor. Ta div ima določen class nogaVmes.

 

Pod div vsebina pride še div, ki predstavlja nogo spletne strani. Ker so zadnje čase v modi predvsem visoke noge oz. footerji sem ji določil višino 300px. Footer urejate v CSS datoteki z imenom style.css, določa pa ga razred noga.

 

 

Razlaga CSS kode:

 

html, body{ } določa obliko celotne spletne strani. Z margin: 0 in padding 0 odstranite nepotrebne odmike, ki bi se drugače pojavili. Text-align: center je tu zato, da je div z vsebino na sredini ekrana (drugače bi bil na levi).

 

vsebina{ } določa obliko okvirja oz. diva v katerem je celotna vsebina spletne strani. Margin ima vrednosti 0 auto -300px in auto. Vrednosti auto predstavljata desni in levi odmik, morata pa biti auto, da je div na sredini. Pogoj za sredinsko poravnavo je tudi width: 500px, ki določa, da bo vsebinski del širok 500 pikslov.

Vrednost min-height: 100% je tu za to, da je div razpotegnjen čez celotno višino ekrana. Brez tega bi noga skočila na vrh spletne strani.

Background predstavlja ozadje spletne strani in je tu le zaradi boljše predstave.

 

nogaVmes{ } predstavlja prostor za nogo. Določena je le višina (height), ki predstavlja višino noge.

 

noga{ } ureja nogo spletne strani. Nogi lahko poleg višine (height) določimo tudi širino (width). Če ji določite še širino boste opazili, da je okvir postavljen na levo stran. Da bo noga na sredini morate dodati še margin: 0 auto;

 

Sredinska poravnava noge
1
2
3
4
5
6
.noga{
height: 300px;
width: 500px;
margin: 0 auto;
background: #FF3333;
}

 

S tem bi nekako zaključil razlago CSS kode.

 

 

Zakaj je velika noga spletne strani tako popularna?

 

Odgovor je preprost. V nogi je velik potencial, saj jo lahko uporabite za dodaten meni. V njej lahko predstavite dodatno ponudbo spletne strani, pozovete obiskovalca, da se prijavi na vaša e-mail obvestila, v nogo lahko postavite dodaten banner. Možnosti je zares veliko in če nogo lepo oblikujete imate velike možnosti, da pritegne vsakega obiskovalca.

 

 

Noga spletne strani je na vsebinsko bogatem portalu nepograšljiva.

Vsi vodiči so na voljo BREZPLAČNO!
Pišite mi

Želite mnenje ali pomoč pri vašem projektu?

Pišite mi in bom pomagal, kakor bom v tistem trenutku lahko.