Understanding a CSS MENU CODE

[adolph0034]

Hello my friends. I came across a nice css menu.

This is the link: http://www.dynamicdrive.com/style/cs...ntal_menu/P20/

My issue is I am not quite COMPREHENDING HOW THE CODE FUNCTIONS.

Here is the code, below are my comments:

style type="text/css">
  
/*Credits: By Santosh Setty (http://webdesigninfo.wordpress.com) */
/*Posted to: Dynamic Drive CSS Library (http://www.dynamicdrive.com/style/) */

.glossymenu{ [COLOR="Red"]I UNDERSTAND THIS IS DEFINING GLOSSYMENU CLASS [/COLOR]
	position: relative;
	padding: 0 0 0 34px;
	margin: 0 auto 0 auto;
	background: url(media/menur_bg.gif) repeat-x; /*tab background image path*/
	height: 46px;
	list-style: none;
}

.glossymenu li{
	float:left;
}

.glossymenu li a{ [COLOR="Red"]OKAY I AM LOST DEFINING A LIST OVER WITH A, WHAT IS A???[/COLOR]
	float: left;
	display: block;
	color:#000;
	text-decoration: none;
	font-family: sans-serif;
	font-size: 13px;
	font-weight: bold;
	padding:0 0 0 16px; /*Padding to accomodate left tab image. Do not change*/
	height: 46px;
	line-height: 46px;
	text-align: center;
	cursor: pointer;	
}

.glossymenu li a b ([COLOR="Red"]AGAIN I AM LOST AS TO WHAT IS HAPPENING, IS A THE A HREF LINK AND B THE BOLD BEING USING THE HTML???[/COLOR]{
	float: left;
	display: block;
	padding: 0 24px 0 8px; /*Padding of menu items*/
}

.glossymenu li.current a, .glossymenu li a:hover ([COLOR="Red"]STILL A LITTLE LOST[/COLOR]){
	color: #fff;
	background: url(media/menur_hover_left.gif) no-repeat; /*left tab image path*/
	background-position: left;
}

.glossymenu li.current a b, .glossymenu li a:hover b (LOST){
	color: #fff;
	background: url(media/menur_hover_right.gif) no-repeat right top; /*right tab image path*/
}

</style>
[COLOR="Red"]
ANOTHER QUESTION WHY IS THE LEFT IMAGE TINY AND THE RIGHT SO LARGE..WHY NOT JUST MAKE TWO IDENTICAL BUTTONS LIKE I USUALLY DO WITH A ROLLOVER CSS CODE.

THANKS FOR YOUR TIME IN ADVANCE. ADOLPH [/COLOR]

[DarkLightA]

Tbh I can't really say much without the entire code (including HTML)

a stands for anchor, most commonly found in hyperlinks (a href)

Please post the entire code, with your comments /* like this */

Regards,
"DLA"

[BoldUlysses]

.glossymenu li a{ OKAY I AM LOST DEFINING A LIST OVER WITH A, WHAT IS A???

The a references the anchor tag (<a> in the HTML). The code's author is taking advantage of the fact that you can reference nested HTML tags in CSS; in other words, the code above applies style to all anchor tags that are within a list item that are within .glossymenu. It saves the trouble of having to assign a particular class or ID to each HTML element, and thus keeps the code from getting cluttered.

.glossymenu li a b ([COLOR="Red"]AGAIN I AM LOST AS TO WHAT IS HAPPENING, IS A THE A HREF LINK AND B THE BOLD BEING USING THE HTML???[/COLOR]{
	float: left;
	display: block;
	padding: 0 24px 0 8px; /*Padding of menu items*/
}

The author is giving the list element an additional tag in order to be able to apply additional styling to them. The <b> tag was used probably because it's shorter than <span> and because if you remove the CSS, the list links look nice and bold. Nothing more than that from a semantic standpoint.

.glossymenu li.current a, .glossymenu li a:hover ([COLOR="Red"]STILL A LITTLE LOST[/COLOR]){
	color: #fff;
	background: url(media/menur_hover_left.gif) no-repeat; /*left tab image path*/
	background-position: left;
}

This is the code that defines what happens when either

- The user mouses over a link, or
- The link represents the current page.

In both cases, a tab appears behind the text, whether all the time (in the case of the current page), or momentarily (in the case of the user just mousing over another link).

.glossymenu li.current a b, .glossymenu li a:hover b (LOST){
	color: #fff;
	background: url(media/menur_hover_right.gif) no-repeat right top; /*right tab image path*/
}

Same thing as above, just defining style for another part of the link background.

ANOTHER QUESTION WHY IS THE LEFT IMAGE TINY AND THE RIGHT SO LARGE..WHY NOT JUST MAKE TWO IDENTICAL BUTTONS LIKE I USUALLY DO WITH A ROLLOVER CSS CODE.

The images are sized like that in order to be able to widen the tab if the text is longer. Look at the tabs and you'll notice they're not all the same width, yet the author has the same amount of space around each bit of text. This is done using the three-image technique above. Quite clever, in fact.

Hope that helps!

[adolph0034]

msuffern: yes, your explanation clarified a great deal of ambiguity and things are starting to click. Thank you.