CSS Explanation Please

[Tawni]

Hello,

I don't mind spending money to learn, I just recently purchased 2 CSS books from "sitepoint". My Problem is when you search the examples and cant find what the authors are talking about in their code.

I need Help Explaining Some CSS code here:

1. What is ".menu" I cant find it anywhere in the forms or html for that matter only class named menu.

then you will see he separates allot of stuff re: menu rather then stick it all in one place.

Code below : I will Comment areas I am confused in , Thanks in Advance

/****************************************************************************/
/* Site menu styles.                                                        */
/****************************************************************************/

#menuBar,
.menu    <---------------------------------.menu
{
	background-color: #000000;
}

#menuBar,
.menu
{
	border: 1px solid #304050; <----why not in same block of code
}

#menuBar
{
	margin-bottom: 1em;
}

#menuBar a,
.menu a
{
	display: block;
	font-size: 9pt;
}

#menuBar table
{
	border-collapse: collapse;
}

#menuBar td
{
	border-right: 1px solid #FFFF00;
	padding: 0px;
	text-align: left;
}

#menuBar a  <------I take it the a is a Link or anchor tag
{
	height: 100%;
	padding: 2px 1em;
}

#menuBar a span.arrow
{
	font-size: 8pt;
}

#menuBar a.hasMenu:hover
{
	text-decoration: none;
}

.menu
{
	position: absolute;
	visibility: hidden;
	z-index: 1;
}

.menu a
{
	padding: 4px 1.5em;
}

#menuBar a:active,  .menu a:active, < ---Completely lost here big block code  Nothing Defined Color wise etc
#menuBar a:hover,   .menu a:hover, < ---Completely lost here big block code
#menuBar a:focus,   .menu a:focus, < ---Completely lost here big block code
#menuBar a.ieFocus, .menu a.ieFocus /* For IE browsers. */
{
	background-color:   #FFFF00;
}

.menu .separator
{
	border-bottom: 1px solid #FF0000;
	margin: 2px .5em;
}

*************************************** Now this author..

This Author Groups things nicely...

#content {
	margin: 0 auto;
	padding: 1em 0;
	width: 500px;
	background-color:#fff;
	font-size: 1.125em;
    line-height: 1.75em;
	text-align: left;
	}
a:link, a {
    border-bottom:1px dotted #960;
	color: #960;
	text-decoration: none;
	}
a:hover {
	border-bottom:1px solid #960;
	}

********************* But he does this DOT THing To 

img.intro {  <----------------------------- See I cant find what it means
		padding: 4px;
		border:3px double #ccc;
		background-color: #fff;		
		margin:0 -7px;
		}

*************************

My problem is I have a site running that uses the first CSS Script, and Iwant to over haul it now I have a better Idea how this stuff works, but I am not advanced enough when they throw trick bags like ".menu" on me and not talk about it in the Book ...LOL

Bottom Line I am trying to learn, and end result figure out How I can On Hover change Background Color and text and the opposite colors when menu is idle

Thanks for Looking

[Tawni]

I have a Feeling the .menu in code #1 , is cross linked to the other style sheet

that's the reason for the .menu but I can't Prove it

Site uses a Menu Style sheet and a Common Style sheet.

Wish I could rid this and start over, but I am worried about the measurements, and so forth by chopping it up. If No Solution I may try build new menu from scratch.

I can Post Both Complete style sheets or email em if someone is willing to explain this to.

Truth Be told I am afraid of getting my feet wet , when something I run across is something not in my studies as a beginner.

I have built a couple menu's from what I have learned from books and this site, but I cant afford for this site to go down, many of my forms are dynamic (asp ) seems a font color change in menu , changes stuff on my forms as well ( anchor tags ) Sortable Forms (links)

[Twey]

.menu is most likely a class in the markup -- look for, e.g., class=".menu".

why not in same block of code

No reason. You can merge them if you want.

I take it the a is a Link or anchor tag

An <a> tag, yes. A name without a . (class) or # (ID) beside it is a tag selector.

Completely lost here big block code Nothing Defined Color wise etc

This isn't a big block of code, it's a list of selectors -- see the commas?

This is all pretty basic stuff -- if your book didn't explain it I don't think very much of it. Try this tutorial instead.

[Tawni]

Thanks , Great Link !!!

, I re-check many of my ASP pages and none have a class named .menu

but menubar and menu yes.

now u see my frustration. Right now The Back ground colors of the menu I have set, and Work Flawless, I just need to change text colors to conform with Color Contrast Checker Found @ http://www.snook.ca/technical/colour...st/colour.html

Right now when page loads menu text is blue on black border.
When Hover menu , back ground turns gold or yellowish.

Text color Stays same always .

I can Change the Static menu colors another words say I use white text on black back ground of the menu, when page loads no mouse playing yet,

but what happens is one of my other pages , the table that gets created on the fly , no longer uses the blue text for links ,( if I changed it will then be white text and users either cant see it and certainly wont know to click it.

so its like I have a <a> anchor tag in the Css linking all clickable links to color Blue, if I try change menu on load text color or I call it static color or in active color......to white then it Jazzes up my other asp pages forms, for only links though ( my other forms have sortable data links).

I am making this sound so difficult, but I have like well over 16 hrs invested in trying to fix it .

I'm afraid to delete the .menu stuff an start over even though using CNTRL F and search all my ASP code ( and html) I cant find any .menu

not even in the java script file.

I simply Don't understand how it is written , more use to stuff like this ...


body {
font-size: 92%;
}
#nav {
margin: 0;
padding: 0;
background: #6F6146;
list-style-type: none;
width: 767px;
float: left; /* Contain floated list items */
}
#nav li {
margin: 0;
padding: 0;
float: left;
}
#nav a {
float: left;
width: 127px;
color: #FFF;
text-decoration: none;
line-height: 2.5;
text-align: center;
border-right: 1px solid #FFF;
................................................
to me that is more standard way of writing esp for us beginners.

[Twey]

, I re-check many of my ASP pages and none have a class named .menu

but menubar and menu yes.

The name of the class is "menu". The dot tells the CSS parser that the symbol that follows is a class, rather than a tag name.

to me that is more standard way of writing esp for us beginners.

esp? I don't see any major difference in this code you do understand and that you don't.

[Tawni]

Ok I checked the Java Script Menu File and I cant read java Script very well,

But I think it is Renaming stuff or poss shorting name or adding "dot" to a class name .

Any how I see where I went wrong in my testing.

I only had to change this code :

a
{
font-weight: bold;
text-decoration: none;
}

a,
a:active,
a:hover,
a:visited
{
color: #0000CC;
}

a:active,
a:hover
{
text-decoration: underline;
}


<------------------------------------to this below :------------------------>

a
{
font-weight: bold;
text-decoration: none;
}

a,
a:active,
a:visited
{
color: #0000CC;
}

a:hover
{
color: #000000
}

a:active,
a:hover
{
text-decoration: underline;
}


Basically It was the Nesting if that is Proper Lingo by cutting out the a:hover

and putting it by itself I was able to fix most of what I need to do.

I just was not use to reading ..... this style of grouping things together or maybe was the naming convention "a," etc

Oh well I am a Rookie , but I enjoy trying to learn new things, if I only was brave enough to try CSS years ago
I probably would have traded up my Networking degree into web development, this is much more fun.

and I also might add when I changed this before I did not properly enclose the tags { <---these things--> }

[Tawni]

Hats off to Twey

you gave me enough clues without doing the work for me, now I learned.