More CSS problems

Status
This thread has been Locked and is not open to further replies. Please start a New Thread if you're having a similar issue. View our Welcome Guide to learn how to use this site.

lola2001

Thread Starter
Joined
Jan 29, 2001
Messages
1,972
Can someone look at the code from my website.

I am using CSS to make different rollover colors, however I have noticed that I must call for the class in every single link like this:

<a href="#" class=smallgray>Animals

But when I do that, the font and size get all srewed up.

Is it necessary to call the class everytime? I don't remember having to do that before. I know I'm doing something wrong but what? Thanks.
 
Joined
Jul 29, 2001
Messages
21,334
THe reason is because you are using more than one rollover effect for the page. You have a lightgrey one and a darkblue one as well. If you used the same effect for rollovers on the entire page you could handle them all with the single class for all links. Since you have two seperate types you have to define them separately. That's why it wasn't working initially.
 
Joined
Oct 9, 2001
Messages
27,087
Yep, if you just do an 'a' by itself like so, it will act as a default, then use your custom ones to define the rest of the anchor classes
Code:
a {
//css here
}
a.smallgray {
//css here
}
--HTH
 

lola2001

Thread Starter
Joined
Jan 29, 2001
Messages
1,972
I don't quite understand. What am I supposed to so with the a? Thanks.
 
Joined
Oct 9, 2001
Messages
27,087
It's sets the default style for all < a > tags...so you don't need to add the class to them :)
 
Joined
Jul 29, 2001
Messages
21,334
The a represents the attributes for all a tags on a web page if used in a stylesheet.....if you set the attribute for a by itself it will be a global style on your page for all of those tags. You can use classes of the attribute but you will have to define it every time like you have discovered.
 

lola2001

Thread Starter
Joined
Jan 29, 2001
Messages
1,972
Um...you lost me on the last two posts. So...what you are saying is that yes, I must define the class everytime? Sorry, I'm a little slow today.
 
Joined
Jul 26, 2003
Messages
2,431
hi lola...

what they are saying is that you can take your current style (below)

<style type="text/css">
<!--
a.blueover:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #3D3E90;
}
a.grayover:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
color: #D4D0C8;
}
a.smallgray:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #D4D0C8;
}

-->
</style>


and then change it to this :

<style type="text/css">
<!--
a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #3D3E90;
}
a.grayover:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
color: #D4D0C8;
}
a.smallgray:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #D4D0C8;
}

-->
</style>


...and then you only need to define the classes that you want to be different than the default (in bold above)

like this (from your source-code) :

<a href="#">Home</a>
<a href="#">Search</a>
<a href="#">View</a>


.....

<a href="#" class=smallgray>Animals &amp; wildlife</a><br>
<a href="#">Architecture</a><br>
<a href="#">Arts &amp; Culture</a><br>

.....

<a href="#" class=grayover>Free image download</a>


This will reduce 1 instance of having to define a class... as all non-defined < a > tags will assume the formatting of the default.

Does that help you understand it better?
 

lola2001

Thread Starter
Joined
Jan 29, 2001
Messages
1,972
Oh.........I get it! Thanks! Was starting to think I should quit my job..... it wasn't as hard as I was trying to make it. Thanks a lot.
 
Joined
Jul 26, 2003
Messages
2,431
Originally posted by lola2001:
Oh.........I get it! Thanks! Was starting to think I should quit my job..... it wasn't as hard as I was trying to make it. Thanks a lot.
i know ....
it can be hard enough sometimes, without making it even harder on yourself :)

and just to keep things in order....
you should really define all instances of the < a > tag
(like this)

a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #3D3E90;
}

a:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #636;
}

a:active {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #ff0;
}

a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #c00;
}


it's not absolutley essential....
but it will cut-down on unexpected headaches when you have a lot of style on a page.

(Note: the colors are up to you.... I just plugged-in whatever ;) )

:) k
 

lola2001

Thread Starter
Joined
Jan 29, 2001
Messages
1,972
Great, thanks for doing that for me. I'll just modify it..makes things easier for me. For some reason CSS has been a pain in my butt for a long time. it's just hard for me to get.
 
Status
This thread has been Locked and is not open to further replies. Please start a New Thread if you're having a similar issue. View our Welcome Guide to learn how to use this site.

Users Who Are Viewing This Thread (Users: 0, Guests: 1)

As Seen On
As Seen On...

Welcome to Tech Support Guy!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.

Join over 807,865 other people just like you!

Latest posts

Members online

Top