SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Evangelist
    Join Date
    May 2007
    Location
    Kent in Uk
    Posts
    538
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    link not pcicking color etc.

    ok. This is doing my head in now.

    I am trying to add a link to a page where it has no text decoration until it is hovered over. I also want the colour of the link to be yellow.

    It just doesnt seem to be picking it up.

    This is the Css pagethe link in question is #newlink)

    Code:
    body{
    margin:0;
    padding:0;
    background-color:#CCCCCC;
    }
    
    #wrapper{
    width:98%;
    margin:0 auto;
    border:ridge thick #666666}
    
    #header{
    float:left;
    width:100%;
    
    background-color:#FFFFFF;
    }
    
    
    #headleft{float:left; width:49%; }
    #headright{float:left; width:49%; }
    /*--------------------------------------------menu------------------------------------------*/
    #menu{float:left; width:1000px; height:29px;  } 
    ul.menu{margin:0px;padding:0px;list-style:none;width:1000px; height:28px;float:left;background: url(myimages/menu_but.jpg) repeat-x;}
    ul.menu li {float:left;height:28px;}
    ul.menu a{display:block; line-height:1.5em; text-decoration:none; width:1000px; font-size:16px; font:Arial, Helvetica, sans-serif;color: #FFFFFF; outline:0;}
    ul.menu a:hover{ color:#FFFF00;}
    /*---------------------------------------end menu------------------------------------------*/
    
    #mainContent{
    float:left;
    width:1000px;
    background-color:#ffffff;
    }
    #newlink a:link{color:#FFFF00; text-decoration:none;}
    #newlink a:visited{text-decoration:none}
    #newlink a:hover{text-decoration:underline;}
    
    .dept{float:left; width:33%; background-color:#ffffff; }
    .intro{float:left; background-color:#ffffff; margin-top:10px; }
    .service{float:left; background-color:#ffffff; margin-top:10px;}
    
    #footer{
    clear:both;
    }
    
    /*------------------------------------------pages-----------------------------------------*/
    #mainNav{
    float:left;
    width:15%;
    background-color:#99CC66;
    }
    
    #content{
    float:right;
    width:810px;
    background-color:#339999;
    }
    
    #mainContent{
    float:left;
    width:65%;
    background-color:#ffffff;
    padding-top:30px;
    padding-left:20px;
    padding-right:20px;
    }
    .maincontent{float:left; width:95%; background-color:#00CC66; font-size:16px; color:#ffffff; padding:3px; margin-bottom:20px;}
    .maincontent1{float:left; width:95%; background-color:#ffffff; font-size:14px; color:#333333; padding:17px; margin-bottom:20px;}
    .maincontent2{float:left; width:70%; background-color: #FDFEC5; color:#CEFCFF; padding:17px; margin-left:15%; margin-bottom:10px; border:medium outset #FF3300;}
    .maincontent3{float:left; width:90%; background-color: #FDFEC5; color:#CEFCFF; padding:17px; margin:15%; margin-bottom:10px; border:medium outset #FF3300;}
    
    .secondaryNav{
    float:right;
    width:30%;
    background-color:#FFFF99;
    }
    .color{ color:#FFFF00;}
    The page I am working on can be found at:http://www.web-writer-articles.co.uk

    It comes out blue and underlined!

    thanks for your help

    cass27

  2. #2
    From Italy with love silver trophybronze trophy
    guido2004's Avatar
    Join Date
    Sep 2004
    Posts
    9,412
    Mentioned
    149 Post(s)
    Tagged
    4 Thread(s)
    Are you sure you included that css file in your page?
    Firebug only detects this for the link tag (style.css, line 70):

    .maincontent {
    color:#FFFFFF;
    font-size:16px;
    }

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,623
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    You need to change this in your css:

    Code:
    #newlink a:link{color:#FFFF00; text-decoration:none;}
    #newlink a:visited{text-decoration:none}
    #newlink a:hover{text-decoration:underline;}
    to this:

    Code:
    a#newlink:link{color:#FFFF00; text-decoration:none;}
    a#newlink:visited{text-decoration:none}
    a#newlink:hover{text-decoration:underline;}
    By the way, you should change this line in red

    Code:
    #content{
    float:right;
    width:810px;
    background-color:#339999;
    }
    to

    Code:
    #content{
    float:left;
    width:810px;
    background-color:#339999;
    }
    Otherwise, on wide screens, the content div sits way out to the right.

  4. #4
    SitePoint Enthusiast
    Join Date
    May 2006
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you associate the #newlink id with the h3 tag, rather than with the a tag, it works:

    Code:
    <h3 id="newlink" align="center">
          Do you need...and <a href=
          "copywriter.php">Web content to get your web site seen.</a>
    </h3>
    But somebody else will have to explain why that is.

    Ned

  5. #5
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,742
    Mentioned
    32 Post(s)
    Tagged
    1 Thread(s)
    First off, it seams you use the ID #newlink more than once.. that is bound to cause problems. if you need the same effect used more than once use a class instead ".newlink".

    To expand on recces's post, and perhaps explain Raplh's in a simpler manner. the issue is specificity.

    The rule: #newlink a:link{}, targets the child element a of any element whose ID is "newlink". but since you gave the ID of new link tho the anchor tag itself the the rule doesn't apply, and thus it doesn't underline like you wish. but when rece puts the id in the H3 tag it works because h3 is now newlink and the anchor is it's child.

    going back to ralphs answer, this would work also.. and have the added advantage that if you moved the rule to another tag other than <a> it would still work:
    #newlink:link{color:#FFFF00; text-decoration:none;}
    #newlink:visited{text-decoration:none}
    #newlink:hover{text-decoration:underline;}
    This may be a moot point since you are applying the ID /CLASS specifically to to links which will always be anchor tags.. but just something to consider.


    HOWEVER, you should note an anchor <a> tag can not be around and <hx> ( or any other block element) Your HTML should look more like this and note I converted the ID into a class:

    <h2 align="center" style="color:#0066cc "><a class="newlink" href="ghost_writer.php">Ghostwriter services</a></h2>


    And your CSS:
    a.newlink{display:block;}
    a.newlink :link{color:#FFFF00; text-decoration:none;}
    a.newlink :visited{text-decoration:none}
    a.newlink :hover{text-decoration:underline;}


    Hopes that helps

  6. #6
    SitePoint Evangelist
    Join Date
    May 2007
    Location
    Kent in Uk
    Posts
    538
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Guido, Ralph, reece and dresden_pheonix,

    Thanks for this. Its appreciated. I understand specifity a bit more now and yes, it works now.

    thanks

    cass27


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
  •