Last week we grabbed the camera, balanced it on a chair (really) and filmed a couple more short videos for our series. If you haven’t caught them before, the idea is to give you an introduction to a subject.
In this one, Matt talks about how to build a horizontal navigation bar for your website using lists and CSS instead of tables. Take a look and please leave a comment to let us know what you think. There are some links to more information beneath the video too.
[Edit: Its been brought to my attention I am describing the <li> tag as a "line". <li> in fact means 'list item', oh well.... (Matt)]
The HTML described above:
Create a div area for your navigation and type in your content
<div id = "nav">
<ul>
<li>Home</li>
<li>Blog</li>
<li>Store</li>
</ul>
</div>
In your CSS file create the rules for the “nav” div <li> tags
#nav li {
text-decoration: none;
display: inline;
margin: 5pt;
padding: 1pt;
text-align: center;
color; blue;
background-color: green;
}
#nav li a:hover {
background-color: red;
}
More information
- Webcredible’s CSS navigation menu tutorial
- Sitepoint’s beginners guide to HTML & CSS
- htmlcodetutorial.com
Related posts:
- Don’t tell your visitors to “Get Lost” – learn the art of good website navigation We all know how horribly disorientating getting lost can be....
Related posts brought to you by Yet Another Related Posts Plugin.
On July 31st, 2008 at 1:51 pm
Love the retro flip chart!
On July 31st, 2008 at 2:05 pm
David
You should see the camera and “tri pod” (chair balanced on a desk) we use!
On September 28th, 2008 at 2:23 am
You know considering you guys work for a multi-million pound company would have thought could (easily) afford a decent camera, tripod and a digital projector! lol
watched a couple of videos and its hard, if not impossible to read the flip charts…
Don’t make the mistake of over producing though!…
*No clue why i am giving advice to a competitor… lol*
On September 30th, 2008 at 4:47 pm
Hi Dan,
The management would only give us ÂŁ2.50 for a set of batteries for the camera, so I think we did quite well considering!
Seriously, we know the production values are a little lacking. This started as one of those ‘let’s just do it and see how it goes’ projects – I think we’ll try and get a little more professional with the next ones.
Cheers,
John.