Member Sign In
Not a member?

A Wired.com user account lets you create, edit and comment on Webmonkey articles. You will also be able to contribute to the Wired How-To Wiki and comment on news stories at Wired.com.


It's fast and free.

Sign in with OpenID
Sign In
Webmonkey is a property of Wired Digital.
processing...
Join Webmonkey
Please send me occasional e-mail updates about new features and special offers from Wired/Webmonkey.
Yes No
Please send occasional e-mail offers from Wired/Webmonkey affiliated web sites and publications, and carefully selected companies.
Yes No
I understand and agree that registration on or use of this site constitutes agreement to Webmonkey's User Agreement and Privacy Policy.
Webmonkey is a property of Wired Digital.
processing...

Retrieve Sign In

Please enter your e-mail address or username below. Your username and password will be sent to the e-mail address you provided us.

or
Webmonkey is a property of Wired Digital.
processing...

Welcome to Webmonkey

A private profile page has been created for you.
As a member of Webmonkey, you can now:
  • edit articles
  • add to the code library
  • design and write a tutorial
  • comment on any Webmonkey article
Close
Webmonkey is a property of Wired Digital.

Sign In Information Sent

An e-mail has been sent to the e-mail address registered in this account.
If you cannot find it in your in-box, please check your bulk or junk folders.
Sign In
Webmonkey is a property of Wired Digital.

Use CSS rules with AllWebMenus DHTML-JavaScript Menu Maker

/skill level/
/viewed/
0 Times

Contents

Introduction

Using CSS Rules with AllWebMenus.

What you'll need

AllWebMenus

Steps

Scripts generated by the AllWebMenus DHTML Menu Maker application create HTML elements (and thus and
elements) in order to display the menu in your website.

Generic CSS rules that apply to all elements of a certain type (such as table) will also affect the elements created by the AllWebMenus' scripts. This can cause strange appearance of a menu.

Here is an example:

The original menu looks like this:

[1]

CSS rules like the following:

td {

text-align: center;

margin: 0.5em;

font-size: 100%;

color: black;

padding-left: 10px;

padding-right: 10px;

padding-top: 5px;

padding-bottom: 5px

}

and

tr {

text-align: left; 

margin: auto;

font-size: 100%;

color: black;

padding-left: 10px;

padding-right: 10px; 

padding-top: 5px;

padding-bottom: 5px

}

will cause a menu to look like this:

[2]

menu broken by css in css example

Instead of the above rules, you can use classes and add these classes to the elements of the page you want the CSS rules to be applied:

td.TDdefinition { 

text-align: center;

margin: 0.5em;

font-size: 100%;

color: black; 

padding-left: 10px;

padding-right: 10px;

padding-top: 5px;

padding-bottom: 5px 

}

and

tr.TRdefinition {

text-align: left; 

margin: auto;

font-size: 100%;

color: black; 

padding-left: 10px;

padding-right: 10px; 

padding-top: 5px;

padding-bottom: 5px

}

and in the source code of your page you can use the following

���


in the tables you want these CSS rules to be applied.

Suggested readings

http://www.likno.com/blog/using-css-rules-with-allwebmenus/252/
Retrieved from "http://www.webmonkey.com/tutorial/Use_CSS_rules_with_AllWebMenus_DHTML-JavaScript_Menu_Maker"
Edit this article
Reddit Digg
 

/related_articles/

See more related articles

Subscribe now

Special Offer For Webmonkey Users

WIRED magazine:
The first word on how technology is changing our world.

Subscribe for just $10 a year