CSSNEWBIE’s Super Simple Horizontal Navigation Bar

Original post at: http://www.cssnewbie.com/super-simple-horizontal-navigation-bar/

Tutorial by Rob Glazebrook on September 4, 2009

I occurs to me that, while I’ve written tutorials on tabbed navigation bars, dropdown navigation bars, and even horizontal dropdown navigation bars, I’ve never stopped to explain how to build a basic, no-frills horizontal navigation bar. And in more cases than not, a simple navigation bar is exactly what the doctor ordered.

So today’s tutorial is all about going back to basics. This is what you need to know to build a simple navigation bar like the one pictured above (and you can see a working example here).

The List

As with most modern navigation bars, ours will be based on the unordered list (<ul>) tag. This makes semantic sense, a navigation bar is really nothing but a list of links leading into your site. The traditional horizontal orientation is simply a convenient means to get all of our most important list items “above the fold,” so the user can see them without having to scroll down the page.

So here is our sample HTML:

<ul id="nav">
 <li><a href="#">About Us</a></li>
 <li><a href="#">Our Products</a></li>
 <li><a href="#">FAQs</a></li>
 <li><a href="#">Contact</a></li>
 <li><a href="#">Login</a></li>
</ul>

That’s really all it takes! You’ll notice I did use one ID, so we could tell our navigation bar apart from all the other unordered lists on the page. But if this were tucked into a div with its own ID (like a “banner” or “header” div), the ID probably wouldn’t be necessary. And yes, I could add even more IDs and classes if I wanted to make this fancier, but we’re all about simplicity today.

Making It Horizontal

By default, our list is vertical. So let’s make it horizontal:

#nav {
    width: 100%;
    float: left;
    margin: 0 0 3em 0;
    padding: 0;
    list-style: none; }
#nav li {
    float: left; }

Here we’re floating both our list and our list items left. Floating the list items left is what pulls them into a nice horizontal row for us, stacking the items from left to right. However, because of how floats behave, our containing list will collapse to a height of zero unless it is also floated left.

CSS Frameworks and the Resets

For quick development of standard-compliant and accessible web projects, most developers will use a reset css somewhere in their codes. In fact, all developers should have it before they want to see the same results across different browsers. I always use google’s blueprint reset css to get my projects started. How about you? Many frameworks have different resets in their code arsenals. So let’s take a look at each one of them. (For thos who never use this awesome tool you better read so here)

Google’s Blueprint. (Download page)

/* reset.css */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
body {line-height:1.5;}
table {border-collapse:separate;border-spacing:0;}
caption, th, td {text-align:left;font-weight:normal;}
table, td, th {vertical-align:middle;}
blockquote:before, blockquote:after, q:before, q:after {content:"";}
blockquote, q {quotes:"" "";}
a img {border:none;}

More resets coming up!

CSS 3 Around the Corner?

Then it’s time to compile resources for quick CSS 3 development. You can always google it and get what you want in less than a minute. But I prefer searching in my own blog, so here they are:

Code previews:

• http://www.css3.info/preview/

Modules:

• Status: http://www.css3.info/modules/

Tools:

• CSS3.info’s selector test. This tool will test your browser’s compatibility with CSS3.

More coming up!

How to center fixed-positioned element

This trick I’ve just discovered, is for some of you who have done fixed positioning but couldn’t make it work with the margin:0 auto; fix. It couldn’t, and will never work. So here’s how:

#fixedPositionedElement {
position:fixed;
left:50%;
width:250px;
margin:0 -125px;
}

So as you can see, the left margin is set to half of the element’s width. With this you will have a fixed-positioned and centered element.

I used this once for a notification pop-up that emulates the stylish WordPress’ Lightbox plugin.

CSS cheat sheet round-up

CSS Goodies

The web is flooded with CSS cheat sheets that can greatly reduce your site development time. But when you don’t have the entire wall of your room to display them, I’ve sorted them according to their uses for your convenience.

Basic Cheat Sheets

• Added Byte’s cheat sheet (recommended, the one i find most useful)
• Beginner’s cheat sheet
• Lesliefranke’s CSS cheat sheet
• About.com’s CSS layout sheet
• Tampabay basic CSS cheat sheet

Special Cheat Sheets

• Mac OS X dashboard CSS cheat sheet widget
• Inheritance, Cascade, Specificity cheat sheet
• Shorthand cheat sheet

The list however is not exhaustive. As I spend more time with CSS, I will add more categories and links.

Fix PNG transparency in IE6

Here’s the official link: http://www.webmonkey.com/codelibrary/Use_Transparent_PNGs_in_IE6

The problem

PNG images or icons appear with unwanted black shadows in IE6 browsers.

