Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    New Coder
    Join Date
    Nov 2010
    Posts
    70
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Simple Problem HyperLink text not changing color

    This is a basic issue, but for some reason I can't change the color of my hyperlink text. I have tried every variation of code both Html/Css but nothing happens. Probably a simple solution that I can't see

    Code:
    HTML
    
    <div class="barbox">
    <p><a  href="index.html" style= color:"#ffffff" title="Home">BAR</a></p>
    <p><a href="index.html" title="Home">BAR</a></p>
    <p><a href="index.html" title="Home">BAR</a></p>
    <p><a href="index.html" title="Home">BAR</a></p>
    </div>
    
    
    CSS
    
    
    .barbox {
    	width:900px;
    	margin: 0 auto;
    	border: 4px solid #333333;
    	background: #333333;
    	text-align:center;
    	color:#000;
    	font-family: Arial, Helvetica, sans-serif;
      font-size: 12px;
      color: #ffffff;
    }
    
    	  
    #barbox {
    	height: 1100px;
    	width: 1180px;
    	margin: 30px auto;
    	background: #000000;
    	overflow: auto;
    	font-size: 0.8em;
    	
      	font-family: Arial, Helvetica, sans-serif;
      	font-size: 12px;
      	color: #ffffff;
    }

  • #2
    Senior Coder
    Join Date
    Jul 2009
    Location
    South Yorkshire, England
    Posts
    2,318
    Thanks
    6
    Thanked 304 Times in 303 Posts
    Examples:

    Code:
    a:link {color: #000000;}
    a:visited {color: #ffffff;}
    a:hover {color: #bcc9d9;}
    etc.

    http://w3schools.com/css/css_link.asp

  • #3
    New Coder
    Join Date
    Nov 2010
    Posts
    70
    Thanks
    6
    Thanked 0 Times in 0 Posts
    I tried this and the link color still does not change. I tried changing the color values in the CSS to one color and still nothing changes



    Quote Originally Posted by MattF View Post
    Examples:

    Code:
    a:link {color: #000000;}
    a:visited {color: #ffffff;}
    a:hover {color: #bcc9d9;}
    etc.

    http://w3schools.com/css/css_link.asp

  • #4
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Can you post your entire html code and your CSS code as well. Post them in separate code tags please.

    Also on a side note, if your creating lists of links, you do know you can place them in ul and <li> tags right? I know the <p> tag works, but you have more control over a list.

  • #5
    Regular Coder
    Join Date
    Oct 2010
    Location
    Florence, MS
    Posts
    486
    Thanks
    10
    Thanked 33 Times in 32 Posts
    This sounds like to me you may have a problem with your CSS. Perhaps it is because a higher up color is affecting it(sorry, I'm tired this morning so I can't remember the correct wording). Like Teed said, we will have to see your entire html code as well as CSS.
    Notice: If you post a problem and it gets fixed, please remember to go back and place it as solved. ;)
    I always recommend the HEAD First series of books for learning a new coding language. ^_^

  • #6
    New Coder
    Join Date
    Nov 2010
    Posts
    70
    Thanks
    6
    Thanked 0 Times in 0 Posts
    I appreciate the help.

    HTML
    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>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
    <link href="LiquorPrices.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    #container .containercolour h2 {
        color: #000;
    }
    #container .containercolour li a {
        color: #FFF;
    }
    </style>
    </head>
    
    <body>
    <!--CONTAINER STARTS-->
    <div id="container">
     <!--HEADER/NAVIGATION STARTS-->
     <div id="top">
      <!--WEBSITE TITLE STARTS-->
      <div id="title">
       <h1><a href="index.html" title="CampusTaps.com">Your Website Name</a></h1>
      </div>
      <!--WEBSITE TITLE ENDS-->
      <!--NAVIGATION STARTS-->
      <div id="nav">
       <ul class="nav-links">
        <li><a href="index.html" title="Home">Home</a></li>
        <li><a href="LiquorPrices.html" title="#">L</a></li>
        <li><a href="CollegeBars.html" title="#">C</a></li>
        <li class="borderx2"><a href="#" title="contact">contact</a></li>
       </ul>
      </div>
      <!--NAVIGATION ENDS-->
     </div>
     <!--HEADER/NAVIGATION ENDS-->
       <div class="divider">&nbsp;
     </div>
    
    
    
     <div class="divider">
     </div>
    
    
    
    <div class="containercolour">
    <div class="rtopcolour"><div class="r1"></div><div class="r2"></div><div class="r3"></div><div class="r4"></div></div>
        <li><a href="index.html" title="Home">Home</a></li>
    <h2>Name</h2><h3>Address</h3>
    <p>Phone Number</p>
    <h3><u>Drink Specials</u></h3>
    
    </div>
    
    <div id="footer">
      <p>Copyright &copy; 2010 <strong>CampusTaps Media Group</strong></p>
     </div>
     <!--FOOTER ENDS-->
    </div>
    
    </body>
    </html>
    CSS
    Code:
    * {
      margin: 0px;
      padding: 0px;
      border: none;
    }
    body {
      background-image: url(images/Body-bg.jpg);
      background-repeat: repeat-x;
      background-color: #ffffff;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 12px;
      color: #c8c8c8;
    }
    #container {
      margin: auto;
      width: 850px;
    }
    #top {
      
      width: 850px;
      height: 119px;
    }
    #title {
      float: left;
      width: 278px;
      height: 74px;
      padding-top: 45px;
    }
    #title h1 {
      display: block;
      float: left;
      width: 278px;
      height: 74px;
      text-indent: -9999px;
    }
    #title h1 a {
      display: block;
      width: 100%;
      height: 100%;
      background-image: url(images/campustapslogosmall.jpg);
      background-repeat: no-repeat;
      background-position: 0 0;
    }
    #navigation { float: right; }
    .nav-links li {
      display: block;
      float: left;
      list-style-type: none;
    }
    .nav-links li a {
      float: left;
      width: 120px;
      height: 68px;
      text-decoration: none;
      text-transform: capitalize;
      color: #666666;
      font-size: 12px;
      text-align: center;
      padding-top: 51px;
      border-left-width: 1px;
      border-left-style: solid;
      border-left-color: #cecece;
      }
    .nav-links li a:hover {
      color: #ffffff;
      background-position: center bottom;
    }
    li.borderx2 {
      border-right-width: 1px;
      border-right-style: solid;
      border-right-color: #cecece;
    }
    
    .divider {
      background-image: url(images/divider.jpg);
      background-repeat: no-repeat;
      padding: 20px;
      height: 6px;
      width: 960px;
     
    }
    
    
    
    
    
    
    .sidebar-list li {
      list-style-type: none;
       color: #2C5923;
       font-size:14px;
      margin-top: 20px;
      padding-bottom: 10px;
      
    }
    
    #content {
     
      height: 370px;
      width: 650px;
      background-image: url(images/LiquorPricesBox.jpg);
      background-repeat: no-repeat;
      padding-top: 20px;
      padding-right: 20px;
      padding-bottom: 30px;
      padding-left: 20px;
    }
    #hor-minimalist-b
    {
        font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
        color:#000
        font-size: 12px;
        background: #fff;
        margin: 45px;
        width: 480px;
        border-collapse: collapse;
        text-align: left;
    }
    #hor-minimalist-b th
    {
        font-size: 14px;
        font-weight: normal;
        color: #0000;
        padding: 10px 10px;
        border-bottom: 2px solid #6678b1;
    }
    #hor-minimalist-b td
    {
        border-bottom: 1px solid #ccc;
        color: #000;
        padding: 6px 8px;
    }
    #hor-minimalist-b tbody tr:hover td
    {
        color: #009;
    }
    
    
    .barbox {
        width:900px;
        margin: 0 auto;
        border: 4px solid #333333;
        background: #333333;
        text-align:center;
        color:#000;
        font-family: Arial, Helvetica, sans-serif;
      font-size: 12px;
      color: #000000;
    }
    
          
    #barbox {
        height: 1100px;
        width: 1180px;
        margin: 30px auto;
        background: #000000;
        overflow: auto;
        font-size: 0.8em;
        font-family: Arial, Helvetica, sans-serif;
      font-size: 12px;
      color: #000000;
    }
    
    .containercolour { position: relative; background: #2a2a2a; margin: 0px 5px; } /* BACKGROUND OF ROUNDED BOX */
    .rtopcolour, .rbottomcolour { display: block; background:#FFFFFF; } /* OUTTER EDGE COLOUR */
    .rtopcolour *, .rbottomcolour *{ display: block; width:644; height: 1px; overflow: hidden; background: #2a2a2a; } /* BACKGROUND OF ROUNDED BOX */
    
    
    .r1{ margin: 0px 5px; line-height: 1px; }
    .r2{ margin: 0px 3px; line-height: 1px; }
    .r3{ margin: 0px 2px; line-height: 1px; }
    .r4{ margin: 0px 1px; line-height: 1px; }
    
    
    #footer {
      float: left;
      width: 800px;
      height: 50px;
      margin-top: 10px;
      padding-top: 25px;
      text-align: center;
         color: #000000;
     
    }

  • #7
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    ok I dont see any code from your original post in your html or css. No div called barBox.

    The navigation at the top of your page changes colors when you hover over them. Is there another <li> you are trying to style?

  • #8
    Regular Coder
    Join Date
    Oct 2010
    Location
    Florence, MS
    Posts
    486
    Thanks
    10
    Thanked 33 Times in 32 Posts
    What are you trying to change it to?

    In your HTML you have you links set to FFF, then in your CSS you have your .nav-links a set to 666666 then the nav-links a:hover to ffffff. If your wanting your nav-links to be 666666 instead of FFF then change the one in the HTML page.

    Also,(off-topic) in your css you have an id as navigation but in your HTML page there is no id(or atleast I could not find it.)
    Last edited by Chris Hick; 11-18-2010 at 04:46 PM.
    Notice: If you post a problem and it gets fixed, please remember to go back and place it as solved. ;)
    I always recommend the HEAD First series of books for learning a new coding language. ^_^

  • #9
    New Coder
    Join Date
    Nov 2010
    Posts
    70
    Thanks
    6
    Thanked 0 Times in 0 Posts
    The reason I have no barBox is because I am sharing the Css file with another html document that follows a similar path. I am trying to make the Text under the div class containercolour links, but the issue is changing the color of the hyperlinks in the CSS for that div class doesn't change the color. The Home, Address, etc. are what I want to make links


    Quote Originally Posted by teedoff View Post
    ok I dont see any code from your original post in your html or css. No div called barBox.

    The navigation at the top of your page changes colors when you hover over them. Is there another <li> you are trying to style?

  • #10
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    First, take out the styles you have in the head section of your html. I think they're overwriting your style sheet in several ways.

  • #11
    New Coder
    Join Date
    Nov 2010
    Posts
    70
    Thanks
    6
    Thanked 0 Times in 0 Posts
    I did this. It doesnt change much. I'm trying to make the hyperlinks white.

    Quote Originally Posted by teedoff View Post
    First, take out the styles you have in the head section of your html. I think they're overwriting your style sheet in several ways.

  • #12
    New Coder
    Join Date
    Nov 2010
    Posts
    70
    Thanks
    6
    Thanked 0 Times in 0 Posts
    I did this. It doesnt change much. I'm trying to make the hyperlinks white.

    Quote Originally Posted by teedoff View Post
    First, take out the styles you have in the head section of your html. I think they're overwriting your style sheet in several ways.

  • #13
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by conphill View Post
    I did this. It doesnt change much. I'm trying to make the hyperlinks white.
    Now you need to create a new style. Im not at work right now, so Im trying to tell you this from memory, but I think if you do something like this:

    Code:
    <div class="containercolour">
    <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="aboutUs.html">About Us</a></li>
    </ul>
    </div>
    Then in your css:

    Code:
    .containercolour a:hover{color:blue;}
    You html and css was really a mess, so I took some things out. If that doesnt work, then when I get home I can look at the code I did for you.

  • #14
    New Coder
    Join Date
    Nov 2010
    Posts
    70
    Thanks
    6
    Thanked 0 Times in 0 Posts
    I fixed it. Just a few tweaks needed. Thanks for the help


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •