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