How to display two different links in a page?

L

liunx

Guest
I want to show in a page two different link styles, to achieve this I have created two css files, one for each link style, and I have attached it in the page thus:

<html>
<head>

<title>Link format test</title>

<link href=http://www.webdeveloper.com/forum/archive/index.php/"StylesCSS/link1.css" rel="stylesheet" type="text/css">
<link href=http://www.webdeveloper.com/forum/archive/index.php/" StylesCSS/link2.css" rel="stylesheet" type="text/css">
</head>
<body>



Then I have applied the styles thus:

<a href=http://www.webdeveloper.com/forum/archive/index.php/"index.aspx" class="letterLink1">Home</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"forgotten_password.aspx" class="letterLink2">I have forgotten my password</a>



And both css files are as follow:

link1.css

a:link {
font-family: Arial;
font-size: 12px;
color: #669966;
text-decoration: none;
font-weight: bold;
}
a:hover {
font-family: Arial;
font-size: 12px;
color: #568156;
text-decoration: underline;
font-weight: bold;

}
a:active {
font-family: Arial;
font-size: 12px;
color: #568156;
text-decoration: underline;
font-weight: bold;
}
.letterLink1 {
font-family: Arial;
font-size: 12px;
color: #669966;
text-decoration: none;
font-weight: bold;

}




link2.css

a:link {
font-family: Arial;
font-size: 10px;
color: #669966;
text-decoration: underline;

}
a:hover {
font-family: Arial;
font-size: 10px;
color: #FFCC66;
text-decoration: underline;
}
a:active {
font-family: Arial;
font-size: 10px;
color: #FFCC66;
text-decoration: underline;
}
.letterLink2 {
font-family: Arial;
font-size: 10px;
color: #669966;
text-decoration: underline;
}



But when I load the page, the link1 a:hover and a:active are showed as link2 a:hover and a:active. What is wrong?

Thank you,
CesarThey have the same selector with the same content so the last one read wins.:confused: And what is the solution? They are two different style sheets files (link1 and link2), both with different colors when a:hover and a:active.. I don' t understand what is the selector. I am new with css, and these css styles are created with DreamWeaver, although the code seems easily readable.

ThanksSomebody knows how can I solve this simple problem please? I only want to put two different links in a page.In link1 try

.letterlink1 a:link {}
.letterlink1 a:hover {}
...

and in link2 try

.letterlink2 a:link {}
.letterlink2 a:hover []
...

Then in your HTML use

<a class="letterlink1" ...>xxxx</a>
<a class="letterlink2" ...>xxxx</a>It does not work. If I do this, the letter appearance is correct, but the link appearance when I put the mouse over it does not change.I have tried another thing and it works fine, look:
(And, What do you think?)

link1.css file

a.letterLink1
{
font-family: Arial;
font-size: 12px;
color: #669966;
text-decoration: none;
font-weight: bold;
}

a.letterLink1:hover
{font-family: Arial;
font-size: 12px;
color: #568156;
text-decoration: underline;
font-weight: bold;
}

a.letterLink1:active
{font-family: Arial;
font-size: 12px;
color: #568156;
text-decoration: underline;
font-weight: bold;
}





a.letterLink2
{
font-family: Arial;
font-size: 11px;
color: #4962A0;
text-decoration: underline;
}

a.letterLink2:hover
{
font-family: Arial;
font-size: 11px;
color: #FF6600;
text-decoration: underline;
}

a.letterLink2:active
{
font-family: Arial;
font-size: 11px;
color: #FF6600;
text-decoration: underline;
}


Then:

<html>
<head>

<title>Link format test</title>

<link href=http://www.webdeveloper.com/forum/archive/index.php/"StylesCSS/link1.css" rel="stylesheet" type="text/css">

</head>
<body>


Then I have applied the styles thus:

<a href=http://www.webdeveloper.com/forum/archive/index.php/"index.aspx" class="letterLink1">Home</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"forgotten_password.aspx" class="letterLink2">I have forgotten my password</a>My solution would have been:

.letterlink1 a {}
.letterlink1 a:hover {}

.letterlink2 a {}
.letterlink2 a:hover []



<div class="linkletter1">
<a ...>xxxx</a>
</div>

<div class="letterlink2">
<a ...>xxxx</a>
</div>

It makes the code shorter.This code it doesn't work:

link1.css file

.letterLink1 a {}
.letterLink1 a:hover {
font-family: Arial;
font-size: 12px;
color: #568156;
text-decoration: underline;
font-weight: bold;
}

