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 5 of 5
  1. #1
    Regular Coder
    Join Date
    Oct 2004
    Posts
    104
    Thanks
    7
    Thanked 2 Times in 2 Posts

    Incorrect text colour

    Hi All,
    Just wondering if anyone can help me with a small problem I'm having. Below, is the link colour I have set - dark blue.

    This is mainly used for the main content enclosed in the div with the id of 'body_box'

    Code:
    a:link, a:visited, a:active {
    	color: #27679D;
    	text-decoration: none;
    }
    a:hover {
    	text-decoration: none;
    	color: #131562;
    }
    However, I also have the following for just the footer bar.

    Code:
    .footer_block a:link, a:visited, a:active { color: #CCCCCC; }
    .footer_block a:hover { color: #09F09F; }
    The problem I'm having is that ALL text, regardless of position in the code, seems to take the colours of that of the 'footer_block'. If I swap the position of the CSS (put the main ones after the .footer_block ones), then they all take the original colours and not those defined above. These are the only elements I'm having problems with and really has confused me.

    As a guideline, this is the layout:
    Code:
    <html>
     <head>
     </head>
      <body>
       <div id="wrap">
       <div id="header_box">
       </div>
       <div id="body_box">
       </div>
       <div id="footer">
         <div class="footer_block">
         </div>
         <div class="footer_block">
         </div>
        </div>
       </div>
      </div>
     </body>
    </html>
    Unfortunately, the site's not public and I can't post a link because it's not my site!

    Any help would be a massive help.

  • #2
    New Coder
    Join Date
    Feb 2010
    Location
    New Zealand
    Posts
    76
    Thanks
    7
    Thanked 10 Times in 9 Posts
    Your CSS statement:
    .footer_block a:link, a:visited, a:active { color: #CCCCCC; }
    should be:
    .footer_block a:link, .footer_block a:visited, .footer_block a:active { color: #CCCCCC; }
    It's taking the 'a:visited' and 'a:active' as global the way you have it written, overwriting the setting before it.

  • #3
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    820
    Thanks
    10
    Thanked 78 Times in 76 Posts
    FYI :

    You may not know it, but a link has four different states that it can be in. CSS allows you to customize each state. Please refer to the following keywords that each correspond to one specific state:

    * link - this is a link that has not been used, nor is a mouse pointer hovering over it
    * visited - this is a link that has been used before, but has no mouse on it
    * hover - this is a link currently has a mouse pointer hovering over it/on it
    * active - this is a link that is in the process of being clicked

    Using CSS you can make a different look for each one of these states:

    a:link {
    color:#000066;
    text-decoration:none;
    cursorointer;
    }

    a:visited {
    color:#336699;
    }

    a:hover {
    color:#ff6600;
    text-decoration:underline;
    }

    a:active {
    color:#ffcc99;
    cursor:wait;
    }

    a:link {color: #009900;}
    a:visited {color: #999999;}
    a:hover {color: #333333;}
    a:focus {color: #333333;}
    a:active {color: #009900;}

    Order matters. If "a:active" precedes "a:hover", the effects in "a:hover" will take precedence. So, in this example, you would not see the color change when the user clicks down on a link.

    Pseudo Classes

    You can set links contained in different parts of your web page to be different colors by using the pseudo class. For example, lets say you want your links in the content area to have a different color then the links in the left or right column of your webpage.

    You can do this in the following fashion:

    #content a:link {color: #009900;}
    #content a:visited {color: #999999;}
    #content a:hover {color: #333333;}
    #content a:focus {color: #333333;}
    #content a:active {color: #009900;}

    Now assuming that you have your main content in a division named "content" all links within that division will now be styled by this new style selector. Should your selector have a different name, just change the #content selector to match your division name.

    Then for the links in a column you could use the following:

    #column a:link {color: #009900;}
    #column a:visited {color: #999999;}
    #column a:hover {color: #333333;}
    #column a:focus {color: #333333;}
    #column a:active {color: #009900;}

    Once again, this assumes the name of the column division, just change the name to match yours.

    This same method can be accomplished by declaring a class instead of an id.

    a.column:link {color: #009900;}
    a.column:visited {color: #999999;}
    a.column:hover {color: #333333;}
    a.column:focus {color: #333333;}
    a.column:active {color: #009900;}

    Though in this case you will need to add a class to each link

    &lt;a class="column" href="" title="">some link text&lt;/a>

    But, there is still yet an easier way

    .column a:link {color: #009900;}
    .column a:visited {color: #999999;}
    .column a:hover {color: #333333;}
    .column a:focus {color: #333333;}
    .column a:active {color: #009900;}

    Then in the (X)HTML file

    &lt;div class="column">
    &lt;a href="" title="">some link text&lt;/a>
    &lt;/div>
    ☠ ☠RON☠ ☠

  • #4
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    got a similar problem. thanks for the information about HTML & CSS. looking forward for more information. anyone?

  • #5
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    820
    Thanks
    10
    Thanked 78 Times in 76 Posts
    Quote Originally Posted by angeluisa View Post
    got a similar problem. thanks for the information about HTML & CSS. looking forward for more information. anyone?
    Just start your own topic with your question and we'll try to answer your question(s) ASAP.
    ☠ ☠RON☠ ☠


  •  

    Posting Permissions

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