SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member Arcadia62's Avatar
    Join Date
    May 2003
    Location
    Crossville, TN
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Menu Links and Body Links

    Hi,

    I'm a real newbie at CSS, and I've run into a slight problem I hope someone can help me with ...

    I'm trying to create a menu bar at the top of my site with no underlines, just a rollover effect.

    The rest of the hyperlinks throughout the site I want to have underlines.

    I set up a class called .headerlink that says this:

    Code:
    .headerlink {
    font-family: verdana, arial, helvetica, sans-serif;
    color: #ffffff;
    font-size: .80em;
    text-decoration: none;
    }
    ... and my other hyperlinks are set like this:

    Code:
    a {
    color: teal;
    font-family: verdana, arial, helvetica, sans-serif;
    font-weight: 500;
    text-decoration: none;
    }
    a:link {
    color: navy;
    
    }
    a:visited {
    color: navy;
    
    }
    a:hover {
    color: #808080;
    
    }
    The problem is, I think I should be able to add a line in .headerlink that says "text-decoration: none;" and replace the text-decoration line in "a" with "text-decoration: underline;". However, this does not work! All hyperlinks end up underscored ...

    I know I must be missing something really simple -- could some kind soul give me a few pointers or send me to a source I could use to figure this out. I'm very frustrated!

    Thank you in advance for your help!

  2. #2
    SitePoint Wizard
    Join Date
    Jul 2001
    Location
    The Netherlands
    Posts
    2,617
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm.. try this one:

    Code:
    .headerlink { 
    font-family: verdana, arial, helvetica, sans-serif;
    color: #ffffff;
    font-size: .80em;
    text-decoration: none; 
    }
     
    a {
    color: teal; 
    font-family: verdana, arial, helvetica, sans-serif; 
    font-weight: 500; 
    } 
     
    a:link { 
    color: navy; 
    }
     
    a:visited { 
    color: navy;
    } 
     
    a:hover {
    color: #808080; 
    }

  3. #3
    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)
    Though I might try one...
    Would this work better? ".headerlink" would be expressed as a child of element 'a' and so inherit text-decoration:none.

    Code:
    a {
    color: teal; 
    font-family: verdana, arial, helvetica, sans-serif; 
    font-weight: 500; 
    text-decoration: none;
    } 
     
    a:link {color: navy;}
    a:visited {color: navy;} 
    a:hover {color: #808080;}
    
    a .headerlink { 
    font-family: verdana, arial, helvetica, sans-serif;
    color: #ffffff;
    font-size: .80em;
    }
    Ducharme's Axiom: "If you view your problem closely
    enough, you will recognize yourself as part of the problem."


  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    Here's another way you can do it
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    .headerlink a {
    font-family: verdana, arial, helvetica, sans-serif;
    color: #fffcc;
    font-size: .80em;
    text-decoration: none;
    }
    .headerlink a:visited { 
    color: #990000; 
    background-color: #FFFccc; 
    } 
    .headerlink a:hover {
    color: #FF0000;
    background-color: #FFFccc;
    }
    .headerlink a:active {
    color: #990000;
    background-color: #FFFccc;
    }
    .headerlink span {margin-left:50px}
    a {
    color: teal;
    font-family: verdana, arial, helvetica, sans-serif;
    font-weight: 500;
    }
    a:link {
    color: navy;
    }
    a:visited {
    color: navy;
    }
    a:hover {
    color: #808080;
    }
    </style>
    </head>
    <body>
    <div class="headerlink"> 
    <p><span><a href="#">Menu 1</a></span><span><a href="#">Menu 2</a></span><span><a href="#">Menu 3</a></span></p>
    </div> 
    <div>
    <p><a href="#">Normal Link</a></p>
    <p><a href="#">Normal Link</a></p>
    <p><a href="#">Normal Link</a></p>
    <p><a href="#">Normal Link</a></p>
    </div>
    </body>
    </html>
    Hope this is of some use.

    Paul

  5. #5
    SitePoint Member Arcadia62's Avatar
    Join Date
    May 2003
    Location
    Crossville, TN
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Hi,

    Here's another way you can do it

    <snip!>

    Hope this is of some use.

    Paul
    Wow, you guys are FAST! I didn't expect so many replies so soon!

    Paul, I think your solution is going to work the best for me. I've copied the code you posted, and it previews the just the way I'd like mine to look. Now, I'm going to spend some time investigating and integrating this new code.

    Thank you very much to everyone who responded! I really appreciate your time and effort!


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
  •