2
\$\begingroup\$

I've had a bit of help designing the header for a website here: http://jsfiddle.net/gxLt5/21/

It looks and works exactly how I had hoped. That said, I do feel like the code is a bit grotty, and I'm sure there is a more elegant solution to achiving the same result.

Could anyone please give me some feedback on the HTML and CSS so see if it can be improved or restructured?

HTML

<nav class="header"> 
    <ul class="navigation">
        <li><a href="#"><img src="smiley.gif" alt="logo" height="50" width="80"></a></li>
        <li id="a" class=""><a href="#"><span></span>A</a>
        </li>
        <li id="b" class=""><a href="#"><span></span>B</a>
        </li>
        <li id="account" class="right"> <a href="/admin/profile"><span></span>Test Test</a>

            <ul class="dropdown">
                <li><a href="/users/logout">Log out</a>
                </li>
            </ul>
        </li>
    </ul>
</nav>

CSS

/* 1.0 Resets
************************************/
 * {
    margin: 0;
    padding: 0;
}
ul {
    font-size: 0;
}
html, body {
    height: 100%;
    max-height: 100%;
}
body {
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    background-color: white;
}
li {
    list-style: none;
}
a {
    text-decoration: none;
}
/* 2.0 Layout
************************************/
 .header {
    background-color: #9B59B6;
    height: 50px;
}
.logo {
    height: 50px;
    margin-bottom: 30px;
}
.navigation {
    position: absolute;
    display:inline-block;
    z-index: 1000;
        width: 100%;
}
.navigation li:not(:last-child){
   float:left
}
.navigation li a {
    display: block;
    height: 50px;
    line-height: 50px;
    color: #fff;
    font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
    padding-left: 30px;
    padding-right: 30px;
    opacity: 0.7;
}
.navigation li a:hover, .navigation li.active a {
    opacity: 1;
}
.navigation li span {
    display: inline-block;
    background: url(http://i.imgur.com/R6Fjt4e.png) no-repeat left center;
    width: 16px;
    height: 16px;
    /*overflow:hidden;*/
    margin-right: 16px;
}
.container {
    padding-top: 14px;
}
.dialog {
    display: none;
}
/* 4.0 Navigation Styles
************************************/
 #dashboard span {
    background-position: -64px -0px;
}
#vacancies span {
    background-position: -160px 0;
}
#candidates span {
    background-position: -32px -0;
}
#company span {
    background-position: -288px 0;
}
#account span {
    background-position: -128px 0;
}

.right {
    float: right;
}
nav ul ul {
    display: none;
}
nav ul li:hover > ul {
    display: block;
    position: absolute;
    background-color: #9B59B6;
}
.dropdown li {
    display: block;
}
\$\endgroup\$
  • 1
    \$\begingroup\$ I don’t know if it’s just a placeholder, but the alt value "logo" is probably not appropriate. \$\endgroup\$ – unor Jun 17 '14 at 11:38
  • \$\begingroup\$ At first glance, semantically speaking <nav> isn't a header, in this context you could assign role=banner but may want to change that to a <header> tag. What browser support are you after? \$\endgroup\$ – darcher Jul 5 '14 at 12:04
2
\$\begingroup\$

First, I'm not sold on your use of <nav> as a header. You can assign an aria role=banner to it or replace it with the tag intended to be a <header>. I understand you're using your logo as a navigation link (e.g. home), however, you still have to make the browser understand what your header is.

Working off your code:

judging from the css used in your code I'm assuming IE8 support isn't required

If you're going to use a <span> for an icon (I'm assuming your trying to avoid using a content image), I'd recommend using an svg instead, see Fiddle (this uses natural elements to specify header/nav). There are plenty of SVG Fallbacks for browsers that don't support SVG.

If you want to forgo using a "content" image I'd use pseudo elements :before or :after to place the icon, see Fiddle. (this uses aria roles to specify header/nav)

How I'd approach it:

Your setup is, for the most part, solid. However, I'd go about it a little differently. Check this Fiddle. (disclaimer: I wrote this up while still intoxicated from the fourth, so apologize ahead of time as it could probably be written better)

HTML

<header class="header" role="banner">
  <a href="/">
    <img src="logo.png">
    <h1 class="visuallyhidden">Title</h1>
  </a>
  <nav class="navigation" role="navigation">
    <ul>
      <li><a href="#">A</a></li>
      <li><a href="#">B</a></li>
      <li>
         <a href="#">Test</a>
         <ul>
           <li><a href="#">Logout</a></li>
         </ul>
      </li>
    </ul>
  </nav>
</header>

CSS

* {
    margin:0;
    padding:0}
*,
*:before,
*:after{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box }

html,
body{
    height: 100%;
    max-height: 100%}
html{
    -ms-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    font-family: sans-serif;
    text-shadow: 1px 1px 1px rgba(0,0,0,.004)}
body{
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size:13px;
    font-size:.8125rem;
    background-color:white}
a{text-decoration:none}
.visuallyhidden{
  border:0;
  clip:rect(0,0,0,0);clip:rect(0000);
  height:1px;height:.0625rem;
  margin:-1px;margin:-.0625rem;
  overflow:hidden;
  padding:0;
  position:absolute;
  width:1px;width:.0625rem}
