Results 1 to 1 of 1
Thread: Menubar using li tags
2006-01-29, 17:50 #1
- Join Date
- Feb 2002
- A Magic Forest in Deepest, Darkest Kent
- Thanked 1 Time in 1 Post
Menubar using li tags
A question that always seems to come up in my classes and around my office at work is the question about menu bars in html pages.
For every opinion there is a new design or idea for a menubar. I am the advocate for the css type menubar as it is driven purely by css
The concept behind this menubar is the use of unnumbered lists or <ul> and[*] tags. One thing that makes these so useful is that they
can easily viewed in the html code and the majority of people understand the concept.
With careful consideration we can adapt the look of a unnumbered list using the block and box attributes to a list tag and get away from
the dropdown list effect it provides. In the attached example I have used the float attribute to allow the items to actually move next to the
previous item in the list and provided each list item to have a background, a border and centralised the text in that box.
Careful consideration should be given to the width of the individual list boxes as have been given a specific width and by adding items to
the list for the menu you will have to adjust the width attribute to the box. I have provided a container called content which has a width of
763 pixels. Each menu item has a width of 151 px...simple mathematics will tell you that they have a total width of 755 pixels so you have
to ask where the other 8 have gone and the simple answer is because they each have a 1px border.
I have attached a sample of the index page and its external cascading style sheet for you to look at and hope it will be a useful resource
for the futureJerry