 |
08-22-2006, 07:37 PM
|
link color problem
|
Posts: 18
|
follwoing is the css file (used in websphere).now problem is a:visted is not working at all.If i change its color from balck to red.All links even without visting becomes the red.
Wht i Want is link color black(a-link),visited color blue(a:visted).
hover and active is working fine
regards
A:LINK
{
font-family:Arial,Frutiger;
font-size:12px;
font-weight:bold;
color:black;
text-decoration:none;
}
A:VISITED {
font-family:Arial,Frutiger;
font-size:12px;
font-weight:bold;
color:black;
text-decoration:none;
}
A:HOVER {
font-family:Arial,Frutiger;
font-size:12px;
font-weight:bold;
color:#D40511;
text-decoration:underline;
}
A:ACTIVE {
font-family:Arial,Frutiger;
font-size:12px;
font-weight:bold;
color:#D40511;
text-decoration:none;
|
|
|
|
|
08-22-2006, 09:29 PM
|
Re: link color problem
|
Posts: 16
|
Following example is a working one.
This example features 3 html files as you can see on the links.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Links with colors.</title>
<style type="text/css">
A:LINK
{
font-family:Arial,Frutiger;
font-size:12px;
font-weight:bold;
color:black;
text-decoration:none;
}
A:VISITED {
font-family:Arial,Frutiger;
font-size:12px;
font-weight:bold;
color:green;
text-decoration:none;
}
A:HOVER {
font-family:Arial,Frutiger;
font-size:12px;
font-weight:bold;
color:#D40511;
text-decoration:underline;
}
A:ACTIVE {
font-family:Arial,Frutiger;
font-size:12px;
font-weight:bold;
color:#D40511;
text-decoration:none;
}
</style>
</head>
<body>
<a href="linktest1.html">This is link1</a>
<a href="linktest2.html">This is link2</a>
<a href="linktest3.html">This is link3</a>
</body>
</html>
If it doesnt work in your setting, then i suspect you have some kind of css rules overriding the ones you are editing, and you'll need to dig deeper. This CSS was copied from you by the way, i only changed the a:visited color to green from black. So atleast you know your syntax is working. |
|
|
|
|
08-22-2006, 09:49 PM
|
Re: link color problem
|
Posts: 636
|
YOu can save yourself a lot of code by just doing:
Code:
a {
font-family:Arial,Frutiger;
font-size:12px;
font-weight:bold;
text-decoration:none;
}
and then just change the color depending on the state.
Code:
a:hover, a:active {
color:#D40511;
}
a:hover {
text-decoration:underline;
}
a:link {
color:black;
}
a:visited {
color:green;
}
Last edited by funkdaddu : 08-22-2006 at 09:50 PM.
|
|
|
|
|
08-23-2006, 11:00 AM
|
Re: link color problem
|
Posts: 6,743
Location: Tennessee
|
You really should do all your CSS in LOWER case. It DOES matter.
Frutiger ?? Very few people are going to have such a font. You should stick to common families, like Verdana, Arial, Helvetica, Geneva, and ALWAYs include a default fall-back of sans-serif.
I suspect your color change problem may have something to do with the cascade, can you show us the actual HTML code ??
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!
"Using or working with IE is like having to wear a 1970's polyester suit with pantyhose and a girdle, to work everyday"
Carolina Corvette Club
|
|
|
|
|
08-23-2006, 02:45 PM
|
Re: link color problem
|
Posts: 18
|
for caulix you r right code is working but not on my system.now links are coming as green only
for ladnred
here is the code for css followed by html code.using websphere 5.1
____________________________________
body {
color: black;
background-color: #FFFFFF;
font-family: Arial,Frutiger;
margin:0px;
padding:0px;
width:100%;
}
div.menu {
background-color:#FFCC00;
position:absolute;
left:0px;
top:50px;
width:160px;
height:800px;
font-family: Arial,Frutiger;
font-size:14px
color:red;
padding:10px;
}
table.menutable
{
left:0px;
position:absolute;
height:52px;
width:158px;
}
div.logo
{
background-color:#FFCC00;
top:0px;
left:0px;
height:50px;
width:100%;
}
table.logotable
{
width:120%;
}
td.logotd
{
font-family:Arial,Fritiger;
font-size:20px;
font-weight:bold;
color: #D40511;
align:right;
white-space:nowrap;
}
td.logotd2
{
font-family:Arial,Fritiger;
font-size:20px;
font-weight:bold;
color: #D40511;
align:right;
white-space:nowrap;
padding-right:135px;
}
th.reportheader
{
background-color:#FFCC00;
color:black;
font-size:12px;
}
h1
{
font-family: Arial,Frutiger;
font-size: 14px;
font-weight: bold;
color: black;
}
div.content, p
{
background-color:#FFFFFF;
position:absolute;
left:170px;
top:64px;
width:100%;
height:100%
font-family:Arial,Frutiger;
}
form,select.formfield
{
position:absolute;
font-family: Arial,Frutiger;
color:balck;
font-size:12px;
}
form
{
font-weight:bold;
}
.menulink1
{
color:#CC0000;
font-family:Arial,Frutiger;
font-size:12px;
font-weight:bold;
color:#D40511;
text-decoration:none;
}
td.menutd
{
background-repeat:no-repeat;
height:24px;
}
.contenttable
{
width: 300px;
overflow: none;
}
A:LINK
{
font-family:Arial,Frutiger;
font-size:12px;
font-weight:bold;
color:black;
text-decoration:none;
}
A:VISITED {
font-family:Arial,Frutiger;
font-size:12px;
font-weight:bold;
color:green;
text-decoration:none;
}
A:HOVER {
font-family:Arial,Frutiger;
font-size:12px;
font-weight:bold;
color:#D40511;
text-decoration:underline;
}
A:ACTIVE {
font-family:Arial,Frutiger;
font-size:12px;
font-weight:bold;
color:#D40511;
text-decoration:none;
}________________________________________________
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html" %>
<%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean" %>
<%@ page errorPage="error.jsp" %>
<html:html>
<HEAD>
<%@ page
language="java"
contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"
%>
<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<META name="GENERATOR" content="IBM WebSphere Studio">
<META http-equiv="Content-Style-Type" content="text/css">
<LINK href="../theme/Master.css" rel="stylesheet"
type="text/css">
<TITLE></TITLE>
</HEAD>
<BODY >
<div class="menu" id="menubar">
<html:link action="/a">A Report</html:link><br></br>
<html:link action="/b">B Report</html:link><br></br>
<html:link page="/help.jsp">help</html:link>
</div>
</BODY>
</html:html>
Last edited by somsahi : 08-23-2006 at 02:54 PM.
Reason: one comment delete
|
|
|
|
|
08-23-2006, 03:33 PM
|
Re: link color problem
|
Posts: 6,743
Location: Tennessee
|
You have
<div class="menu" id="menubar">, yet you have no rules for #menubar.
Try your css as:
#menubar a:link{
{
font-family:Arial,Frutiger;
font-size:12px;
font-weight:bold;
color:black;
text-decoration:none;}
See if that works for you.
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!
"Using or working with IE is like having to wear a 1970's polyester suit with pantyhose and a girdle, to work everyday"
Carolina Corvette Club
|
|
|
|
|
08-23-2006, 04:09 PM
|
Re: link color problem
|
Posts: 18
|
trying let me check and will reply within 20 minutes
|
|
|
|
|
08-23-2006, 04:12 PM
|
Re: link color problem
|
Posts: 180
Location: Hollywood, CA
|
Its not that complicated, if you want to use the same style for all of your Links you should try what funkdaddu is saying just one rule for all the links and their behaivors... later you can modify sizes and stuff with span locks or classes....
|
|
|
|
|
08-23-2006, 04:29 PM
|
Re: link color problem
|
Posts: 18
|
ok still the code is not working and font size also disturbed after trying menubar.
but your one point is noteworthy that is class =menu.
Now in my css there is one div.menu which is effecting the menu
now let me know one thing if i need to use in my link how shoould i use
like A.div.menu:link or A:div.menu:link.I wanna try that option also
<div class="menu" id="menubar">
just for experiment I replaced class=menu with class="a" but still the resule is same.may be problem as I am using html:link tag of struts
or is there any way to use inline style for changing the color of visited link
Last edited by somsahi : 08-23-2006 at 05:21 PM.
Reason: point add
|
|
|
|
|
08-23-2006, 07:17 PM
|
Re: link color problem
|
Posts: 6,743
Location: Tennessee
|
Unfortunately, I do not understand struts at all, so I can't be of much help there. If you set it up WITHOUT the struts stuff, does it work ?? If so, then you have your answer. I would do that first anyway in this case.
***edit ***
Ok, I took out all your struts stuff and tried it this way:
CSS
Quote:
body {
color: black;
background-color: #ffffff;
font-family: arial,frutiger;
margin:0px;
padding:0px;
width:100%;
}
div.menu {
background-color:#ffcc00;
position:absolute;
left:0px;
top:50px;
width:160px;
height:800px;
font-family: arial,frutiger;
font-size:14px
color:red;
padding:10px;
}
table.menutable
{
left:0px;
position:absolute;
height:52px;
width:158px;
}
div.logo
{
background-color:#ffcc00;
top:0px;
left:0px;
height:50px;
width:100%;
}
table.logotable
{
width:120%;
}
td.logotd
{
font-family:arial,fritiger;
font-size:20px;
font-weight:bold;
color: #d40511;
align:right;
white-space:nowrap;
}
td.logotd2
{
font-family:arial,fritiger;
font-size:20px;
font-weight:bold;
color: #d40511;
align:right;
white-space:nowrap;
padding-right:135px;
}
th.reportheader
{
background-color:#ffcc00;
color:black;
font-size:12px;
}
h1
{
font-family: arial,frutiger;
font-size: 14px;
font-weight: bold;
color: black;
}
div.content, p
{
background-color:#ffffff;
position:absolute;
left:170px;
top:64px;
width:100%;
height:100%
font-family:arial,frutiger;
}
form,select.formfield
{
position:absolute;
font-family: arial,frutiger;
color:balck;
font-size:12px;
}
form
{
font-weight:bold;
}
.menulink1
{
color:#cc0000;
font-family:arial,frutiger;
font-size:12px;
font-weight:bold;
color:#d40511;
text-decoration:none;
}
td.menutd
{
background-repeat:no-repeat;
height:24px;
}
.contenttable
{
width: 300px;
overflow: none;
}
a:link
{
font-family:arial,frutiger;
font-size:12px;
font-weight:bold;
color:black;
text-decoration:none;
}
a:visited {
font-family:arial,frutiger;
font-size:12px;
font-weight:bold;
color:blue;
text-decoration:none;
}
a:hover {
font-family:arial,frutiger;
font-size:12px;
font-weight:bold;
color:#d40511;
text-decoration:underline;
}
a:active {
font-family:arial,frutiger;
font-size:12px;
font-weight:bold;
color:#d40511;
text-decoration:none;
}
|
HTML
Quote:
<!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" xml:lang="en" lang="en">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="struts.css" />
</head>
<body>
<div class="menu" id="menubar">
<a href="http://www.yahoo.com">A Report</a><br></br>
<a href="http://www.google.com">B Report</a><br></br>
<a href="http://www.msnbc.com">help</a>
</div>
</body>
</html>
|
On hover the links are red with underline and bold
Visited they are blue and bold and ONLY the visited link turns blue.
So, it seems to be working just fine.
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!
"Using or working with IE is like having to wear a 1970's polyester suit with pantyhose and a girdle, to work everyday"
Carolina Corvette Club
Last edited by LadynRed : 08-23-2006 at 07:28 PM.
|
|
|
|
|
08-23-2006, 10:12 PM
|
Re: link color problem
|
Posts: 18
|
Hi lady n red thanxs for reply.
i have not checked your code yet.but I am sure the problem will remain same as u have chnaged html:link to a tag
but strtut is must for me.
so moving from office .tomorrow I will reply you
regards
|
|
|
|
|
08-23-2006, 10:38 PM
|
Re: link color problem
|
Posts: 6,743
Location: Tennessee
|
I was merely demonstrating that the code works WITHOUT the struts stuff. That tells me that is is Struts that is getting in the way.
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!
"Using or working with IE is like having to wear a 1970's polyester suit with pantyhose and a girdle, to work everyday"
Carolina Corvette Club
|
|
|
|
|
08-24-2006, 08:28 AM
|
Re: link color problem
|
Posts: 216
Name: Syed Saadat Ali
Location: Lahore, Pakistan
|
Keep going guys  | |