.header{
    background-color:#9B59B6;
    padding:0 1.5625rem}
.navigation{
    display:inline-block;
    padding-left:25px;
    width:calc(100% - 80px)}
.navbar{list-style:none}
.navbar li{
    display:inline-block;
    float:left;
    position:relative}
.navbar li a:before{
    content:'';
    width:16px; width:1rem;
    height:16px; height:1rem;
    position:absolute;
    top:50%;
    left:10px;
    margin-top:-8px;
    background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0ZWQgYnkgSWNvTW9vbi5pbyAtLT4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij4KPGc+CjwvZz4KCTxwYXRoIGQ9Ik05LjczMiAxMC45OGMtMC4zNDUtMC4wNTUtMC4zNTMtMS4wMDUtMC4zNTMtMS4wMDVzMS4wMTUtMS4wMDUgMS4yMzYtMi4zNTZjMC41OTUgMCAwLjk2My0xLjQzNyAwLjM2OC0xLjk0MiAwLjAyNS0wLjUzMiAwLjc2NS00LjE3Ny0yLjk4Mi00LjE3N3MtMy4wMDcgMy42NDUtMi45ODIgNC4xNzdjLTAuNTk1IDAuNTA1LTAuMjI4IDEuOTQyIDAuMzY4IDEuOTQyIDAuMjIxIDEuMzUxIDEuMjM2IDIuMzU2IDEuMjM2IDIuMzU2cy0wLjAwOCAwLjk1LTAuMzUzIDEuMDA1Yy0xLjExMyAwLjE3Ny01LjI2OCAyLjAxMC01LjI2OCA0LjAyMGgxNGMwLTIuMDEwLTQuMTU1LTMuODQzLTUuMjY4LTQuMDIweiIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPgo8L3N2Zz4K) no-repeat}
.navbar li:last-of-type{float:right}
.navbar li:last-of-type .dropdown:before{background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0ZWQgYnkgSWNvTW9vbi5pbyAtLT4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij4KPGc+CjwvZz4KCTxwYXRoIGQ9Ik0xNC41OSA5LjUzNWMtMC44MzktMS40NTQtMC4zMzUtMy4zMTcgMS4xMjctNC4xNjRsLTEuNTcyLTIuNzIzYy0wLjQ0OSAwLjI2My0wLjk3MiAwLjQxNC0xLjUyOSAwLjQxNC0xLjY4IDAtMy4wNDItMS4zNzEtMy4wNDItMy4wNjJoLTMuMTQ1YzAuMDA0IDAuNTIyLTAuMTI2IDEuMDUxLTAuNDA2IDEuNTM1LTAuODM5IDEuNDU0LTIuNzA2IDEuOTQ4LTQuMTcgMS4xMDZsLTEuNTcyIDIuNzIzYzAuNDUzIDAuMjU3IDAuODQ1IDAuNjM0IDEuMTIzIDEuMTE3IDAuODM4IDEuNDUyIDAuMzM2IDMuMzExLTEuMTIgNC4xNmwxLjU3MiAyLjcyM2MwLjQ0OC0wLjI2MSAwLjk2Ny0wLjQxIDEuNTIyLTAuNDEgMS42NzUgMCAzLjAzMyAxLjM2MiAzLjA0MiAzLjA0NmgzLjE0NWMtMC4wMDEtMC41MTcgMC4xMjktMS4wNDAgMC40MDYtMS41MTkgMC44MzgtMS40NTIgMi43LTEuOTQ3IDQuMTYzLTEuMTFsMS41NzItMi43MjNjLTAuNDUtMC4yNTctMC44MzktMC42MzMtMS4xMTYtMS4xMTN6TTggMTEuMjRjLTEuNzg5IDAtMy4yNC0xLjQ1LTMuMjQtMy4yNHMxLjQ1LTMuMjQgMy4yNC0zLjI0YzEuNzg5IDAgMy4yNCAxLjQ1IDMuMjQgMy4yNHMtMS40NSAzLjI0LTMuMjQgMy4yNHoiIGZpbGw9IiNmZmZmZmYiPjwvcGF0aD4KPC9zdmc+Cg==) no-repeat}
.navbar li a{
    display:block;
    line-height:50px;
    padding-left:37px;
    padding-right:25px;
    vertical-align: middle;
    color:white}
.navbar:after,
.navbar:before{
  content:'';
  display:table}
.navbar:after {clear:both}

.submenu{display:none}
.navbar li:last-of-type:hover>.submenu{
    display:block;
    position:absolute;
    left:0;
    background-color:#9B59B6}
.submenu li{display:block}
.submenu li a:before{background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0ZWQgYnkgSWNvTW9vbi5pbyAtLT4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij4KPGc+CjwvZz4KCTxwYXRoIGQ9Ik0xMiAxMHYtMmgtNXYtMmg1di0ybDMgM3pNMTEgOXY0aC01djNsLTYtM3YtMTNoMTF2NWgtMXYtNGgtOGw0IDJ2OWg0di0zeiIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPgo8L3N2Zz4K) no-repeat}

edit/note This won't work well for mobile, so I suggest you work media queries into the nav and use jQuery or equivalent to handle the drop-down functionality.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.