Help - Search - Members - Calendar
Full Version: Changing link color in dw, css or html
HTMLHelp Forums > Web Authoring > Markup (HTML, XHTML, XML)
deep
Sep 4 2008, 10:37 PM
Hi,
iam working on a page which is full of links. i want to change the menu bar links color without effecting other links. Is it possible in dw or html or css. Could any body please solve my problem.

Deep
Frederiek
Sep 5 2008, 02:04 AM
See the FAQ entry: How can I have two sets of links with different colors?
deep
Sep 5 2008, 02:20 AM
Frederiek,
Thanks, but i already tried it, its not working.
Frederiek
Sep 5 2008, 02:21 AM
Can you post the URL (address) of a page that demonstrates the problem and shows your attempts?
deep
Sep 5 2008, 02:24 AM
Sorry,
iam still working on the page. its not uploaded.
Frederiek
Sep 5 2008, 02:28 AM
Without any code, we won't be able to help you. Upload it as a test page, which you remove afterwards, so we can see how you coded and styled the links.
deep
Sep 5 2008, 02:31 AM
Ok,
i will give you the code.
here is the code in css

a.1:link {color:#FFFFFF}
a.1:visited{color:#FFFFFF}
a.1:hover{color:#C1D8F9}

and this is the code of table that contains links.

<td><span class="style9"><a href="#">Ahmedabad</a> <span class="style7">|</span> <a href="#">Bangalore</a> <span class="style7">|</span> <a href="#">Chandigarh</a> <span class="style7">|</span> <a href="#">Chenna</a>i </span><span class="style7">|</span><span class="style9"> <a href="#">Delhi</a> </span><span class="style7">|</span><span class="style9"> <a href="#">Goa</a> </span><span class="style7">|</span><span class="style9"> <a href="#">Hyderabad</a> </span><span class="style7">|</span><span class="style9"> <a href="#">Jaipur</a> </span><span class="style7">|</span><span class="style9"> <a href="#">Kolkata</a> </span><span class="style7">|</span><span class="style9"> <a href="#">Lucknow</a> </span><span class="style7">|</span><span class="style9"> <a href="#">Mumbai</a> </span><span class="style7">|</span><span class="style9"> <a href="#">Nagpur</a> </span><span class="style7">|</span><span class="style9"> <a href="#">Patna </a></span><span class="style7">|</span><span class="style9"> <a href="#">Pune</a> </span><span class="style7">|</span><span class="style9"> <a href="#">Thirupuram</a></span></td>

Deep,

Frederiek
Sep 5 2008, 02:39 AM
You declare rules for links with class="1", but you haven't given any link a class. Give the class a more appropriate name (I'm not sure if a number only is allowed). See the example in the FAQ.

BTW, do you really need all those <span> tags? I doubt it.
deep
Sep 5 2008, 02:41 AM
Ok,
let me try it.
deep
Sep 5 2008, 02:54 AM
Here is my code after editing.
<td><a class="1" href="home.html">Ahmedabad</a> <span class="style7">|</span> <a class="1" href="#">Bangalore</a> <span class="style7">|</span> <a class="1" href="#">Chandigarh</a> <span class="style7">|</span> <a class="1" href="#">Chennai</a> </span><span class="style7">|</span><a class="1" href="#">Delhi</a><span class="style7">|</span><a class="1" href="#">Goa</a> </span><span class="style7">|</span><a class="1" href="#">Hyderabad</a><span class="style7">|</span><a href="#" class="1">Jaipur</a> </span><span class="style7">|</span><a href="#" class="1">Kolkata</a><span class="style7">|</span><a href="#" class="1">Lucknow</a><span class="style7">|</span><a href="#" class="1">Mumbai</a> </span><span class="style7">|</span><a href="#" class="1">Nagpur </a><span class="style7">|</span><a href="#" class="1">Patna</a><span class="style7">|</span><a href="#" class="1">Pune</a><span class="style7">|</span><a href="#" class="1">Thirupuram</a></td>
deep
Sep 5 2008, 03:11 AM
But it still has problem.
Frederiek
Sep 5 2008, 03:16 AM
Doesn't that work? How have you coded and styled the other set links?

This works:
CSS:
a:link {color:#FF0000;}
a:visited{color:#FF0000;}
a:hover{color:#0000FF;}
a.ex1:link {color:#dddddd;}
a.ex1:visited{color:#cccccc;}
a.ex1:hover{color:#C1D8F9;}

HTML:
<a class="ex1" href="home.html">Ahmedabad</a> | <a class="ex1" href="#">Bangalore</a> | <a class="ex1" href="#">Chandigarh</a>
<a href="home.html">Ahmedabad</a> | <a href="#">Bangalore</a> | <a href="#">Chandigarh</a>
deep
Sep 5 2008, 03:19 AM
may be i put my css in the wrong place of the page
Frederiek
Sep 5 2008, 03:20 AM
PS, I just left out all the SPAN's and changed the colors to see something (my browsers default background is white).
Frederiek
Sep 5 2008, 03:22 AM
The CSS should go in <style type="text/css"></style> tags in the HEAD.
deep
Sep 5 2008, 03:31 AM
this is my code starting from <head>
<style type="text/css">

<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
.style5 {font-family: Geneva, Arial, Helvetica, sans-serif}
#apDiv1 {
position:absolute;
left:754px;
top:309px;
width:246px;
height:293px;
z-index:1;
}
#form1 #Search {
background-image: url(images/search.jpg);
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
color: #FFFFFF;
width: 60px;
height: 21px;
}
#apDiv2 {
position:absolute;
left:4px;
top:163px;
width:228px;
height:225px;
z-index:2;
}
#apDiv3 {
position:absolute;
left:4px;
top:389px;
width:228px;
height:166px;
z-index:3;
}
#apDiv4 {
position:absolute;
left:754px;
top:162px;
width:246px;
height:144px;
z-index:4;
}
#apDiv5 {
position:absolute;
left:29px;
top:196px;
width:369px;
height:108px;
z-index:1;
background-image: url(images/banner.jpg);
}
#apDiv6 {
position:absolute;
left:2px;
top:127px;
width:60px;
height:35px;
z-index:1;
background-image: url(images/btn.jpg);
}
#apDiv7 {
position:absolute;
left:3px;
top:152px;
width:62px;
height:35px;
z-index:1;
}
#apDiv8 {
position:absolute;
left:66px;
top:152px;
width:62px;
height:35px;
z-index:2;
}
.btns {
font-size: 13px;
font-weight: bold;
text-align: left;
line-height: normal;
vertical-align: middle;
font-family: Geneva, Arial, Helvetica, sans-serif;
}
a:link {
color: #930000;
text-decoration: none;
}
a:visited {
color: #930000;
text-decoration: none;
}
a:hover {
color: #150079;
text-decoration: none;
}
.style9 .1 {
color: #FFFFFF;
}
a {
color: #FFFFFF;
}

