Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Jan 2011
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Unhappy Changing link and font colors in CSS

    I have tried all ways to Sunday to solve this problem, and I just can't seem to figure it out! Can anyone help me?

    Basically, my site says it all:
    http://hikarikat.com/steph/mt/chalk/...tingindex.html

    I want light pink (#ffccff) colored links on the dark purple navigation strip.
    I want dark purple font on the light pink text area, and all other fonts that will ever appear on the page, other than on the navigation strip, should also be dark purple. (#990099)

    It should be noted that the text in the left column is only the right color because I added a <font color> tag directly to the page code. I can't get it to change according to anything I put in the .css file...

    It just... won't... work! Granted my knowledge of HTML and CSS (especially) is limited, but, how hard can this be?

    Take it easy on a dummy like me...? lol. And thanks in advance for any help.
    Last edited by Myrcury; 01-31-2011 at 01:47 AM.

  • #2
    New to the CF scene
    Join Date
    Jan 2011
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    It should also be noted that I'm still working with it in the meantime and trying to figure it out myself... which I may have just done...

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,747
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello Myrcury,
    #leftcolumn {color: #990099;} should make all the text in #leftcolumn that color. If that's pretty much the color of your text in most of your layout it might be easier to specify that in the CSS for body.

    Your links look like you fixed them? They appear to be the color your wanting I think, though they are styled in the wrong order. Links should always be styled link/visited/hover/active. A good way to remember that is the LoVeHAte rule.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    New to the CF scene
    Join Date
    Jan 2011
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Oh, ok, I fixed the order of those. Thanks!

    Yeah, I have it allllmost all figured out now - The only thing left is, how do I make links in the left column appear purple? I just put in a link, and its the same color as the links at the top of the page, so it becomes invisible against the pink background...! Do you know how I can assign a color to that area, for the links to be?

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,747
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    When you have links in a top nav that are one color and links in another element that are a different color, you just need to be more specific when targeting them with your CSS. See specificity here.

    In your case, #leftcolumn a:link {color: #000;} should target the anchor in your left column.
    To avoid confusion as to where it needs to be placed in your CSS, #navigation a:link {color: #FFCCFF; text-decoration: underline;} might be more specific for your nav links since that CSS you have now applies to all links on your site.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    New to the CF scene
    Join Date
    Jan 2011
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts


    Eep...! I think I get what you're trying to say, I just don't know... how to plug any of that into my existing .css file... where to put it, I mean. I'm not very good with this stuff...

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,747
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Try making your CSS look like this -
    Code:
    	  but it would be greatly appreciated if you gave a link
    	  back to http://www.code-sucks.com
    	  
    */
    
    * { padding: 0; margin: 0; }
    
    
    .head { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #990099; background-color: #FFCCFF; border: none; border-style: solid; border-width: 1px}
    #navigation a:link, 
    #navigation a:visited {color: #FFCCFF;text-decoration: underline;}
    #navigation a:hover, 
    #navigation a:active {color: #FFCCFF;text-decoration: none;}
    
    #leftcolumn a:link,
    #leftcolumn a:visite {color: #000;}
    #leftcolumn a:hover,
    #leftcolumn a:active {color: #f00;}
    
    body {
     background-image: url(http://hikarikat.com/steph/mt/chalk/layout/rainbowtartanlite.jpg);  
     font-family: Arial, Helvetica, sans-serif;
     font-size: 12px;
     font-color: #ffccff;
     link-color: #ffccff;
    }
    
    #wrapper {
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    Myrcury (01-31-2011)

  • #8
    New to the CF scene
    Join Date
    Jan 2011
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    You're amazing!! <3 Thank you so much, that worked perfectly! Now I can finally get the rest of the site cookin'... lol!!

  • #9
    New to the CF scene
    Join Date
    Jan 2011
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I still have a couple of other issues with it, but I'll have to make a new thread for those I guess since this is resolved now and the other issues aren't related (as far as I know!)


  •  

    Tags for this Thread

    Posting Permissions

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