Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Jan 2009
    Posts
    46
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Understanding a CSS MENU CODE

    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:

    Code:
    style type="text/css">
      
    /*Credits: By Santosh Setty (http://webdesigninfo.wordpress.com) */
    /*Posted to: Dynamic Drive CSS Library (http://www.dynamicdrive.com/style/) */
    
    .glossymenu{ I UNDERSTAND THIS IS DEFINING GLOSSYMENU CLASS 
    	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{ OKAY I AM LOST DEFINING A LIST OVER WITH A, WHAT IS A???
    	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 (AGAIN I AM LOST AS TO WHAT IS HAPPENING, IS A THE A HREF LINK AND B THE BOLD BEING USING THE HTML???{
    	float: left;
    	display: block;
    	padding: 0 24px 0 8px; /*Padding of menu items*/
    }
    
    .glossymenu li.current a, .glossymenu li a:hover (STILL A LITTLE LOST){
    	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>
    
    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 
    Last edited by adolph0034; 04-13-2009 at 07:34 PM. Reason: FORGOT RED INK

  • #2
    New Coder
    Join Date
    Feb 2009
    Location
    Norway, Europe
    Posts
    94
    Thanks
    12
    Thanked 2 Times in 2 Posts
    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"
    Always Use a DOCTYPE!
    Always Use * {margin: 0; border: none; padding: 0;} in the top of your CSS stylesheet.
    Always Use only CSS for layout; never (X)HTML.
    Always Have fun while coding!

  • #3
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    Code:
    .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.

    Code:
    .glossymenu li a b (AGAIN I AM LOST AS TO WHAT IS HAPPENING, IS A THE A HREF LINK AND B THE BOLD BEING USING THE HTML???{
    	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.

    Code:
    .glossymenu li.current a, .glossymenu li a:hover (STILL A LITTLE LOST){
    	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).

    Code:
    .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!
    Last edited by BoldUlysses; 04-13-2009 at 08:33 PM. Reason: typos
    matt | design | blog

  • Users who have thanked BoldUlysses for this post:

    adolph0034 (04-13-2009)

  • #4
    New Coder
    Join Date
    Jan 2009
    Posts
    46
    Thanks
    2
    Thanked 0 Times in 0 Posts
    msuffern: yes, your explanation clarified a great deal of ambiguity and things are starting to click. Thank you.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •