SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2002
    Location
    USA, Earth
    Posts
    69
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS for Links [Please Help]

    Hello,
    1. I am learning CSS, and I would like to have the links (Alink, visted, active, hover) to be a prt of the body tag as it is now (see coe below). How can I intergrade it.

    2. Now, for some slected CSS that I did (td.mainh) I want to have a diffrent (alink, visted, active, hover) then in the body, how can I do that).

    [VBS]
    td.mainh
    { font-family: "Arial";
    font-weight: bold;
    font-size: 19px;
    color: #FFFFFF;
    text-decoration: none;
    background-image: url(pics/Bar.gif);
    background-color: #330099 }

    BODY
    {
    margin-top: 0px; margin-left: 0px; margin-buttom: 0px; margin-right: 0px;
    scrollbar-face-color: #3399CC;
    scrollbar-highlight-color: #000000;
    scrollbar-3dlight-color: #FFFFFF;
    scrollbar-darkshadow-color: #000000;
    scrollbar-shadow-color: #000000;
    scrollbar-arrow-color: #FFFFFF;
    scrollbar-track-color: #D0e4f0;}

    A:link { color: #333399 }
    A:visited { color: #000000 }
    A:active { color: #CC0000 }
    A:hover { color: #FF0000 }
    A:hover { color: #FF0000 }
    [/VBS]

    Thank You.

  2. #2
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ace...

    The code you've supplied for the links will be the default color for all links on the page.

    If you want the links to be a different color in certain portions of the page then you've got a few different options.

    The first option is to create another pseudo-class like so:

    a.footer:link { font-family: verdana; color: #FFFFFF; font-size: 9pt; font-weight: bold; }
    a.footer:hover { font-family: verdana; color: #66FF00; font-size: 9pt; font-weight: bold; }
    a.footer:visited { font-family: verdana; color: #cccccc; font-size: 9pt; font-weight: bold; }
    a.footer:visited:hover { font-family: verdana; color: #66FF00; font-size: 9pt; font-weight: bold; }

    Then call it like so:

    <a href="somepage.html" class="footer">This is a footer link</a>

    This will also work anywhere on the page. The drawback is the you have to explicitly state the class.

    The second option is to create a child class. This would look like this:

    td A:link { color: #333399 }
    td A:visited { color: #000000 }
    td A:active { color: #CC0000 }
    td A:hover { color: #FF0000 }
    td A:hover { color: #FF0000 }

    What that does it to say that all normal links which live inside a TD tag will conform to that style. You could of course add extra container elements to that code to cover P and DIV like so:

    td, p, div A:link { color: #333399 }
    td, p, div A:visited { color: #000000 }
    td, p, div A:active { color: #CC0000 }
    td, p, div A:hover { color: #FF0000 }
    td, p, div A:hover { color: #FF0000 }
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2002
    Location
    USA, Earth
    Posts
    69
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks
    But, How can I apply it only toward td.mainh in CSS. I want all other TD to have other once, I just want to have td.mainh to have diffrent link,active, visted, hover colors.

  4. #4
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    like so:
    a.mainh:link { font-family: verdana; color: #FFFFFF; font-size: 9pt; font-weight: bold; }
    a.mainh:hover { font-family: verdana; color: #66FF00; font-size: 9pt; font-weight: bold; }
    a.mainh:visited { font-family: verdana; color: #cccccc; font-size: 9pt; font-weight: bold; }
    a.mainh:visited:hover { font-family: verdana; color: #66FF00; font-size: 9pt; font-weight: bold; }

    Then your TD tag would look like this:

    <td class="mainh">
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  5. #5
    SitePoint Enthusiast
    Join Date
    Jul 2002
    Location
    USA, Earth
    Posts
    69
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It does not work. It ignores it. Could it be becuase I already have a td.mainh BEFORE the link

    [VBS]
    td.mainh
    { font-family: "Arial";
    font-weight: bold;
    font-size: 19px;
    color: #FFFFFF;
    text-decoration: none;
    background-image: url(pics/Bar.gif);
    background-color: #330099 }
    a.mainh:link { font-family: verdana; color: #000000; font-size: 9pt; font-weight: bold; }
    a.mainh:hover { font-family: verdana; color: #66FF00; font-size: 9pt; font-weight: bold; }
    a.mainh:visited { font-family: verdana; color: #cccccc; font-size: 9pt; font-weight: bold; }
    a.mainh:visited:hover { font-family: verdana; color: #66FF00; font-size: 9pt; font-weight: bold;

    }


    BODY
    {
    margin-top: 0px; margin-left: 0px; margin-buttom: 0px; margin-right: 0px;
    scrollbar-face-color: #3399CC;
    scrollbar-highlight-color: #000000;
    scrollbar-3dlight-color: #FFFFFF;
    scrollbar-darkshadow-color: #000000;
    scrollbar-shadow-color: #000000;
    scrollbar-arrow-color: #FFFFFF;
    scrollbar-track-color: #D0e4f0;}
    [/VBS]

  6. #6
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do you have a HTML page online that I could look at?
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  7. #7
    SitePoint Enthusiast
    Join Date
    Jul 2002
    Location
    USA, Earth
    Posts
    69
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not really, it is just a simple page that I am tyring to playy with, i can try to put it online soon.

  8. #8
    SitePoint Enthusiast
    Join Date
    Jul 2002
    Location
    USA, Earth
    Posts
    69
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey,

    I got it working, but not the way i wanted. I wante the link color to be white in all td.mainh classes, however, inorder to it to work, i have to do td.mainh and for the link i have to do <a class="mainh" .... > to make it work. How can I make it that all links coplore would be white in td.mainh (and all others outside of td.mainh blue)

    here is the code

    [VBS]
    td.mainh
    { font-family: "Arial";
    font-weight: bold;
    font-size: 19px;
    color: #FFFFFF;
    text-decoration: none;
    background-image: url(pics/Bar.gif);
    background-color: #330099 }

    a.mainh:link { font-family: verdana; color: #FFFFFF; font-size: 9pt; font-weight: bold; }
    a.mainh:hover { font-family: verdana; color: #FFFFFF; font-size: 9pt; font-weight: bold; }
    a.mainh:visited { font-family: verdana; color: #FFFFFF; font-size: 9pt; font-weight: bold; }
    a.mainh:visited:hover { font-family: verdana; color: #FFFFFF; font-size: 9pt; font-weight: bold;

    }


    BODY
    {
    margin-top: 0px; margin-left: 0px; margin-buttom: 0px; margin-right: 0px;
    scrollbar-face-color: #3399CC;
    scrollbar-highlight-color: #000000;
    scrollbar-3dlight-color: #FFFFFF;
    scrollbar-darkshadow-color: #000000;
    scrollbar-shadow-color: #000000;
    scrollbar-arrow-color: #FFFFFF;
    scrollbar-track-color: #D0e4f0;}

    A:link { color: #0000FF }
    A:visited { color: #0000FF }
    A:active { color: #0000FF }
    A:hover { color: #0000FF }
    [/VBS]


Bookmarks

Posting Permissions

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