<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="stil.css" />
</head>
<body>
</body>
</html>
<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>
Što se događa kada povećamo bazni font:
body {
font-size: 62,5%;
}
* {
margin: 0;
padding: 0;
}
body {
font-size: 62.5%;
font-family: Tahoma, sans-serif;
background-color: #E8CC4C;
}
#wrapper {
margin: 0 auto;
width: 80em;
}
#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;
}
#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');
}
<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>
#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;
}
#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;
}