For the first time here at the LB, I've decided to write a blog directly reflecting my role. Sure we all write about industry related topics, as a team, we all basically perform any and all duties we can to build a website. Whether it's designing, coding, coming up with a domain name, or talking search engine strategies, we're all in this together.

Allow me to introduce myself (better late then never, right)… I'm Shauna, our Front End Developer. For the non-nerdy type, that basically means I turn an image into a website, for the somewhat-nerdy, I take the completed design and build the 'front end' of what soon becomes a functional website, and for the super-nerdy, I'm responsible for the HTML/CSS side of things.

As with most things, we all have our 'style', 'habits' or 'the way we think it should be done'. In coding, here at lifeBLUE, you can look at code and immediately know who did it. One of the things that I prefer to do, that can be done probably 20 different ways, is do all navigation in a 'list' format. Again, super nerds let me speak your language, <li>'s. It doesn't matter how simple or complicated a navigation is, whether its live text or images, horizontal or vertical, jpg's or png's, whatever the situation may be, I promise you, you can build it in a list. (subliminal message: feel free to prove me wrong, in which I will then show you how it can actually be done).

Why? Several reasons. The OCD in me says do it this way because aesthetically it's cleaner code (oh, how pretty it looks), but the technical side screams for the search engine aspect as well. Search engines prioritize lists and recognize lists as being a navigational element. So we should take advantage of this and use it properly. It also allows us to associate text with what could essentially be image-based only nav, where you would then lose out on this important feature. It's also easy for editing, all controlled by the CSS, allowing for simple additions, deletions, and complete makeovers.

So here we go, my time to prove I may know what I'm talking about…


So we start simple… live text only:nav1.jpg

CSS:

.nav {width:500px; height:50px; background:#e00260; font-family:Verdana, Arial, Helvetica, sans-serif;}.nav ul {margin:0 0 0 18px; padding:0;}.nav li {margin:0; padding:0; list-style:none; float:left; font-size:18px; line-height:50px; text-transform:uppercase; color:#CCC;}.nav a {color:#FFF; font-weight:bold; text-decoration:none; padding:0 12px;}.nav a:hover {background:#c80055; color:#FFF; font-weight:bold; text-decoration:none; padding:14px 12px;}

HTML:

<div class="nav"><ul><li><a href="#">Home</a>|</li><li><a href="#">About</a>|</li><li><a href="#">Portfolio</a>|</li><li><a href="#">Contact</a></li></ul></div>


Now, image background with live text:nav2.jpg

CSS:

.nav2 {width:500px; height:50px; background:#9101b0; font-family:Verdana, Arial, Helvetica, sans-serif;}.nav2 ul {margin:0; padding:0;}.nav2 li {margin:0; padding:0; list-style:none; float:left; font-size:15px; line-height:50px; text-transform:uppercase; letter-spacing:-.5px;}.nav2 a {color:#FFF; font-weight:bold; text-decoration:none; width:125px; height:50px; background:url(nav2_bg.jpg); display:block; text-align:center;}.nav2 a:hover {color:#FFF; font-weight:bold; text-decoration:none; background:url(nav2_bg_over.jpg);}

HTML:

<div class="nav2"><ul><li><a href="#">Home</a></li><li><a href="#">About</a></li><li><a href="#">Portfolio</a></li><li><a href="#">Contact</a></li></ul></div>


And last, images only:nav3.jpg

CSS:

.nav3 {width:500px; height:50px;}.nav3 ul {margin:0; padding:0;}.nav3 li {margin:0; padding:0; list-style:none; float:left;}.nav3 a {width:125px; height:50px; display:block;}.nav3 span {display:none;}.nav3 li.home a {background:url(nav3_home.jpg);}.nav3 li.home a:hover {background:url(nav3_home_over.jpg);}.nav3 li.about a {background:url(nav3_about.jpg);}.nav3 li.about a:hover {background:url(nav3_about_over.jpg);}.nav3 li.portfolio a {background:url(nav3_portfolio.jpg);}.nav3 li.portfolio a:hover {background:url(nav3_portfolio_over.jpg);}.nav3 li.contact a {background:url(nav3_contact.jpg);}.nav3 li.contact a:hover {background:url(nav3_contact_over.jpg);}

HTML:

<div class="nav3"><ul><li class="home"><a href="#"><span>Home</span></a></li><li class="about"><a href="#"><span>About</span></a></li><li class="portfolio"><a href="#"><span>Portfolio</span></a></li><li class="contact"><a href="#"><span>Contact</span></a></li></ul></div>


What navigation styles do you use?