CSS Help
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
User Name:
Password:
Remember me
Go Back   Dev Shed Forums > Web Design > CSS Help
Reload this Page

How to display two different links in a page?

Discuss How to display two different links in a page? in the CSS Help forum on Dev Shed.
How to display two different links in a page? Cascading Style Sheets (CSS) forum discussing all levels of CSS, including CSS1, CSS2 and CSS Positioning. CSS provides a robust way of applying standardized design concepts to your web pages.

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
« Previous Thread | Next Thread »  
Thread Tools Search this Thread Rate Thread Display Modes
 
Unread Dev Shed Forums Sponsor:
  #1  
Old June 8th, 2004, 05:45 AM
Cesark Cesark is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Nov 2003
Location: Barcelona
Posts: 25 Cesark User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
How to display two different links in a page?
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:
Code:
<html>
<head>

<title>Link format test</title>

<link href="StylesCSS/link1.css" rel="stylesheet" type="text/css">
<link href=" StylesCSS/link2.css" rel="stylesheet" type="text/css">
</head>
<body>



Then I have applied the styles thus:
Code:
<a href="index.aspx" class="letterLink1">Home</a>
<a href="forgotten_password.aspx" class="letterLink2">I have forgotten my password</a>



And both css files are as follow:

link1.css
Code:
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
Code:
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,
Cesar
Reply With Quote
  #2  
Old June 8th, 2004, 05:51 AM
acidfourtyfive's Avatar
acidfourtyfive acidfourtyfive is offline
Since 439000000
Dev Shed Novice (500 - 999 posts)
  
Join Date: May 2004
Location: Canada
Posts: 807 acidfourtyfive User rank is Second Lieutenant (5000 - 10000 Reputation Level)acidfourtyfive User rank is Second Lieutenant (5000 - 10000 Reputation Level)acidfourtyfive User rank is Second Lieutenant (5000 - 10000 Reputation Level)acidfourtyfive User rank is Second Lieutenant (5000 - 10000 Reputation Level)acidfourtyfive User rank is Second Lieutenant (5000 - 10000 Reputation Level)acidfourtyfive User rank is Second Lieutenant (5000 - 10000 Reputation Level)acidfourtyfive User rank is Second Lieutenant (5000 - 10000 Reputation Level) 
Time spent in forums: 1 Week 23 h 4 m 29 sec
Reputation Power: 90
what's wrong is you are calling two css files and it's using the last one for the link tags...defining something twice without have a way to tell it which one, you'll have to make a class for each a: you want to use



make one css file and do this in your CSS file
Code:
        .linkstyleclass1 
         {
         css statments
         }
        .linkstyleclass2
         {
         css statments
         }


and this in your html:
Code:
        <a href="my link.html" class="linkstyleclass1">
        
        <a href="my other link.html" class="linkstyleclass2">


that's what that class property is for...
Reply With Quote
  #3  
Old June 8th, 2004, 06:54 AM
Cesark Cesark is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Nov 2003
Location: Barcelona
Posts: 25 Cesark User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
It doesn' t work, I have put it thus:

Type_Links.css file:
Code:
.linkGreen1
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;
}



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

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


Then in the html:
Code:
<html>
<head>

<title>Link format test</title>

<link href=" StylesCSS/Type_Links.css " rel="stylesheet" type="text/css">
</head>
<body>
...


<a href="my link.html" class="linkGreen1"></a>        
<a href="my other link.html" class="linkBlue1"></a>
Reply With Quote
  #4  
Old June 8th, 2004, 07:24 AM
acidfourtyfive's Avatar
acidfourtyfive acidfourtyfive is offline
Since 439000000
Dev Shed Novice (500 - 999 posts)
  
