Tag: navigation

Fighting the Space Between Inline Block Elements

Formatting links as a series of inline-block elements is an easy way to center align stuff e.g. a navigation menu. There’s one annoying issue and that’s the blank spaces that appear between elements. This article has several code examples that will remove the blank spaces from inline-block elements…
csshead 0 Comments

Flared Borders with CSS

Ever wondered how to create an element that flares into another using only CSS? Here’s a quick tutorial using existing CSS attributes, in combination with CSS generated content, to produce the effect using no images at all, and no additional markup. And it falls back gracefully for older browsers….
csshead 0 Comments

Create a vertically centred horizontal navigation

Centring block level elements is easy, just define a width and set margin:0 auto;, but what if you don’t know that fixed width? You could use text-align:center;, but that won’t work on 100%-width block-level elements either… that’ll only work on text-level elements.
csshead 0 Comments

CSS3 Dropdown Menu

A Mac-like multi-level dropdown menu that I’ve created using border-radius, box-shadow, and text-shadow. It renders perfect on Firefox, Safari and Chrome. The dropdown also works on non-CSS3 compitable browsers such as IE7+, but the rounded corners and shadow will not be rendered…
csshead 0 Comments

How to Make a CSS Sprite Powered Menu

Today’s tutorial will bring you through the process of building a slick menu using a single CSS sprite image. It’s a simple, but elegant solution for most websites. This was one of the design strategies that first helped me to start using smarter markup. For those of you just getting introduced to this technique today, […]
csshead 0 Comments

CSS Navigation: No JavaScript or Image Required

I have coded this pager only CSS based navigation/pagination bar. No javascript is required. There are tooltips on hover and previous/next buttons to make navigation easier…
csshead 0 Comments

CSS Absolute Positioning: Create a Fancy Link Block

Absolute position is a feature of the CSS2 specification that is supported by all of web browsers. If you posit an element an image, a table, or whatever absolutely on your page, it will appear at the exact pixel you specify. In this tutorial, we will use some tricks to create a fancy link block […]
csshead 0 Comments

How to Create Simple and Effective Sub Navs with Definition Lists

When we need simple and effective on-page navigation, to either jump to content on the page or flip to another view, we use the dl element. Its sub elements, the dt and dd, make it very easy for us to create inline links with a clear label. Here we’re going to share with you a […]
csshead 0 Comments

How to Create Nice Scalable CSS Based Breadcrumbs |

Breadcrumbs are a useful way of ensuring that your visitors know exactly where they are. In this tutorial you will learn how to create scalable CSS Based Breadcrumbs using only one simple graphic. The rest is basic CSS styling with an unordered list as HTML code…
csshead 0 Comments

Active State in Navigation – CSS Navigation Tutorial

I am sure you have been on a website where the navigation has an “active” state, basically showing you which page you are currently on. It’s a great way to let visitors know exactly where they are on a site. This tutorial shows you how to use a CSS sprite to create a navigation menu […]
csshead 0 Comments
Next Page »