Links and classes

[Guest]

Hi Everyone

I'm hoping someone can clear this up for me..... i'm a little confused....

I want to separate my txtDefault and give certain things on my page different classes, links etc.

Therefore I see this in my stylesheet.

/*text throughout site */

.txtDefault, a.txtDefault, a.txtLink, a.txtLocation {

	font-family: "Arial", Helvetica, sans-serif;

	color: #000;

	text-decoration:none;

}

a.txtDefault:hover, a.txtLink:hover, a.txtLocation:hover {

 	font-family: "Arial", Helvetica, sans-serif;

	color: #00aef0;

	text-decoration:underline;}

Now if i want to create say something for the text links and price details under my latest products, do i do this?

/*text links under Latest Products on Homepage*/

.LPText, a.LPText, a.LPprice {

	color:#000;

	font-family: "Arial", Helvetica, sans-serif;

	font-size:12px;

}

a.LPText:hover {

	font-family: "Arial", Helvetica, sans-serif;

	color: #00aef0;

	text-decoration: underline;

}

a.LPprice {

	color:#000;

	font-family: "Arial", Helvetica, sans-serif;

	font-size:12px;}

To be honest i don't know how to ask the question, but what i'm after is the correct way of defining certain elements based on txtDefault.  So a. is used for?



Not sure if i did this correctly but here is another i did for defining the "featured product text on the side box"...

/*Featured Product Text */

.txtFeatProd {

	font-family: "Arial", Helvetica, sans-serif;

	font-size:12px;

	color: #000;

	text-decoration:none;

}

a.txtFeatProd:hover {

 	font-family: "Arial", Helvetica, sans-serif;

	font-size:12px;

	color: #00aef0;

	text-decoration:none;}

and this one...for my "login box" text...

/*Login box on homepage*/

.txtWelcome {

	font-family: "Arial", Helvetica, sans-serif;

	color: #000;

	padding-top: 5px;

	padding-bottom: 10px;

	text-decoration: none;

	font-size: 12px;

}

.txtWelcome:hover {

	font-family: "Arial", Helvetica, sans-serif;

	color: #fff;

	text-decoration: none;

	font-size: 12px;}

Your help would be greatly appreciated.

Sorry for the silly question.

Cheers

Antz

[Guest]

Right. Without the "a.", any element can access the CSS class. With it, only <a> can access it. Say we have this:

<style type="text/css">

<!--



.effect, a.effect { visibility: visible; }

a.effect:hover { visibility: hidden; }



-->

</style>

Only an anchor element (<a>) with its class as effect can be hidden on mouse over. Any other element (ex. span) will simply use the .effect, which does nothing but make things visible.

(Sorry if I didn't understand your question)

AJ Rao

[Guest]

Right. Without the "a.", any element can access the CSS class. With it, only <a> can access it. Say we have this:

<style type="text/css">

<!--



.effect, a.effect { visibility: visible; }

a.effect:hover { visibility: hidden; }



-->

</style>

Only an anchor element (<a>) with its class as effect can be hidden on mouse over. Any other element (ex. span) will simply use the .effect, which does nothing but make things visible.

(Sorry if I didn't understand your question)

AJ Rao

Hi Aj

Thanks so much for trying to help me here....

So does this mean that txtLink and txtLocation are completely different classes to txtDefault? I guess i'm a little confused because they are on the same line of code.

Also does this mean that the codes above such as the LPText and Featprod are set correctly? > i did these and just want to make sure that i set them up correctly for all my skins.

Kindest Regards,

Antz :)

[burgensteen]

If you want to separate them its realy very easy, you can just remove the class in question from the one its already in and just give it its own class with attributes.

ie. to move a.txtLink to its own class:

.txtDefault, a.txtDefault, a.txtLink, a.txtLocation {

font-family: "Arial", Helvetica, sans-serif;

color: #000;

text-decoration:none;

}

the class above would become:

.txtDefault, a.txtDefault, a.txtLocation {

font-family: "Arial", Helvetica, sans-serif;

color: #000;

text-decoration:none;

}

and the new class would be

a.txtLink {

font-family: "Arial", Helvetica, sans-serif;

color: #000;

text-decoration:none;

}

You can apply this to any class or id in your CSS.

This is a standard way of applying CSS and it keeps the file size down & stops the CSS from bloating when some classes have the same attributes.

[Guest]

If you want to separate them its realy very easy, you can just remove the class in question from the one its already in and just give it its own class with attributes.

ie. to move a.txtLink to its own class:

.txtDefault, a.txtDefault, a.txtLink, a.txtLocation {

font-family: "Arial", Helvetica, sans-serif;

color: #000;

text-decoration:none;

}

the class above would become:

.txtDefault, a.txtDefault, a.txtLocation {

font-family: "Arial", Helvetica, sans-serif;

color: #000;

text-decoration:none;

}

and the new class would be

a.txtLink {

font-family: "Arial", Helvetica, sans-serif;

color: #000;

text-decoration:none;

}

You can apply this to any class or id in your CSS.

This is a standard way of applying CSS and it keeps the file size down & stops the CSS from bloating when some classes have the same attributes.

Hi Burgensteen

Thanks for replying...

Well i did a bit more reading,,,,, and i've changed my css to look like this.... [this is for my latest products ie. those links whereas it says the product name under the images]

//*text links under Latest Products on Homepage*/

.LPText, a.LPText, a.LPText:link {

	color:#000;

	font-family: "Arial", Helvetica, sans-serif;

	font-size:12px;

	text-decoration:none;

}

a.LPText:hover {

	font-family: "Arial", Helvetica, sans-serif;

	color: #42a9f4;

	text-decoration: underline;

}

/*Featured Product Text */

.txtFeatProd, a.txtFeatProd {

	font-family: "Arial", Helvetica, sans-serif;

	font-size:12px;

	color: #000;

	text-decoration:none;

}

a.txtFeatProd:hover {

	color: #fff;

	text-decoration:underline;}

Did i correctly put together the css for Featured products also?

Now - i'm a little confused,,,,, am i also suppose to have the visited, and active states defined? or can i leave it like this?

Oh and by the way where is the txtLocation class in my html? i can't find it!

Thanks

Antz :)

[burgensteen]

Looks good to me as far as the CSS goes but for the class attributes, thats just a personal design thing.

[Guest]

Hi,

You mentioned this code:

//*text links under Latest Products on Homepage*/

.LPText, a.LPText, a.LPText:link {

	color:#000;

	font-family: "Arial", Helvetica, sans-serif;

	font-size:12px;

	text-decoration:none;

}

a.LPText:hover {

	font-family: "Arial", Helvetica, sans-serif;

	color: #42a9f4;

	text-decoration: underline;

}

That's a major error. You have "//*" for the first few characters on the first line. This makes everything within the class unaccessible. Try removing the whole first line and everything will be OK.

Instead of //* COMMENT */, next time make it /* COMMENT */.

AJ Rao

[Guest]

Hi again,

Thanks so much for your patience with these silly questions.

Can you pls explain to me "CSS goes but for the class attributes, thats just a personal design thing"

Would you be so kind as to show me how you would set this code up? so i can get an idea of what your saying.

Thanks

Antz :unsure:

[Guest]

Hi,

If I get burgensteen right, he means that the selector of a CSS class can be named to your liking. For example, instead of:

.txtColor { color: #000; }

It could be:

.colorTxt { color: #000; }

It's your personal design thing.

AJ Rao