...

View Full Version : Simple Problem HyperLink text not changing color



conphill
11-17-2010, 01:50 AM
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



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;
}

MattF
11-17-2010, 01:54 AM
Examples:



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


etc.

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

conphill
11-18-2010, 05:12 PM
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




Examples:



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


etc.

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

teedoff
11-18-2010, 05:15 PM
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.

Chris Hick
11-18-2010, 05:19 PM
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.

conphill
11-18-2010, 05:32 PM
I appreciate the help.

HTML

<!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


* {
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;

}

teedoff
11-18-2010, 05:40 PM
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?

Chris Hick
11-18-2010, 05:44 PM
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.)

conphill
11-18-2010, 05:44 PM
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



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?

teedoff
11-18-2010, 06:42 PM
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.

conphill
11-18-2010, 08:15 PM
I did this. It doesnt change much. I'm trying to make the hyperlinks white.


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.

conphill
11-18-2010, 09:04 PM
I did this. It doesnt change much. I'm trying to make the hyperlinks white.


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.

teedoff
11-18-2010, 09:22 PM
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:


<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:


.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.

conphill
11-18-2010, 09:30 PM
I fixed it. Just a few tweaks needed. Thanks for the help



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum