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

VN:F [1.9.22_1171]
Rating: 1.0/10 (1 vote cast)

How to create a horizontal navigation bar with CSS, 1.0 out of 10 based on 1 rating

Comment

4 Responses

  • David Fiske

    Love the retro flip chart!

    VA:F [1.9.22_1171]
    Rating: 1.0/5 (1 vote cast)
    July 31, 2008 at 1:51 pm
  • Matt

    David

    You should see the camera and “tri pod” (chair balanced on a desk) we use!

    VN:F [1.9.22_1171]
    Rating: 1.0/5 (1 vote cast)
    July 31, 2008 at 2:05 pm
  • Dan

    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*

    VA:F [1.9.22_1171]
    Rating: 1.0/5 (1 vote cast)
    September 28, 2008 at 2:23 am
  • John

    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.

    VN:F [1.9.22_1171]
    Rating: 1.0/5 (1 vote cast)
    September 30, 2008 at 4:47 pm