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

Was This Article Useful?

Let Others Know
1 Star2 Stars3 Stars4 Stars5 Stars6 Stars7 Stars8 Stars9 Stars10 Stars (No Ratings Yet)
Loading ... Loading ...
 

Share this post

 

Leave a Reply

4 Responses

  • David Fiske

    Love the retro flip chart!

    July 31, 2008 at 1:51 pm
  • Matt

    David

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

    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*

    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.

    September 30, 2008 at 4:47 pm