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
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.