Published in CSS on Wednesday, May 5th, 2004
How to integrate skip links, home links, and company logos into one list and keep it accessible and positioned with CSS.
Skip links are really catching on for reasons of accessibility. You know the ones, they sit there in the background, hidden by CSS, offering non-css enabled browsers and other devices the opportunity to 'Skip to Navigation', or 'Skip to Content'.
Most people place them at the top of the document, and hide them with CSS, doing something similar to the following:
.skip {
height:0;
width:0
left:-19000px;
overflow:hidden;
position:absolute;
}
In addition to the skip links, people often include a 'Home' link at the tops of their pages, often somehow including the site/company logo. Here's a little something that has been implemented on this site that adds a bit to the mix...
Note: if you're unsure of what I am talking about, view this site without stylesheets, or, have a look at the source code.
I like to offer the users the chance to skip to both the content and the navigation.
Now, this may seem weird at first, but on some websites there can be a reasonable amount of, *ahem*, fluff, that occurs before you get to the main content or navigation. Text used for printing, or some type of promotional blurb come to mind as examples.
Back to the matter at hand. To recap, including the link to 'home', you've got yourself a nice list of three links at the top of your document:
<ul> <li><a href="#content" title="Skip to Content"> Skip to Content</a></li> <li><a href="#navigation" title="Skip to Navigation"> Skip to Navigation</a></li> <li><a id="page-top" href="/" title="Home"> Home</a></li> </ul>
Now that you have your list of links, it's time to put them where they belong.
You have your '.skip' class from above that will hide the skip links just fine, but what about the logo/home link?
CSS to the rescue, of course.
By setting up a rule for the logo and using absolute positioning, you can put the logo right where you want it, and have that nice clean list of links in your markup. Here's this site's CSS for the logo, and the necessary additions to the HTML provided above.
#logo {
background:url(/path-to-image.png)
no-repeat;
position:absolute;
right:7px;
top:29px
}
<ul>
<li class="skip">...
<li class="skip">...
<li id="logo"><a
id="page-top" href="/" title="Home"><span
class="access">Home</span></a>...
</ul>
You'll notice that a <span> with the '.access' class was wrapped around the text inside the home link, because in this case the text is not needed, the background image will do. Doing this positions the text off of the page, similar to the <li> items.
In the case of this site, because the bounding div of the site is set to 'position:relative', the #logo is absolutely positioned from that bounding wrap. Specifically, the logo is positioned 7px from the right and 29px from the top of that bounding div.
The result of this madness is a nice piece of clean and lean code. The downside is simply a bit of extra markup: rather then giving the whole <ul> the class ".access" you must specify each <li> item individually.
Feel free to check out this method in use right here, and let me know if you find any problems!
Sitepoint's web devlopment books have helped me out on many occasions both for finding a quick solution to a problem but also to level out my knowlegde in weaker areas (JavaScript, I'm looking at you!). I am recommending the following titles from my bookshelf:
I started freelancing by diving in head first and getting on with it. Many years and a lot of experience later I was still able to take away some gems from this book, and there are plenty I wish I had thought of beforehand. If you are new to freelancing and have a lot of questions (or maybe don't know what questions to ask!) do yourself a favor and at least check out the sample chapters.
The author line-up for this book says it all. 7 excellent developers show you how to get your JavaScript coding up to speed with 7 chapters of great theory, code and examples. Metaprogramming with JavaScript (chapter 5 from Dan Webb) really helped me iron out some things I was missing about JavaScript. That said each chapter really helped me to develop my JavaScript skills beyond simple Ajax calls and html insertion with libs like JQuery.
Like the other books listed here, this provides a great reference for the PHP developer looking to have the right answers from the right people at their fingertips. I tend to pull this off the shelf when I need to delve into new territory and usually find a workable solution to keep development moving. This only needs to happen once and you recoup the price of the book in time saved from having to develop the solution or find the right pattern for getting the job done..
Comments and Feedback
Great idea!!!!! I love it.
Note: You are missing the semi-colon after the WIDTH:0 in your .skip example.
Good catch, thanks!