The fix

First of all, put the regular transparent PNG image in your HTML:

<div id="png-holder"><img src="/images/transparent.png" alt="" />

That will work perfectly in Firefox, Safari, and IE7. To make it work in IE6, add the following to your IE6 stylesheet:

#png-holder {
width: 300px;
height: 150px;
text-indent: -9999px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='/images/transparent.png', sizingMethod='crop');
}

That filter rule is a proprietary Microsoft code that will force IE6 to render the alpha transparency in the PNG – but it does it by drawing another box on top of everything on the page and sticking the png in there, which leads to some odd behavior. Here’s the breakdown:

• You must use the filter on a containing element for the PNG, not the image itself. For this reason, it’s easiest to wrap the image in a DIV or P tag.
• You must declare a width and height for the container matching the width and height of the image.
• You have to hide the original image – hence the text-indent: -9999px; rule. You can do the same thing to a transparent PNG that you’ve set as a background on a div by using background: none; instead.
• You must use an absolute path to the image. As far as I can tell, this is just a restriction of the filter.
• You can set sizingMethod to crop, which means if the image is larger than the dimensions of your container, the overflow will be hidden. Alternately, you can set it to scale, which will stretch the image to fit.
• If you absolutely position the PNG over other content on your page, the user will not be able to click on any links under the image. That’s because the filter is drawing a new box on top of everything, completely overriding your z-index rules.

{Gecko engine only} CSS3 imageless rounded corners

Hey guys check this out: http://virtuelvis.com/archives/2004/11/imageless-rounded-corners

The official syntax is as follows:

border-radius: <length> <length>;

Here is an example:

This is an example.
The code i’m using is -moz-border-radius:10px;

Take note that this module is not supported by any browser, which means your borders will have squared borders even if you have declared the code above. Here’s what they say:

At the time of writing, the border-radius properties are not supported in any browser, since the CSS3 border module is still in “Working Draft” status.

However, browsers based on the Gecko rendering engine (Firefox, Mozilla) has experimental support for the border-radius property, and use the vendor-specific -moz- prefix for the properties, making it -moz-border-radius

Good news for Firefox 3 users!

Here’s the working draft at W3C

CSS Blog Review – www.456bereastreet.com

For those of you budding CSS artists, I really think you should check out www.456bereastreet.com. This site is created and maintained by a Swedish web professional named Roger Johanssen. I put the bookmark of this site right below the w3schools, the official WWW consortium site.

This is what he says about the blog:

This site is a place for me to post articles, tutorials, and comments on subjects that are interesting and useful to me and hopefully to other web professionals, both developers and designers. Most articles on this site are related to web standards, accessibility, or usability in one way or another, with the occasional article on other subjects.

Indeed, he delivers the content well. The site contains much of the needed tutorials and discussions about web standards, accessibility or usability, with over 300 posts dedicated to CSS writing. I love Johanssen’s minimalistic approach for design and writing the code. There are few bells and whistles, and lots of the bread and butter needed by every CSS web professional.

Some of his posts that are really helpful to me:

• Turning a list into a navigation bar
• Useful tips for writing efficient CSS
• Efficient CSS with shorthand properties
• CSS Showcase – a gallery of CSS menus
• Writing cross-browser CSS
• What is your level of CSS knowledge?

If you have other great CSS blogs, please share them with me!

Centering an element with CSS

Centering an element with CSS is not as hard as you might think. Basically you need to set the horizontal margin of the element to auto and the vertical margin to whatever it is that you want.

Here’s the code:

.DIVelement {margin:0 auto;}

Take note that I’m using the shorthand property for the margin property. You might want to check out Roger Johansson’s Efficient CSS with shorthand propertiesto learn about this technique.

You can apply this trick to everything from images, id elements to paragraphs. Some web designers who are addicted to centered layout pages uses this to position the main content area.

More on CSS centering :

• CSS Centering 101

My CSS writing style

When it comes to writing CSS I think everybody has their own unique style of writing the code.

Mine will look like this: (this is taken from a fully-working website)

/* reset.css */
* {margin:0;padding:0;}
body {font:11px arial;line-height:1.5em;color:#333;}
a {color:inherit;text-decoration:none;}
a:hover {color:inherit;text-decoration:underline;}
a img {border:none;}
blockquote {font:italic 12px arial;color:#777;width:75%;margin:20px auto;}

As you can see, this is the modified YUI CSS reset. Gw sengaja menaruh selector, property dan value-nya di dalam satu baris spy lebih gampang dibaca. Dengan gini selectornya bisa quickly identified.

I’m using notepad++ for the editor. I think those programming students know this editor really well. But if you’re interested, just google it to download.