Solved

custom links

Posted on 2001-08-14
11
176 Views
Last Modified: 2010-04-25
I am trying to set different styles for certain links on a page, ideally getting rid of the underline aswell.

Will I have to use images or can I use something to set colours of unvisited/visited/active links at different points on the page.

If anyone can give me any advice I would be grateful.

Thanks

Daniel
0
Comment
Question by:regodab
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
  • 2
  • +3
11 Comments
 
LVL 30

Expert Comment

by:weed
ID: 6384629
The only way to use different colors for different links on the same page is to use CSS. But to just get rid of underlines and change the colors of links from their default check your Page Options dialog.
0
 
LVL 3

Expert Comment

by:Snazzy_Graphics
ID: 6385684
Yep you want to head over to the CSS control panel and define some styles. Since you want to change how it handles links in different ways in different spots on the page, you need custom link styles, which you then apply to each link.

You can do this for this page only or with an external file.

For no underline, set decoration to "none."

--Snazzy
0
 
LVL 1

Expert Comment

by:sturobinson17
ID: 6391062
here's a quick example showing what snazzy graphics suggested.

<html>

<head>

<style><!--
A { text-decoration:none }
//--></style>

</head>

<body>
<p>
<a href="...">This is not underlined</a>
</p>
</body>

</html>
 
0
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 1

Expert Comment

by:sturobinson17
ID: 6391072
try this aswell :-)

<html>
<head>
<style>
<!--
a:link {color: yellow}
a:active {color: green}
a:hover {color: blue}
a:visited {color: red}
-->
</style>
<body>
<a href="http://www.yahoo.com">
Yahoo
</a>
</body>
</html>

and here's a useful link u may want to take a look at

http://website.lineone.net/~alan.duncan/howto/linkprop.htm
0
 
LVL 3

Expert Comment

by:Snazzy_Graphics
ID: 6391098
Yep, that's how it would come out. Good examples.

Thing is, as far as DW way, you need a custom stylesheet (either page or ext.) in order to be able to reassign colors throughout the page--i.e. you are not changing global links, you need named styles.

--Snazzy
0
 
LVL 8

Accepted Solution

by:
klykken earned 150 total points
ID: 6413379
HI,
If you only are going to change this on one page, defining the css inside the head element is not a problem. You should however make sure that the different sets are set in the right order:

<style type="text/css">
<!--
a:link {color: #336699; text-decoration: none}
a:visited {color: #555555; text-decoration: none}
a:hover {color: #000000; text-decoration: underline}
a:active {color: #cccccc; text-decoration: none}
-->
</style>

This works with dw. Press F10 to open source view and insert the code above between <head> and </head>.

To make custom link classes as Snazzy mentioned above, make a link for example like this:
<a href="file.html" class="one">link</a>

and in the style sheet cpecify style for that perticular style this way:
<style type="text/css">
<!--
a:link.one {color: #336699; text-decoration: none}
a:visited.one {color: #555555; text-decoration: none}
a:hover.one {color: #000000; text-decoration: underline}
a:active.one {color: #cccccc; text-decoration: none}
-->
</style>

This way you can add different types of styles to different types of links.
--
klykken

0
 

Expert Comment

by:albert_stephen
ID: 6435821
you can also specify different color in the body tag using
link="#ffffff", alink="#cccccc", vlink="#000000" etc
0
 

Author Comment

by:regodab
ID: 6443779
Sorry for the delay in getting back to this question. Maybe I am misreading the answers but what I am trying to do is on one part of the page have my a:link style as white with no underline and at another point have it as blue with an underline.

Sorry if this has already been answered but if anyone has any pointers I would be grateful.

Thanks

Daniel
0
 

Author Comment

by:regodab
ID: 6444021
Sorry for the delay in getting back to this question. Maybe I am misreading the answers but what I am trying to do is on one part of the page have my a:link style as white with no underline and at another point have it as blue with an underline.

Sorry if this has already been answered but if anyone has any pointers I would be grateful.

Thanks

Daniel
0
 
LVL 8

Expert Comment

by:klykken
ID: 6444045
Without properties for hover, active etc, the code gets really simple for this:

<html>
<head>
<title>Your Title</title>
<style type="text/css">
<!--
a.one {color: white; text-decoration: none}
a.two {color: blue; text-decoration: underline}
-->
</style>
</head>
<body bgcolor="#666666" text="#000000">
<a href="file1.html" class="one">white link, no underline</a>
<a href="file2.html" class="two">blue link, underlined</a>
</body>
</html>

For properties on hover, active etc, see sturobinson and my comment above.
--
klykken
0
 

Author Comment

by:regodab
ID: 6444177
Thanks for coming back and explaining. I understand style sheets a lot more now and am definatly going to use them more now.

Thanks

Daniel
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Debug PHP with Dreamweaver 6 914
Adobe Products Forum? 3 165
need cgi page to refresh one time only after launch 11 150
CS6 Adobe Dreamweaver Alphanumeric list 4 122
For those who don't know, Adobe Dreamweaver is a popular commercial web editor that enables you to design, build and manage complex websites. The editor is a WYSIWYG (What You See Is What You Get) web editor, which means that you can create your web…
Adobe Dreamweaver CS5 is a WYSIWYG web page editor that has advanced HTML, CSS, and Javascript rendering functionality and is probably the most well-known HTML editor available. Much of Dreamweaver's appeal centers around the Design View interfac…

740 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question