SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Evangelist CyberFuture's Avatar
    Join Date
    May 2001
    Location
    San Diego, CA
    Posts
    434
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Can This Be Done With CSS???

    The following is a small part of an extrenal style sheet:
    Code:
    a:link {
    	text-decoration: none;
    	color: #000000;
    }
    a:active {
    	text-decoration: none;
    	color: #CC0000;
    }
    a:visited {
    	text-decoration: none;
    	color: #666666;
    }
    a:hover {
    	text-decoration: underline;
    	color: #CC0000;
    }
    th {{
    	text-align: left;
    	background: #1a504d;
    	color: #ffffff;
    	}
    	a:link {
    		text-decoration: none;
    		color: #ffffff;
    	}
    	a:active {
    		text-decoration: none;
    		color: #FFFF99;
    	}
    	a:visited {
    		text-decoration: none;
    		color: #98CBCB;
    	}
    	a:hover {
    		text-decoration: underline;
    		color: #FFFF99;
    	}
    }
    It, of course, does not work. Basically what I'm trying to do is have a default style for handling hyperlinks, and then have a hyperlink sytle that only applies to hyperlinks inside of TH cells. Is this possible?

  2. #2
    I want my 4th arrow! garlinto's Avatar
    Join Date
    Jun 2002
    Location
    Riding the electron wave
    Posts
    372
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Try using classes

    You can do that by using classes.
    For example, you have this:
    code:
    --------------------------------------------------------------------------------

    a:link {
    text-decoration: none;
    color: #000000;
    }
    a:active {
    text-decoration: none;
    color: #CC0000;
    }
    a:visited {
    text-decoration: none;
    color: #666666;
    }
    a:hover {
    text-decoration: underline;
    color: #CC0000;
    }

    ----------------------------------------
    This tells the browser that any link on the page should have the above styles. But what ff that doesn't work with other parts of your page? Then you need some link classes:

    th {
    text-align: left;
    background: #1a504d;
    color: #ffffff;
    }

    a.th:link {
    text-decoration: none;
    color: #ffffff;
    }

    a.th:active {
    text-decoration: none;
    color: #FFFF99;
    }

    a.th:visited {
    text-decoration: none;
    color: #98CBCB;
    }

    a.th:hover {
    text-decoration: underline;
    color: #FFFF99;
    }
    ---------------------------------------------

    Now, in your code, you just have to type:

    -----------------------------------------------
    <A class="th"href="www.somewhere.com">bla bla</A>
    ------------------------------------------------

    You can have as many different link classes as you want. Hoorah for CSS!
    Hope this helps.

  3. #3
    SitePoint Evangelist CyberFuture's Avatar
    Join Date
    May 2001
    Location
    San Diego, CA
    Posts
    434
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't want to use classes. Fortunetly I found the solution:
    Code:
    th {
    	text-align: left;
    	background: #1a504d;
    	color: #ffffff;
    	}
    th a:link {
    	text-decoration: none;
    	color: #ffffff;
    	}
    th a:active {
    	text-decoration: none;
    	color: #FFFF99;
    	}
    th a:visited {
    	text-decoration: none;
    	color: #98CBCB;
    	}
    th a:hover {
    	text-decoration: underline;
    	color: #FFFF99;
    	}
    It works perfectly and without classes.

  4. #4
    SitePoint Addict
    Join Date
    Mar 2002
    Location
    Los Angeles
    Posts
    325
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    why does that look like the same solution to me?
    From here on, it's instinctual...even straight roads meander.

  5. #5
    SitePoint Evangelist CyberFuture's Avatar
    Join Date
    May 2001
    Location
    San Diego, CA
    Posts
    434
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Its not.

    My version says anytime a hyberlink appears inside a th cell this is how it will look.

    garlinto's version creates a class called "th". To get the hyperlinks to look like I want it to, I would have to apply the class name to the table cell.

  6. #6
    SitePoint Addict
    Join Date
    Mar 2002
    Location
    Los Angeles
    Posts
    325
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ah, i gotcha.
    From here on, it's instinctual...even straight roads meander.

  7. #7
    Your Lord and Master, Foamy gold trophy Hierophant's Avatar
    Join Date
    Aug 1999
    Location
    Lancaster, Ca. USA
    Posts
    12,305
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    The second is the more proper way to do it. It is using the true power of CSS which is its cascading abilities. It creates what is called contextual styles and automatically applies them to all elements within the container. You can use them for paragraphs and even classes if you want.
    Wayne Luke
    ------------


  8. #8
    SitePoint Addict
    Join Date
    Mar 2002
    Location
    Los Angeles
    Posts
    325
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    but then i guess you would need to use classes if you had two different tables and you wanted the links to appear differently, right?
    From here on, it's instinctual...even straight roads meander.

  9. #9
    Your Lord and Master, Foamy gold trophy Hierophant's Avatar
    Join Date
    Aug 1999
    Location
    Lancaster, Ca. USA
    Posts
    12,305
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    If that was the case yes.
    Wayne Luke
    ------------



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
  •