1. Computer problem? Tech Support Guy is completely free -- paid for by advertisers and donations. Click here to join today! If you're new to Tech Support Guy, we highly recommend that you visit our Guide for New Members.

More CSS problems

Discussion in 'Software Development' started by lola2001, Oct 1, 2003.

Thread Status:
Not open for further replies.
Advertisement
  1. lola2001

    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.
     
  2. Rockn

    Rockn

    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.
     
  3. Gibble

    Gibble

    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
     
  4. lola2001

    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.
     
  5. Gibble

    Gibble

    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 :)
     
  6. Rockn

    Rockn

    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.
     
  7. lola2001

    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.
     
  8. khaki

    khaki

    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?
     
  9. lola2001

    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.
     
  10. khaki

    khaki

    Joined:
    Jul 26, 2003
    Messages:
    2,431
    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
     
  11. lola2001

    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.
     
  12. Gibble

    Gibble

    Joined:
    Oct 9, 2001
    Messages:
    27,087
    Thanks K, their is a reason I'm not a teacher :p
     
  13. Sponsor

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 733,556 other people just like you!

Thread Status:
Not open for further replies.

Short URL to this thread: https://techguy.org/168853

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice