JSFiddle - React, Tailwind, and code Playground
HTML
<div id="wrapper">
<div id="header">
<img src="img/logo.png">
</div>
<!--header END-->
<div id="nav">
<ul>
<li><a href="index.php" class="select">Profil</a></li>
<li><a href="referencer.php" class="pushlinks" class="select">Referencer</a></li>
<li><a href="projekter.php" class="pushlinks" class="select">Projekter</a></li>
<li><a href="galleri.php" class="pushlinks" class="select">Galleri</a></li>
<li><a href="blog.php" class="pushlinks" class="select">Blog</a></li>
<li><a href="#" class="pushlogin" class="select">Login</a></li>
</ul>
</div>
<!--nav END-->
<div id="content">
</div>
</div>
CSS
/*RESET*/
*{
margin:0px;
padding:0px;
border:0;
}
html{
background:url(../img/grey_bg.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body{
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
}
#wrapper{
width:960px;
margin:0px auto;
}
#header{
height:140px;
}
#header img{
margin:35px 0 0 35px;
}
#nav{
height:51px;
padding-left:1px;
font-size:0;
border-top:4px solid #7a7ab3;
border-left:4px solid #7a7ab3;
border-right:4px solid #7a7ab3;
border-top-left-radius:4px;
border-top-right-radius:4px;
background: #464674; /* Old browsers */
background: -moz-linear-gradient(top, #464674 0%, #494978 20%, #5a5a8f 70%, #606098 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#464674), color-stop(20%,#494978), color-stop(70%,#5a5a8f), color-stop(100%,#606098)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #464674 0%,#494978 20%,#5a5a8f 70%,#606098 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #464674 0%,#494978 20%,#5a5a8f 70%,#606098 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #464674 0%,#494978 20%,#5a5a8f 70%,#606098 100%); /* IE10+ */
background: linear-gradient(to bottom, #464674 0%,#494978 20%,#5a5a8f 70%,#606098 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#464674', endColorstr='#606098',GradientType=0 ); /* IE6-9 */
}
#nav ul{
margin:22px 0 0 20px;
}
#nav ul li{
margin-top:1px;
display:inline-block;
list-style:none;
}
#nav ul li a{
font-size:12px;
padding:14px 10px 14px 10px;
text-decoration:none;
text-transform:uppercase;
color:rgba(255,255,255,1);
}
.pushlinks{
margin-left:16px;
}
.pushlogin{
margin-left:404px;
}
#nav ul li a:hover, .active{
color:#666699;
border-top-left-radius:4px;
border-top-right-radius:4px;
background: #d0d0d0; /* Old browsers...