CSS izbornik -
CSS menu

Osnovna struktura


<!DOCTYPE html>
<html>
<head>    
    <meta charset="utf-8" />    
    <link rel="stylesheet" href="stil.css" />
</head>
<body>

</body>
</html>    

Poveznice unutar popisa:


<div id="wrapper">
    <div id="nav">
        <ul>
            <li><a href="#">Naslovnica</a></li>
            <li><a href="#" id="trenutni">Proizvodi</a></li>
            <li><a href="#">Usluge</a></li>
            <li><a href="#">O nama</a></li> 
            <li><a href="#">Kontakt</a></li>
        </ul>
    </div>
</div>

CSS mjerne jedinice : px, pt, em i %

Općenito je: 1em = 12pt = 16px = 100%

Što se događa kada povećamo bazni font:


body {
    font-size: 62,5%;
}

CSS zadane postavke

* {
    margin: 0;
    padding: 0; 
}
body {
    font-size: 62.5%;
    font-family: Tahoma, sans-serif;
    background-color: #E8CC4C;
}
#wrapper {
    margin: 0 auto;
    width: 80em;
}

Vodoravni izbornik


#nav ul {
    float: left;
    width: 100%;
    background: url('slike/neaktivan.gif') repeat-x;
    border-top: white 0.1em solid;
}

#nav li {
    display: inline;
    list-style: none;
}

Popis kao linijski element


#nav li a {
    float: left;
    color: white;
    padding: 0.6em 1.4em;
    font-size: 1.6em;
    text-decoration: none;
    border-right: white 0.1em solid;
}
#nav li a:hover, #nav li #trenutni {
    background: url('slike/aktivan.gif');
}

Poveznice unutar popisa:


<div id="wrapper">
    <div id="side-nav">
        <ul>
            <li><a href="#">Naslovnica</a></li>
            <li><a href="#" id="trenutni">Proizvodi</a></li>
            <li><a href="#">Usluge</a></li>
            <li><a href="#">O nama</a></li> 
            <li><a href="#">Kontakt</a></li>
        </ul>
    </div>
</div>

Okomiti izbornik


#side-nav ul {
    width: 14em;
}

#side-nav li {
    background: url('slike/neaktivan.gif') repeat-x;
    border-top: white 0.1em solid;
    text-indent: 0.8em;
    line-height: 3.8em;
    list-style: none;
}

Aktivne poveznice i LOVE HATE


#side-nav li a {
    color: white;
    font-size: 1.6em;
    text-decoration: none;
    display: block;
}

#side-nav li a:hover, #side-nav li #trenutni {
   background: url('slike/aktivan.gif') repeat-x;
}


Hvala na pozornosti!


Pitanja?