a.1:link {color:#dddddd;}
a.1:visited{color:#cccccc;}
a.1:hover{color:#C1D8F9;}

#apDiv9 {
position:absolute;
left:133px;
top:153px;
width:62px;
height:35px;
z-index:3;
}
#apDiv10 {
position:absolute;
left:188px;
top:153px;
width:62px;
height:35px;
z-index:4;
}
a:active {
text-decoration: none;
}
#apDiv11 {
position:absolute;
left:0px;
top:190px;
width:222px;
height:152px;
z-index:1;
overflow: hidden;
}
#apDiv12 {
position:absolute;
left:0px;
top:333px;
width:226px;
height:126px;
z-index:2;
background-color: #EEEEEE;
background-image: url(images/back1.jpg);
}
body,td,th {
font-family: Geneva, Arial, Helvetica, sans-serif;
}
#apDiv13 {
position:absolute;
left:0px;
top:28px;
width:319px;
height:79px;
z-index:3;
}
#apDiv14 {
position:absolute;
left:643px;
top:26px;
width:299px;
height:81px;
z-index:4;
}
#apDiv15 {
position:absolute;
left:223px;
top:190px;
width:495px;
height:343px;
z-index:5;
}
#apDiv16 {
position:absolute;
left:223px;
top:534px;
width:247px;
height:222px;
z-index:6;
}
#apDiv17 {
position:absolute;
left:471px;
top:534px;
width:247px;
height:222px;
z-index:7;
}
#apDiv18 {
position:absolute;
left:719px;
top:370px;
width:277px;
height:341px;
z-index:8;
}
#apDiv19 {
position:absolute;
left:719px;
top:217px;
width:278px;
height:152px;
z-index:9;
overflow: hidden;
}
#apDiv20 {
position:absolute;
left:223px;
top:757px;
width:247px;
height:232px;
z-index:10;
}
#apDiv21 {
position:absolute;
left:719px;
top:712px;
width:277px;
height:236px;
z-index:11;
}
#apDiv22 {
position:absolute;
left:719px;
top:949px;
width:277px;
height:67px;
z-index:12;
}
#apDiv23 {
position:absolute;
left:471px;
top:757px;
width:247px;
height:232px;
z-index:13;
}
#apDiv15 {
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
}
#apDiv16 {
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
}
#apDiv17 {
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
}
#apDiv24 {
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
}
#apDiv11 {
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
}
#apDiv19 {
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
}
#apDiv25 {
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
}
#apDiv18 {
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
}
#apDiv22 {
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
}
#apDiv21 {
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
}
#apDiv26 {
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
}
#apDiv20 {
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
}
#apDiv23 {
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
}
.link {
color: #FFFFFF;
}
-->
</style>