.letterLink1 a:active {
font-family: Arial;
font-size: 12px;
color: #568156;
text-decoration: underline;
font-weight: bold;
}



.letterLink2 a {}
.letterLink2 a:hover {
font-family: Arial;
font-size: 11px;
color: #FF6600;
text-decoration: underline;
}

.letterLink2 a:active {
font-family: Arial;
font-size: 11px;
color: #FF6600;
text-decoration: underline;
}


And, on the page:

<html>
<head>
<title>Link format test</title>

<link href=http://www.webdeveloper.com/forum/archive/index.php/"StylesCSS/link1.css" rel="stylesheet" type="text/css">

</head>
<body>
...

<a href=http://www.webdeveloper.com/forum/archive/index.php/"index.aspx" class="letterLink1">Home</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"forgotten_password.aspx" class="letterLink2">I have forgotten my password</a>



..And is it shorter?The class is applied to a container around the a elements. It's shorter if there's more than one link in the container.If there is more than one link in the class:

link1.css file

.letterLink1 a {}
.letterLink1 a:hover {
font-family: Arial;
font-size: 12px;
color: #568156;
text-decoration: underline;
font-weight: bold;
}

.letterLink1 a:active {
font-family: Arial;
font-size: 12px;
color: #568156;
text-decoration: underline;
font-weight: bold;
}



.letterLink2 a {}
.letterLink2 a:hover {
font-family: Arial;
font-size: 11px;
color: #FF6600;
text-decoration: underline;
}

.letterLink2 a:active {
font-family: Arial;
font-size: 11px;
color: #FF6600;
text-decoration: underline;
}


And, on the page:

<html>
<head>
<title>Link format test</title>

<link href=http://www.webdeveloper.com/forum/archive/index.php/"StylesCSS/link1.css" rel="stylesheet" type="text/css">

</head>
<body>
...
<div class="letterLink1">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"index.aspx">Home</a>
</div>

<div class="letterLink2">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"forgotten_password.aspx" >I have forgotten my password</a>
</div>



If there is only one link in each class then you can do it either way.I have put it thus, but it doesn' t work: (Is it correct?)

.letterLink1 a {

font-family: Arial;
font-size: 12px;
color: #669966;
text-decoration: none;
font-weight: bold;
}

.letterLink1 a:hover {
font-family: Arial;
font-size: 12px;
color: #568156;
...


..and I have put it as well thus, but it doesn' t work either:

.letterLink1 a {}

.letterLink1 a:hover {
font-family: Arial;
font-size: 12px;
color: #568156;
...


Are you sure that your code is correct?Of course I need this letter in 'letterLink1':

font-family: Arial;
font-size: 12px;
color: #669966;
text-decoration: none;
font-weight: bold;


..when I am not over the link1..



And this letter in 'letterLink2':

font-family: Arial;
font-size: 11px;
color: #4962A0;
text-decoration: underline;


..when I am not over the link2..Try this code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>testing</title>
<style type="text/css">
<!--
.letterLink1 a {
font-family: Arial;
font-size: 12px;
color: #568156;
text-decoration: underline;

}
.letterLink1 a:hover {
font-weight: bold;
}
.letterLink2 a {
font-family: Arial;
font-size: 8px;
color: #FF6600;
text-decoration: underline;
}
.letterLink2 a:hover {
font-weight: bold;
}
-->
</style>
</head>
<body>
<div class="letterLink1">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"index.aspx">Home</a>
</div>

<div class="letterLink2">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"forgotten_password.aspx" >I have forgotten my password</a>
</div>
</body>
</html>Hey!, I have seen that the problem was the way I applied the styles on the page:

Only works thus:

<div class="letterLink1"><a href=http://www.webdeveloper.com/forum/archive/index.php/"index.aspx">Home</a></div>
<div class="letterLink2"><a href=http://www.webdeveloper.com/forum/archive/index.php/"forgotten_password.aspx">I have forgotten my password</a></div>


Not thus:

<a href=http://www.webdeveloper.com/forum/archive/index.php/"index.aspx" class="letterLink1">Home</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"forgotten_password.aspx" class="letterLink2">I have forgotten my password</a>


Why this happens? With 'my' system happens the opposite thing, only it works if the css style is inside the 'href' tag (<a href.. class="">).".letterlink2" means we choose an element with a class of letterlink2.

".letterlink2 a" means we choose the "a" elements WITHIN an element of letterlink2.

"a.letterlink2" would be an "a" element with a class of letterlink2.

Make sense?
 
You must log in or register to reply here.
Back
Top