Forum Moderators: not2easy
Please help
1) Ive got one set of links and they are working fine..its the alphabet the html for A being
<p class="a"> <a href="...........">A</a></p>
the css being
a:link
{
font-family: arial, heletica, sans-serif;
font-size:130%;
font-weight:light;
color: #000099;
text-decoration:none
}
a:visited
{
color:#CECEF6;
text-decoration:none
}
a:hover
{
color:#0099FF;
text-decoration:none
}
a:active
{
color: #CECEF6;
text-decoration:none
}
At this stage there is no underline and when I hover the letter turns to the expected colour - all good (and when I add the url of the page that it goes to I hope all the other colours will work too....)
Problem = Im trying to create another seperate link which is an image link html being
<p class="bluelink"><a href="url"><img src="bluelink.jpg" width="125" height="9"></a></p>
In css I have
p.bluelink
{
position:absolute;
left:83px;
margin-top:300px}
The image shows up at the defined place but with a rectangle around it and the following is not working
a:link
{
text-decoration:none;
}
- hence there is a rectangle going around the whole image....
Please tell me what Im not doing right- have searched the net am sure its something simple...
Ive tried various things...but with no joy (a:link.bluelink/a.bluelink:link/p.bluelink:link)
but thats not whats bought tears to my eyes....as I write this I realise that I actually want a image rollover and that seems to be alot of fun (even though Id still like to know how to have more then one set of links on a external css link for future use on this site) .....could someone please point me in the right direction...any reading material you could recommend? (Any simple syntax you could be generous with?) Id like to use x/html and css....any javascript at this stage and I will have a heart attack :)
PS dear moderators should I have rollovers under a seperate topic?
Thanking you in advance...
p.bluelink img {
border: none;
}
That should take care of it.
W3C (X)HTML Validator [validator.w3.org]
W3C CSS Validator [jigsaw.w3.org]
2) The value 'light' is not valid for the property font-weight. Perhaps you intended the value 'lighter'.
W3C - font-weight: [w3.org]
3) You can shorthand font: which makes the sheet a lot easier to follow:
{font: lighter 130% arial, heletica, sans-serif;}
4)
The image shows up at the defined place but with a rectangle around it and the following is not workinga:link
{
text-decoration: none;
}
Add the following to the CSS:
p.bluelink a img {
border-width: 0;
}
The 'rectangle' is the border that the link creates to surround the image. Removing text-decoration: will not work. You must remove the border. There are some differences between image links and text links.
5) A rollover question should be a separate thread. Let's fully answer this question here, and that question there.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
a:link
{
font: lighter 130% arial, heletica, sans-serif;
color: #009;
text-decoration: none
}
a {
text-decoration: none;
}
a:visited
{
color:#cecef6;
}
a:hover {
color: #09f;
}
a:active
{
color: #cecef6;
}
p.bluelink
{
position: absolute;
left: 83px;
margin-top: 300px;
}
p.bluelink a img {
border-width: 0;
}
</style>
</head>
<body>
<p class="bluelink">
<a href="http://www.example.com">
<img src="aaa.gif" style="width: 125px; height: 9px;" alt="" title="" />
</a>
</p>
<!--##########
1) Ive got one set of links and they are working fine..its the alphabet the html for A being
<p class="a"> <a href="...........">A</a></p>
...........................At this stage there is no underline and when I hover the letter turns to the expected colour - all good (and when I
add the url of the page that it goes to I hope all the other colours will work too....)
Problem = Im trying to create another seperate link which is an image link html being
<p class="bluelink"><a href="url"><img src="bluelink.jpg" width="125" height="9"></a></p>
...........................In css I have
p.bluelink
{
position:absolute;
left:83px;
margin-top:300px}The image shows up at the defined place but with a rectangle around it and the following is not working
a:link
{
text-decoration:none;
}- hence there is a rectangle going around the whole image....
Please tell me what Im not doing right- have searched the net am sure its something simple...
Ive tried various things...but with no joy (a:link.bluelink/a.bluelink:link/p.bluelink:link)
but thats not whats bought tears to my eyes....as I write this I realise that I actually want a image rollover and that
seems to be alot of fun (even though Id still like to know how to have more then one set of links on a external css
link for future use on this site) .....could someone please point me in the right direction...any reading material you
could recommend? (Any simple syntax you could be generous with?) Id like to use x/html and css....any
javascript at this stage and I will have a heart attack :)
PS dear moderators should I have rollovers under a seperate topic?
-->
</body>
</html>
a:link
{
font: lighter 130% arial, heletica, sans-serif;
color: #009;
text-decoration: none
}
a {
text-decoration: none;
}
I was doing a bit of streamlining for you to consider and made two errors (at least).
..................................
1) This should have been cut. I didn't mean to leave it there.
a {
text-decoration: none;
}
..................................
2) By dropping :link and and just using a{ you can drop all the extra text-decoration: none; - Not right or wrong, just another option. I intended to mention this, but was on deadline to leave for an appointment (I am never late to an appointment.) and it got by me. (That does sometimes happen. LOL)
a {
font: lighter 130% arial, heletica, sans-serif;
color: #009;
text-decoration: none
}
3) Other opinions WILL differ on the use of :link. Mine is but one. I typically do not use without specific reason to do so.
