SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Guru
    Join Date
    Aug 2001
    Location
    Amsterdam
    Posts
    788
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    different link colors

    Hi all,

    I have a problem and I really don't know how to solve it..

    I have a site with multiple background colors and also multiple text colors.. Well not a problem ..

    But My links I have set in the body tag to a certain color..

    My problem is I want to change the link (vlink alink) color for a certain section .. How do I do this???

    Greets,

    Peanuts
    the neigbours (free) WIFI makes it just a little more fun

  2. #2
    SitePoint Guru Husain's Avatar
    Join Date
    Sep 2001
    Posts
    620
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can do that using CSS. Here's how:

    Code:
    <style type="text/css">
    <!--
    .different {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #996699}
    different.a:link {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #0033FF}
    different.a:hover {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #993300}
    -->
    </style>
    I created a class in CSS. It is pretty easy if you do it in Dreamweaver. Then when you want to set a different link you have to modify the <p> tag (or any other tag that you are using. Example:

    Code:
    <p class='different'>My text with a differnt link style here.</p>
    Hope this helps.

  3. #3
    SitePoint Addict
    Join Date
    Jul 2001
    Posts
    284
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Should it be "different.a" or "a.different" for the CSS declaration area? Thought it was the latter. Does it work either way?

  4. #4
    SitePoint Guru Husain's Avatar
    Join Date
    Sep 2001
    Posts
    620
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried out both ways and it worked for me. However, I will find out what the standard way of writing this and let you know.

  5. #5
    SitePoint Guru Husain's Avatar
    Join Date
    Sep 2001
    Posts
    620
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    htmlite, you are right. The standard way of writing classes is a.different and NOT different.a

    So the correct style sheet will be:
    Code:
    <style type="text/css">
    <!--
    .different {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #996699}
    a.different:link {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #0033FF}
    a.different:hover {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #993300}
    -->
    </style>
    Peanuts, sorry if I have caused any inconvenience to you.

  6. #6
    SitePoint Wizard iTec's Avatar
    Join Date
    May 2001
    Location
    Sydney, Australia
    Posts
    2,243
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    if you are using a.different then you would be better of putting <a class="different"... >link</a> instead of <p class="different"><a ... >link</a></p>

    im not sure about IE, but i know with netscape that it wont recognise it if you do it as mentioned by husain.

  7. #7
    SitePoint Guru
    Join Date
    Aug 2001
    Location
    Amsterdam
    Posts
    788
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks all..

    I knew it was something like that but couldn't find what it was precisely.

    Greets

    Peanuts
    the neigbours (free) WIFI makes it just a little more fun

  8. #8
    SitePoint Guru
    Join Date
    Aug 2001
    Location
    Amsterdam
    Posts
    788
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's not working for me

    I have :

    Code:
    .text1{
    		font-family: Verdana, Arial, Helvetica, sans-serif; 
    		font-size: 11px; 
    		color: white;
    	}
    	a.text1:link{
    		font-family: Verdana, Arial, Helvetica, sans-serif; 
    		font-size: 11px; 
    		color: white;
    	}
    	a.text1:hover{
    		font-family: Verdana, Arial, Helvetica, sans-serif; 
    		font-size: 11px; 
    		color: white;
    	}
    
    And in the body..
    LINK="black" VLINK="black" ALINK="black"
    
    <td style='background:black;mso-shading:white;mso-pattern:solid black' CLASS="text1">
    			<A Href="update.php?id=4">edit</a>
    		</td>
    And still my links end up black..

    Greets,

    Peanuts
    the neigbours (free) WIFI makes it just a little more fun

  9. #9
    SitePoint Guru Husain's Avatar
    Join Date
    Sep 2001
    Posts
    620
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try removing the link settings in the body tag. That should solve your problem.

  10. #10
    SitePoint Member
    Join Date
    Nov 2001
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I cannot seem to get this. This is my .css file.

    /* Forum categories */
    font.category { font-size : 12px; letter-spacing: 1px; font-weight : bold; text-decoration : none; line-height : 150%; color : #0176BC }
    a.category { text-decoration: none; color : #0176BC }
    a:hover.category { text-decoration: underline }

    In my index file I did:
    include('file.css');

    Then in the body I did this:

    <td bgcolor="#DEE3E7"><FONT class="cat"><a href="index.php?catid=<? echo $cat ?>"><B><? echo $namecat ?></B></a></font></td></tr>

    I've tried a few variations on this, I've also put the css directly in the index file rather then calling for it. (just to messy for me though) And the font size and links were just default colors and heights.

  11. #11
    SitePoint Member
    Join Date
    Nov 2001
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    nm, I got it!

  12. #12
    SitePoint Zealot SlaveToTheMan's Avatar
    Join Date
    Aug 2001
    Location
    Land of OZ
    Posts
    131
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, I'm having the problem mentioned by iTec.

    I have a menu bar and the links in that menu bar should be white where as all other links should be red and blue for visited and link.

    Here is my style sheet:

    /*********************/
    A:LINK { color : #336699;}
    A:VISITED { color : #990033;}
    A:HOVER { color : Olive; text-decoration : none;}

    A.navBar:LINK { color : FFFFFF; }

    .navBar { font-family : Arial, Helvetica, sans-serif; background-color : 003300; color : FFFFFF; font-size : 8pt; }
    /**********************/

    Now I have the menu bar table cell set to class "navBar." Now, since I have "A.navBar:LINK" in my css, then a link inside the menu bar should be white! The only problem is that I HAVE TO set this class inside the anchor tag (ie <a href="asdf" class="navBar">) to get it to work. Otherwise it just takes the color indicated by "A:LINK."

    Why? Is this a bug in IE and Netscape? I guess what is happening is that the class style determined in the table does not get inherited by the anchor tag even though it is within the table. Therefore it doesn't realize it should obey "A.navBar:LINK" rule? If this is true, then why does the anchor happily accept the other attributes of "navBar" class (eg fonts)?

    Come on you style sheet maniacs . . . what gives here?

  13. #13
    SitePoint Addict
    Join Date
    Jul 2001
    Posts
    284
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A.navBar
    specifies when the class navBar is used in a link tag.

    .navBar
    specifies when the class navBar is used in a tag.

    Link areas are kinda special for some reason, thus the different specifications are set for them, thus the class must be used in the actual A tags for them.

    Or maybe the browser companies got together one day to figure out how to put a kink in our coding techiques. Inheritance would just be too kind to us, especially cross-brower.


  14. #14
    SitePoint Zealot SlaveToTheMan's Avatar
    Join Date
    Aug 2001
    Location
    Land of OZ
    Posts
    131
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    lol .. . yeah, it was probably the only they collaborated on!

    thanks


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
  •