Join Date: May 2004
Location: Canada
Posts: 807 acidfourtyfive User rank is Second Lieutenant (5000 - 10000 Reputation Level)acidfourtyfive User rank is Second Lieutenant (5000 - 10000 Reputation Level)acidfourtyfive User rank is Second Lieutenant (5000 - 10000 Reputation Level)acidfourtyfive User rank is Second Lieutenant (5000 - 10000 Reputation Level)acidfourtyfive User rank is Second Lieutenant (5000 - 10000 Reputation Level)acidfourtyfive User rank is Second Lieutenant (5000 - 10000 Reputation Level)acidfourtyfive User rank is Second Lieutenant (5000 - 10000 Reputation Level) 
Time spent in forums: 1 Week 23 h 4 m 29 sec
Reputation Power: 90
Ok try this.

in your HTML

<style>
#linkthing1
{
css statments
}
#linkthing2
{
css statments
}
</style>
<a class="linkthing1">link1</a>
<a class="linkthing2">link2</a>

I'm the laziest person I know, and I'm too lazy too meet others...
Reply With Quote
  #5  
Old June 8th, 2004, 07:46 AM
Cesark Cesark is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Nov 2003
Location: Barcelona
Posts: 25 Cesark User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
I have tried another thing and it works fine, look:
(What do you think?)

link1.css file
Code:
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:
Code:
<html>
<head>

<title>Link format test</title>

<link href="StylesCSS/link1.css" rel="stylesheet" type="text/css">

</head>
<body>


Then I have applied the styles thus:
Code:
<a href="index.aspx" class="letterLink1">Home</a>
<a href="forgotten_password.aspx" class="letterLink2">I have forgotten my password</a>
Reply With Quote
  #6  
Old June 8th, 2004, 07:56 AM
acidfourtyfive's Avatar
acidfourtyfive acidfourtyfive is offline
Since 439000000
Dev Shed Novice (500 - 999 posts)
  
Join Date: May 2004
Location: Canada
Posts: 807 acidfourtyfive User rank is Second Lieutenant (5000 - 10000 Reputation Level)acidfourtyfive User rank is Second Lieutenant (5000 - 10000 Reputation Level)acidfourtyfive User rank is Second Lieutenant (5000 - 10000 Reputation Level)acidfourtyfive User rank is Second Lieutenant (5000 - 10000 Reputation Level)acidfourtyfive User rank is Second Lieutenant (5000 - 10000 Reputation Level)acidfourtyfive User rank is Second Lieutenant (5000 - 10000 Reputation Level)acidfourtyfive User rank is Second Lieutenant (5000 - 10000 Reputation Level) 
Time spent in forums: 1 Week 23 h 4 m 29 sec
Reputation Power: 90
I didn't know you could do that. I just learned something

By that I mean
Code:
 element.class:pseudoclass
Reply With Quote
  #7  
Old June 11th, 2004, 09:52 AM
loremipsum loremipsum is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Jun 2004
Location: Bristol UK
Posts: 29 loremipsum User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 4 h 34 m 48 sec
Reputation Power: 0
tidying up
I find you don't need to repeat everything either... only the attributes that are changing (or are specified elsewhere as overall a:link { -styles-} declaration)

So you can have:

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

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

which involves a lot less duplicate typing if you want to change things later on...

Mike
Reply With Quote
  #8  
Old June 11th, 2004, 01:29 PM
Glide Glide is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: May 2003
Posts: 56 Glide User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 6
Just as a tip, I'm pretty sure the correct syntax is element.class:meta rather than element:meta.class. I wouldn't normally mention such technicalities, but I think it did actually cause my css not to work in one particular browser before I changed.

I tend to do...
Code:
.linkclass:link, .linkclass:visited, .linkclass:active, .linkclass:hover {
   mainstyles;
}
.linkclass:hover {
   justchangedstyles;
}
Reply With Quote
  #9  
Old June 11th, 2004, 06:44 PM
loremipsum loremipsum is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Jun 2004
Location: Bristol UK
Posts: 29 loremipsum User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 4 h 34 m 48 sec
Reputation Power: 0
Doh! You're right. Sorry!
Reply With Quote
Reply

Viewing: Dev Shed Forums > Web Design > CSS Help > How to display two different links in a page?

« Previous Thread | Next Thread »

Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Linear Mode Linear Mode
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump


Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 





© 2003-2008 by Developer Shed. All rights reserved. DS Cluster 4 hosted by Hostway. 
Stay green...Green IT