<style type="text/css">
<!--
#apDiv24 {
position:absolute;
left:0px;
top:343px;
width:222px;
height:177px;
z-index:14;
}
#apDiv25 {
position:absolute;
left:0px;
top:521px;
width:222px;
height:189px;
z-index:15;
}
-->
</style>
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
#apDiv26 {
position:absolute;
left:177px;
top:1134px;
width:742px;
height:120px;
z-index:16;
}
#apDiv27 {
position:absolute;
left:0px;
top:176px;
width:1003px;
height:33px;
z-index:17;
background-color: #27B64B;
}
#apDiv28 {
position:absolute;
left:62px;
top:166px;
width:79px;
height:14px;
z-index:17;
}
.style10 {font-size: 15px}
-->
</style>
Frederiek
Sep 5 2008, 03:37 AM
Try changing the class name as I did in of course both the CSS and the links. I start to believe I'm right about only numbers not being allowed in class names., as that wouldn't work, but with the change, it did.

BTW, you don't need so many <style> tags, you can put all the rules in just one style tag.
deep
Sep 5 2008, 03:50 AM
Ok let me try it
deep
Sep 5 2008, 04:02 AM
Frederiek,
Thank you very much. This worked after i changed my code with yours. Iam really happy because of you. Thank you again

Keep in touch

Deep,
Frederiek
Sep 5 2008, 04:41 AM
You're welcome.
pandy
Sep 5 2008, 10:46 AM
QUOTE(Frederiek @ Sep 5 2008, 10:37 AM) *

I start to believe I'm right about only numbers not being allowed in class names.,


They can't start with a number.
http://www.w3.org/TR/REC-CSS2/syndata.html#q4
Possible also this. I'm not totally sure it applies to class names.
http://www.w3.org/TR/html4/types.html#type-name
Frederiek
Sep 5 2008, 12:36 PM
Yep, that's what I figured. Just didn't bother to look it up.
In deep's case, there was only a number, which effectively didn't work.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2010 Invision Power Services, Inc.