SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Member
    Join Date
    Mar 2001
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How do you do this?

    If you go to http://www.arstechnica.com/ with IE 5.5, the links on the left have a specific underline color that is different from the actual text color (or link color to be more specific)....is this aCSS trick? and if it is, how is it accomplished?

  2. #2
    SitePoint Wizard dominique's Avatar
    Join Date
    Dec 2000
    Location
    orbis terrarum
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is acheived with CSS.
    (Everything in blue is code)

    [1] This is how Ars Technica did it:

    <HEAD>
    <LINK REL=STYLESHEET HREF="/includes/masterstyle.css" TYPE="text/css">
    </HEAD>

    <A href="http://arstechnica.com/guide/index.html"><span class="mlink">Buyer's Guide</span></A>


    masterstyle.css is a plain text file with the following line of code:
    .mlink { font-family: verdana, helvetica; font-size: 13px; line-height: 11pt; color: #FFFFFF; }
    Simply add the line of code into notepad and save the file with a '.css' extension.


    [2] Or you can do it this way:

    Using the <HEAD>...</HEAD> from [1], repace the link line with:
    <A href="http://arstechnica.com/guide/index.html" class="mlink">Buyer's Guide</A>


    [3] Option [1] and [2] allow you to call the masterstyle.css file from every page, but you could do this too. Replace the <HEAD>...</HEAD> from [1] with:

    <HEAD>
    <style type="text/css">
    <!--
    .mlink { font-family: verdana, helvetica; font-size: 13px; line-height: 11pt; color: #FFFFFF; }
    -->
    </style>
    </HEAD>


    With this you should be able to use the link technique from either [1] or [2]. Note however that you will have to put this code on every page you want the effect on.


    I hope this is what you were looking for, sorry if the colors make it a little confusing, I was actually trying to make it clearer.

  3. #3
    SitePoint Member
    Join Date
    Mar 2001
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you very much!!!

  4. #4
    SitePoint Wizard dominique's Avatar
    Join Date
    Dec 2000
    Location
    orbis terrarum
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just glad to help!

  5. #5
    SitePoint Member
    Join Date
    Mar 2001
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hrrmmmm....is there any way to incorporate this into a hover effect?

    I want the text to be #CCCCCC and not underlined, and SMALL CAPS

    then, on hover: text color #FFFFFF underlined and the underline color to be #6699CC and SMALL CAPS

    any ideas? I have seen it done before soooo

    btw, here is what i have now

    My style sheet:
    Code:
    <style type="text/css">
    <!--
    body {  font-family: Verdana, Arial, Helvetica, sans-serif}
    p {  font-size: 12px}
    .privacy {  color: #FFFFFF; text-decoration: none}
    .navbar {  color: #CCCCCC; text-decoration: none; font-variant: small-caps; font-size: 11px}
    .navbar:hover {  color: #FFFFFF; font-variant: small-caps; ; text-decoration: underline;}
    .underline { line-height: 11pt; color: #6699CC;}
    -->
    </style>
    where i need to use the code:
    Code:
              <td align="center" valign="middle"><font size="-2" color="#6699CC"><img src="img/spacer.gif" width="1" height="15">[<a href="#" class="navbar">Home</a>] 
                [<a href="#" class="navbar:>Forums</a>] [<a href="#" class="navbar">Reviews</a>] 
                [<a href="#" class="navbar">Articles</a>] [<a href="#" class="navbar">Price 
                Guide</a>] [<a href="#" class="navbar">Misc</a>] [<a href="#" class="navbar">Contact</a>] 
                [<a href="#" class="navbar">Links</a>]</font></td>
    and here is a link to my test page:
    http://www.mainframetech.net/temp
    Last edited by IanMFT; Mar 13, 2001 at 18:23.

  6. #6
    SitePoint Wizard dominique's Avatar
    Join Date
    Dec 2000
    Location
    orbis terrarum
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've tried and tried, but I can't figure out how to make the underline a different color from the text. Personally I've never seen it done before. I might be able to figure it out if you point out an example where you've seen it before.

    BTW, you're new layout looks cool!

  7. #7
    SitePoint Member
    Join Date
    Mar 2001
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for the complement im going to forget about it because I just realized that I'm making a big deal over a feature that only IE 5.5 supports.....but thank you for that help, i really appreciate it
    Last edited by IanMFT; Mar 13, 2001 at 19:00.

  8. #8
    SitePoint Wizard dominique's Avatar
    Join Date
    Dec 2000
    Location
    orbis terrarum
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No problem, just ask anytime!

  9. #9
    SitePoint Member
    Join Date
    Mar 2001
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok, i found an example of it

    http://www.****edcompany.com/
    ( the f word goes in the stars...sorry about that, it was the only example i could find)


    any ideas? im stumped...

  10. #10
    SitePoint Wizard dominique's Avatar
    Join Date
    Dec 2000
    Location
    orbis terrarum
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You really got me here. I don't have IE5.5, never took the time to upgrade, but looking at the code for just over half an hour now I just don't see what it could be. This goes beyond my css knowledge, sorry.

    I couldn't find any mention of it either on the CSS and DHTML sites I checked...

  11. #11
    Freelance Web Designer KeithMcL's Avatar
    Join Date
    Oct 1999
    Location
    Dublin, Ireland
    Posts
    1,125
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's down to the "a href" tag having the "span" tag around them.

    Here's the code I used to created it:
    Code:
    <style>
    <!--
    a:link {font-family: Verdana, Geneva, Arial; font-size: 9pt; color:ffffff; font-weight:bold}
    a:visited {font-family: Verdana, Geneva, Arial; font-size:9pt; color:ffffff;font-weight:bold}
    a:hover {font-family: Verdana, Geneva, Arial; font-size:9pt; color:ffb600; font-weight:bold}
    .navlink {font-family:verdana,arial;font-size:8pt;color:ffffff;font-weight:bold}
    -->
    </style>
    <body bgColor=000000 text=ffffff alink=ff6600 vlink=ffffff link=ffffff leftmargin="0" topmargin="0">
    <br><br>
    &nbsp;&nbsp;<a href="http://www.aol.com"><span class=navlink>AOL</span></a> | <a href="http://www.aol.com"><span class=navlink>AOL</span></a>
    </body>
    Simply change the hex colors to whatever you want them to be.

    rgds,

  12. #12
    SitePoint Member
    Join Date
    Mar 2001
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ROCKIN! THANKS!

  13. #13
    The Hiding One lynlimz's Avatar
    Join Date
    Jul 2000
    Location
    Singapore
    Posts
    2,103
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    just about using the css style hover effect.
    it works for mozilla ( netscape 6 ) and ie.

    make sure you specify the links accordingly..like
    a:links {}
    a:visited {}
    a:hover {}
    a:active {}
    "Imagination is more important than knowledge. Knowledge is limited. Imagination encircles the world."
    -- Albert Einstein


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
  •