Tek-Tips is the largest IT community on the Internet today!
Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!
-
Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
CSS - two sets of anchor (a) link settings? 2
- Thread starter Trusts
- Start date
-
1
- #2
Yes, if you can uniquely identify each set (i.e. by id, class or parent elements).
-------------------------------------------------------
Mark,
[URL unfurl="true"]http://aspnetlibrary.com[/url]
[URL unfurl="true"]http://mdssolutions.co.uk[/url] - Delivering professional ASP.NET solutions
[URL unfurl="true"]http://weblogs.asp.net/marksmith[/url]
-------------------------------------------------------
Mark,
[URL unfurl="true"]http://aspnetlibrary.com[/url]
[URL unfurl="true"]http://mdssolutions.co.uk[/url] - Delivering professional ASP.NET solutions
[URL unfurl="true"]http://weblogs.asp.net/marksmith[/url]
- Thread starter
- #3
HI ca8msm,
Thanks. Here are some particulars. Here is part of a .css file....
#left a:link {
color: #CC0000;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
background-color: #666666;
}
#left a:hover {
color: #FF0000;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal
}
#left a:visited {
color: #CC0000;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal
}
#linky5 {
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: bold;
text-decoration: none;
}
#linky5 a:link {
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: bold;
text-decoration: none;
}
#linky5 a:hover {
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: bold;
text-decoration: underline;
}
#linky5 a:visited {
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: bold;
text-decoration: none;
}
How do I apply the classes? Like this...
<Div Class=linky5"> or is it <Div Class=linky4;a:visited> ?? or is it different?
Also yes, if you did notice - the link, hover, and visited are all white. Long story.
THanks,
KB
Thanks. Here are some particulars. Here is part of a .css file....
#left a:link {
color: #CC0000;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
background-color: #666666;
}
#left a:hover {
color: #FF0000;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal
}
#left a:visited {
color: #CC0000;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-style: normal
}
#linky5 {
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: bold;
text-decoration: none;
}
#linky5 a:link {
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: bold;
text-decoration: none;
}
#linky5 a:hover {
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: bold;
text-decoration: underline;
}
#linky5 a:visited {
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: bold;
text-decoration: none;
}
How do I apply the classes? Like this...
<Div Class=linky5"> or is it <Div Class=linky4;a:visited> ?? or is it different?
Also yes, if you did notice - the link, hover, and visited are all white. Long story.
THanks,
KB
You've used the # symbol in your css, so that would mean you would have to identify the links by setting the id of the div to that identifier. e.g.
-------------------------------------------------------
Mark,
[URL unfurl="true"]http://aspnetlibrary.com[/url]
[URL unfurl="true"]http://mdssolutions.co.uk[/url] - Delivering professional ASP.NET solutions
[URL unfurl="true"]http://weblogs.asp.net/marksmith[/url]
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] >
<head>
<title>Example</title>
<style type="text/css">
#one a:link, #one a:hover, #one a:visited {color:Red;}
#two a:link, #two a:hover, #two a:visited {color:Blue;}
</style>
</head>
<body>
<div id="container">
<div id="one">
<a href="#">Anchor One</a>
<div id="two">
<a href="#">Anchor Two</a>
</div>
</div>
</body>
</html>-------------------------------------------------------
Mark,
[URL unfurl="true"]http://aspnetlibrary.com[/url]
[URL unfurl="true"]http://mdssolutions.co.uk[/url] - Delivering professional ASP.NET solutions
[URL unfurl="true"]http://weblogs.asp.net/marksmith[/url]
-
1
- #5
In other words what your CSS is saying is that any link inside an object with an ID of linky5 will get those stylings.
so your div would be:
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
so your div would be:
Code:
<div id="linky5"><a href="somehwere.html">This link will be affected by the linky5 definitions</a></div>----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.
- Thread starter
- #6
Code:
#linky5 a:link {
color: #FFFFFF;
[red] font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: bold;
text-decoration: none;[/red]
}
#linky5 a:hover {
color: #FFFFFF;
[red] font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: bold;[/red]
text-decoration: underline;
}
#linky5 a:visited {
color: #FFFFFF;
[red] font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: bold;
text-decoration: none;[/red]
}Could be shortened to:
Code:
[green]#linky5 a:hover,
#linky5 a:visited,
#linky5 a:link
{
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: bold;
text-decoration: none;
}[/green]
#linky5 a:hover
{
text-decoration: underline;
}By grouping style common to a number of elements into one rule, you gain a number of benefits:
- Less space the file takes on the server.
- Less Bandwidth will be needed (for you) to upload and (for the visitor) to download the site.
- Site will thus load faster.
[plug=shameless]
[/plug]
- Status
Similar threads
- Locked
- Question