John Cox

Blogs · @wyome · Now · Shelf

Tagged tutorial · everything

Interesting

Turning a list into a navigation bar | 456 Berea Street

This tutorial explains how to build a horizontal navigation bar using semantic HTML (an unordered list) and CSS, demonstrating the progression from unstyled markup through incremental styling steps. The author covers key techniques including floating elements to create inline tabs, adding padding and borders for visual separation, and using body element IDs to highlight the current page's link. While the author notes the technique is no longer used on their site, the tutorial covers practical CSS fundamentals like managing floated elements, pseudo-classes for styling link states, and achieving browser compatibility.

Permalink