SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast vertlime's Avatar
    Join Date
    Nov 2004
    Location
    UK, Canada
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Different style of hyperlinks

    Hi,

    Still learning CSS and now I am having trouble with having different style of links...

    I want to have a style for the main navigation bar, and 2 other different style for links throughout the site. I can't figure it out how...

    See I want to have a hover effect on the "link1"

    body {
    background-color: White;
    background-image: url(images/bg.gif);
    background-repeat: repeat-x;
    margin-top: 0px;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    }
    a {
    color: White;
    text-decoration: none;
    }
    a:hover {
    color: #f9a203;
    }

    .menu {
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    color: White;
    font-size: 13px;
    background-image: url(images/menu.jpg);
    background-repeat: no-repeat;
    }
    .copy {
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    color: White;
    font-size: 13px;
    background-image: url(images/copy.jpg);
    background-repeat: no-repeat;
    text-align: center;
    }
    .sep {
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    color: White;
    font-size: 13px;
    border-right-color: #f9a203;
    border-right-style: solid;
    border-right-width: 1px;
    text-align: center;
    }
    .sep2{
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    color: White;
    font-size: 13px;
    text-align: center;
    }
    .tbleft {
    height: 100%;
    background-image: url(images/tb_l2.jpg);
    background-repeat: repeat-y;
    }
    .tbright {
    height: 100%;
    background-image: url(images/tb_r2.jpg);
    background-repeat: repeat;
    }

    .blleft {
    height: 100%;
    background-image: url(images/bl_l1.jpg);
    background-repeat: repeat-y;
    background-position: right;
    }
    .blright {
    height: 100%;
    background-image: url(images/bl_r1.jpg);
    background-repeat: repeat-y;
    background-position: left;
    }
    .blimg {
    margin-bottom: -1px;
    }
    .bltop1 {
    background-image: url(images/bl_t1.jpg);
    background-repeat: no-repeat;
    color: White;
    padding-left: 13px;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 14px;
    }
    .bltop2 {
    background-image: url(images/bl_t2.jpg);
    background-repeat: no-repeat;
    color: White;
    padding-left: 13px;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 14px;
    }
    .title1 {
    color: #91B746;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 13px;
    }
    .bltext {
    color: #90908E;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 12px;
    }
    .link1 {
    color: #91B746;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 13px;
    }
    .title2 {
    color: #C00093;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 13px;
    }
    .link2 {
    color: #C00093;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 13px;
    }

    hr{
    border-style : dotted;
    border-color : Black;
    }
    Any help?

    Many thanks
    Innovative Graphic Design Solutions
    www.magentismedia.com



  2. #2
    Follow Me On Twitter: @djg gold trophysilver trophybronze trophy Dan Grossman's Avatar
    Join Date
    Aug 2000
    Location
    Philadephia, PA
    Posts
    20,578
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Use the selector .link1:hover

    Code:
    .link1:hover {
      color: red;
    }

  3. #3
    SitePoint Enthusiast vertlime's Avatar
    Join Date
    Nov 2004
    Location
    UK, Canada
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you Dan,

    I did that previously and it's not working
    Innovative Graphic Design Solutions
    www.magentismedia.com



  4. #4
    SitePoint Enthusiast vertlime's Avatar
    Join Date
    Nov 2004
    Location
    UK, Canada
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi again,

    Anything I am missing or I should look after in my coding?

    You help is really appreciated.

    Regards,
    Caroline
    Innovative Graphic Design Solutions
    www.magentismedia.com



  5. #5
    SitePoint Zealot zalucius's Avatar
    Join Date
    Jul 2007
    Location
    Denmark
    Posts
    162
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    try the following example instead of your .link1 style:
    Code CSS:
    a.link1, a.link1:link, a.link1:active, a.link1:visited
    {
    background:#FFFFFF;
    color: #91B746;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 13px;
    }
    a.link1:hover
    {
    background:#FF0000;
    }

    All anchors (a) with your css class "link1" will then use the styles.
    notice the first line where multiple "events" are defined (link, active and visited), and notice the last one, where the hover style is defined seperatly

    links will have a white background untill you hover over it, then the background turns red.
    zalucius


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
  •