CSS font stacks & developer FAQs with Web standards

WestNIC provides reliable web hosting services

Fastwebhost offers cheap web hosting & reseller hosting services

Site navigation below

This FAQ is part of the Code Style Help and FAQ section. Join our premium content service for full access all FAQ answers.

What if you were One Percent Better? Ebooks for Web developers on iPad, Kindle, Nook and Sony Reader

Expanding the menus

Q: How do I add more menus?

A: The width of the menus in the published example is set for 5 items. You can add more menus by adjusting the width of the menus and links as appropriate. The rule below specifies the width, allowing for the horizontal padding, margin and border used in the example. Calculate a suitable value based on your styling and add #Menu6, #Link6, etc to the grouped selector.

#Menu1, #Menu2, #Menu3, #Menu4, #Menu5,
#Link1, #Link2, #Link3, #Link4, #Link5{
  float:            left;
  width:            17.9%;
...
}
          

This value is also set in the base style sheet for older browsers and should be updated in both.

Q: How can I add another level to my dynamic menus?

A: It would technically be possible to add a further level of links, but it would technically be pretty tricky too! The main problem would be to devise a way of positioning the secondary menus next to a the first while keeping a flexible, proportional layout.

This is also a usability question though; the more choices you give the user, the more difficult they may find it to decide which option they should take. It might be better to reduce the choices and layer the options through a set of section index pages.

Menu style and decoration

Q: How can I make the links mixed case?

A: To change the menu text to regular mixed case, look for the rule text-transform: lowercase in the main imported style sheet and remove that line.

Q: How can I add images to your dynamic menus?

A: Perhaps one's first thought should be, "How would extra images improve the usability of this menu?" Additional images will make pages slower to download and the menus slower to respond. Most users will come for the content of your site, not your menus, however attractive they might be.

… full answer hidden, click for full answers

Premium members click below for full answer
How can I add images to your dynamic menus?

Different layouts

Q: How can I centre the menus on the page?

A: The stylesheets for the menus are set up to adjust proportionally to the size of the browser window, so you should find that they expand to fill the width of the page with whatever resolution is set. If you want the menu bar to be indented on either side to give it a centred effect, reduce the overall width of the menu bar and increase the left and right margins. You may need to adjust the width of the individual menu elements too.

The total width of all menu elements plus their left and right padding, margins and borders must be less than 100% or you will get horizontal scrolling.

Q: Can I put the menus in a table layout?

A: Your question misses a subtle aspect of this menu set and a great strength of CSS positioning. The menus could be placed wherever you like on the screen and you don't have to use tables to do so. The Javascript functions also operate independently of the CSS positioning, so you don't have to change the script to achieve this either.

… full answer hidden, click for full answers

Premium members click below for full answer
Can I put the menus in a table layout?

Q: How can I create vertical menus?

A: The DOM1 visibility menus could appear wherever you want if you give them absolute position properties rather than contain them in the #MenuBar and #LinkBar divisions. For instance, a grouped selector could position the top left corners of all menus in the same place ...

… full answer hidden, click for full answers

Premium members click below for full answer
How can I create vertical menus?

Q: How can I use drop down menus in a frame based site?

A: The frame border is the absolute limit of the current document and none of the content of one document can overlap into another. To ensure that all the menus are displayed without cropping, your menu frame document would have to be large enough to enclose the longest menu list.

… full answer hidden, click for full answers

Premium members click below for full answer
How can I use drop down menus in a frame based site?

Home · Web fonts · Font stacks · FAQs · Java · CSS · Javascript · HTML · Site manager