Could I get some feedback on my simple start to an admin template: http://jsfiddle.net/spadez/GHKxW/3/
HTML
<div class="wrapper">
<div class="left">
<a href="#"><img src="nav_sprite.jpg" class="logo" /></a>
<ul class="navigation">
<li id="dashboard"><a href="index.html" class="active">Dashboard</a></li>
</ul>
</div>
<div class="right">
<h1>Title</h1>
<p>Content</p>
</div>
</div>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
border: 0;
}
li {
list-style: none;
}
a {
text-decoration: none
}
html, body {height: 100%; max-height: 100%; padding:0; margin:0;}
.wrapper {display:table; width:100%; height:100%;}
.wrapper > div {display:table-cell; vertical-align: top;}
.wrapper .left {width:200px; background-color:#34495E}
#btn_pri {
background-color: 60A0DF;
color: white;
}
#btn_sec { background-color: #e74c3c;
color:white;
}
.navigation {
}
.navigation li {
}
.navigation li span {
display: inline-block;
background: url(http://www.otlayi.com/web_images/content/free-doc-type-sprite-icons.jpg) no-repeat left center;
width: 16px;
height: 16px;
overflow: hidden;
margin-left: 15px;
margin-right: 15px;
}
.navigation li a {
display: block;
color: white;
padding-top: 15px;
padding-bottom: 15px;
font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 14px;
}
.navigation li a:hover {
background-color: #495C6D;
}
.navigation li a.active {
background-color: #495C6D
}
#rss span {
background-position: -52px -68px;
}
#photos span {
background-position: -90px -66px;
}
#links span {
background-position: -45px 0;
}
h1 {font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 30px; font-weight: 500;}
.logo {height: 50px; margin-bottom: 30px;}
.btn {
letter-spacing: 1px;
font-weight:bold;
padding-left: 10px;
padding-right: 10px;
height: 34px;
border-radius:3px;
border: 0px;
text-transform:uppercase;
font-size:12px;
}
#btn_pri {
background-color: #60A0DF;
color: white;
}
#btn_sec { background-color: #e74c3c;
color:white;
}
alt="logo"
to add some more semantic value to your content images. But I know this is still an early build. \$\endgroup\$ – darcher Apr 19 '14 at 8:05<div class="right" role="main">
etc. w3.org/TR/wai-aria/roles \$\endgroup\$ – darcher Apr 19 '14 at 8:12