Balloon info on link hover?

Hey all,

The nav menu on this website illustrates a topic I was talking about before - whats the easiest most direct way to have multiple colours? Is it a diff class for each <LI>

http://www.digroup.ca/

Any <a href> balloon info? Not sure how to do it yet. Nothing over the top just a larger TITLE or ALT tag, 2 lines with a coloured background?

Thanks,
Leo

 

This site just gives each <li> element on the top a different id. You can see this by looking at the source. I would do it the exact same way if I wanted to do a site like this.

 

Ok, thanks foo - wouldn't it be a different class instead of a different id?

 

You could do it class or id. Id would make it more accesible if you wanted to modify the structure with javascript.

 

Using a classes or IDs would both work. However, technically IDs are used for identifying unique elements (only used once on any given page), where classes are to intended to give styles to multiple elements or groups of elements, and can be used more than once on any given page.

Based on some of your other questions in this forum, it sounds like you may be modifying your CSS styles with Javascript. This can best when done on elements that are using an ID because it is a unique element. Thus you won't be changing the CSS on multiple elements at the same time.

The syntax is very similar for both.

.myStyle{ /*This is a class*/
width:100px;
}

#myOtherStyle{/*This is an ID*/
width:100px;
}

Code (markup):

Summary:

If you are applying specific styles to an element that only appears once on a page, and will ever only appear once on a page, it is most proper to use IDs. When styling elements that appear at multiple places on the same page, use classes. Following this can save you from headaches in the future.

 

Ok Foo thanks buddy!