css question

Discussion in 'HTML & Website Design' started by FHost, Feb 9, 2008.

  1. #1
    Hello,

    Can someone help me with this, I would like to change the colors for the links link,visited, hover and all the links should be white color: #FFFFFF

    what is the HTML code that will override the CSS values?

    thank you
     
    FHost, Feb 9, 2008 IP
  2. daboss

    daboss Guest

    Messages:
    2,249
    Likes Received:
    151
    Best Answers:
    0
    Trophy Points:
    0
    #2
    daboss, Feb 9, 2008 IP
  3. FHost

    FHost Peon

    Messages:
    141
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    that dosen't do what i need.
     
    FHost, Feb 9, 2008 IP
  4. risoknop

    risoknop Peon

    Messages:
    914
    Likes Received:
    24
    Best Answers:
    0
    Trophy Points:
    0
    #4
    I'm not sure what you think but you can change color of links by this:

    a {
    // here goes styling of link not visited and nod hovered
    // some attributes you can use here: color, background-color, text-decoration, font-weight, text-indent, font-size, font-family etc
    }

    a:hover {
    // styling of hovered link
    // attributes: same as above...
    }

    and more.. you can style visited links, active links and more...

    I hope you get it.
     
    risoknop, Feb 9, 2008 IP
  5. CashoutChick

    CashoutChick Peon

    Messages:
    94
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    If it's a custom style, then do the same thing as risoknop advised, but change it to:

    a.customname:link, a.customname:hover, a.customname:visited, a.customname:active instead of just a:link, etc.

    Hope that helps
     
    CashoutChick, Feb 9, 2008 IP
  6. shallowink

    shallowink Well-Known Member

    Messages:
    1,218
    Likes Received:
    64
    Best Answers:
    2
    Trophy Points:
    150
    #6
    Think he wants the HTML code to override the CSS. Which isn't going to happen. Might work for a:link if he inlines the style. Doing :hover doesn't work if color is defined in FF at least. Here's the test code. The last one does close to what the OP stated(note I don't endorse this):

    
    <html>
    <head>
    <style>
    
    a:link {
    color: blue;
    }
    a:hover {
    color: red;
    }
    </style>
    </head>
    <body>
    <a href="#">Text link without override</a>
    <a href="#" style="color:black;">Text link with override</a>
    <font color="green"><a href="#">Text link with font tag</a></font>
    <a href="#" style="{color:green} :hover{color:orange}">Text link with font tag</a>
    </body>
    </html>
    
    Code (markup):
    Added: IE 6 doesn't do it either.
     
    shallowink, Feb 9, 2008 IP
  7. FHost

    FHost Peon

    Messages:
    141
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    yes, i have done on the html side, but is there a way to change the link colors on the css file itself?

    I have:


    .footer {

    font-family: Verdana;

    font-size: 11px;

    font-weight: normal;

    color: #FFFFFF;


    so why if i add visited: #FFFFFF it dosen't change the visited link color?

    or the link colors can't be changed just for this footer section?

    thank you
     
    FHost, Feb 10, 2008 IP
  8. Cri2T

    Cri2T Peon

    Messages:
    104
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #8

    Try

    
    .footer {
    	font-family: Verdana;
    	font-size: 11px;
    	font-weight: normal;
    	color: #FFF;
    }
    
    .footer a{
    	font-family: Verdana;
    	font-size: 11px;
    	font-weight: normal;
    	color: #FFF;
    	text-decoration: underline;
    }
    
    .footer a:hover{
    	color: #FFF;
    	text-decoration: none;
    }
    
    Code (markup):

    That should work, and then you can edit as you need. (if I read and understood your post correctly)

    Side Note: This will affect ALL link's contained in the footer.
     
    Cri2T, Feb 10, 2008 IP
  9. amazingronit

    amazingronit Well-Known Member

    Messages:
    1,334
    Likes Received:
    18
    Best Answers:
    0
    Trophy Points:
    130
    #9
    write this on your css page

    .class a:link {
    color: white;
    }
    .class a:hover {
    color: white;
    }
    .class a:visited {
    color: white;
    }
    .class a:active {
    color: white;
    }

    replace "class" with your actual class name. No need to change "white", browser automatically converts them to #ffffff.
     
    amazingronit, Feb 10, 2008 IP
  10. FHost

    FHost Peon

    Messages:
    141
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #10
    Cri2T,

    yes, this works, but when i added this coded it remove the bold? do you know why?
     
    FHost, Feb 10, 2008 IP
  11. Cri2T

    Cri2T Peon

    Messages:
    104
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #11
    Yes, that's the "font-weight: normal;" line, just change it to "font-weight: bold;" and you should be good to go.
     
    Cri2T, Feb 10, 2008 IP
  12. FHost

    FHost Peon

    Messages:
    141
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #12
    Cri2T,

    Thank you, it was exactly what i need it.
     
    FHost, Feb 10, 2008 IP
  13. Cri2T

    Cri2T Peon

    Messages:
    104
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #13
    Your very welcome. Let me know if you need anything else. :)
     
    Cri2T, Feb 10, 2008 IP
  14. FHost

    FHost Peon

    Messages:
    141
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #14
    Hello,

    I have just realized that this solution did work great with IE7, but i was testing my site using firefox, and all the links visited, hover, etc are not ok when using firefox, any idea why?

    than you
     
    FHost, Feb 10, 2008 IP
  15. Webray

    Webray Active Member

    Messages:
    469
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    58
    #15
    Is there something wrapping the link? ... div,span td, etc...


    Example for TD>Strong

    .footer>td>strong>a:link {
    color: #FFFFFF;
    }
    .footer>td>strong>a:hover {
    color: #FFFFFF;
    }
    .footer>td>strong>a:visited {
    color: #FFFFFF;
    }
    .footer>td>strong>a:active {
    color: #FFFFFF;
    }


    Try that...

    Something like that.

    This would be a lot easier if we could view the page.
     
    Webray, Feb 10, 2008 IP
  16. FHost

    FHost Peon

    Messages:
    141
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #16
    Hello,

    No, at least i don't see the div

    This is the link Click here
     
    FHost, Feb 10, 2008 IP
  17. Webray

    Webray Active Member

    Messages:
    469
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    58
    #17
    Try the above changes and see if that does it. ^^
     
    Webray, Feb 10, 2008 IP
  18. SamBerns

    SamBerns Peon

    Messages:
    50
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #18
    Do this instead:

    Example for TD>Strong

    .footer>td>strong>a:link, a:hover, a:active, a:visited {
    color: #FFFFFF;
    }
     
    SamBerns, Feb 10, 2008 IP