I’ve put together a theme in Photoshop (it’s very rough right now) and I’m trying to build it out in CSS/HTML right now and am having problems with the nav bar (the one with all of the icons). I can get the container for it and the logo however the smaller squares I just can’t get to line up correctly.
<!DOCTYPE html>
<html>
<head>
<title>JKOgden.net</title>
<meta name="author" content="James K. Ogden" />
<meta name="rating" content="general" />
<meta name="copyright" content="Copyright (c) 2014 James K. Ogden" />
<link type="application/atom+xml" rel="alternate" href="http://www.jkogden.net/feed/atom/" title="JKOgden's Blog Atom Feed" />
<link type="image/x-icon" rel="shortcut icon" href="favicon.ico" />
<link rel="stylesheet" type="text/css" media="all" href="includes/style-v5-0-0.css" title="jkogdendotnet" />
</head>
<body>
<div id="wrapper">
<div id="container-nav">
<!--<div style="cursor: pointer;" onclick="window.location='http://www.jkogden.net';">-->
<div id="container-logo"></div>
<!--</div>-->
<div id="container-box-blog">
Blog
</div>
<div id="container-box-about">
</div>
<div id="container-box-christianity">
</div>
<div id="container-box-photos">
</div>
<div id="container-box-search">
</div>
</div><!--/container-nav-->
</div><!--/wrapper-->
</body>
</html>
/*---[ page defaults ]------------------------- */
body {
background:#e4f0f6 url(../media/theme/bg-metro.png);
font-family:"Segoe UI",segoe-cust-standard,"Segoe","Segoe WP","Tahoma","Verdana","Arial";
font-size:11pt;
line-height:1.5em;
margin:auto;
padding:0;
}
@font-face {
font-family:segoe-cust-light;
src:url(fonts/segoeuil.ttf);
}
@font-face {
font-family:segoe-cust-standard;
src:url(fonts/segoeuis.ttf);
}
.small,small {
font:0.8em Arial, Helvetica, Sans-Serif;
}
img {
border:0;
}
acronym {
border-bottom:dotted 1px #2e6bac;
cursor:help;
}
.right {
text-align:right;
}
.center {
text-align:center;
}
.strike {
text-decoration:line-through;
}
.underline {
border-bottom: 1px solid #000;
}
.last-update {
color:gray;
font-size:9pt;
font-style:italic;
}
::-moz-selection{
background:#ddd;
color:#000
}
::selection{
background:#ddd;
color:#000
}
/* ---[ page structure ]---------------------- */
#wrapper {
margin:auto;
padding-top:15px;
width:960px;
min-height:800px;
}
#container-nav {
background:#fff;
height:125px;
width:100%;
}
#container-logo {
background:#647687 url(../media/theme/logo.png) no-repeat center;
height:125px;
width:300px;
}
#container-box-blog {
margin-left:10px;
margin-top:10px;
position:relative;
background:#647687;
height:125px;
width:125px;
}
/* ---[ text styling ]---------------------- */