PDA

View Full Version : A little help required please

terry
11-12-2002, 18:56/06:56PM
:hi:
Hi Over there from over here in the UK.

I am trying to make the links page on my website look more interesting/professional.

All my links are the usual www. xxxxxxx.co.uk (underlined)

How do I make the links look like regular text that changes appearance when the mouse moves over it?

Hope you understand what I am saying, and thanks for reading this plea. Regards from Sussex (UK)

Terry
WebSavvy
11-12-2002, 19:06/07:06PM
Hi terry, and welcome to the forums! You can do that through CSS. If you'd like to see CSS links in action where I have used it on my site just go to www.websavvy.cc and then right click your mouse to view source code and you'll see a live example.

The CSS codes must go between the <head></head> tags on your .html page.

Good Luck! :)
Blue
11-12-2002, 20:01/08:01PM
Hi Terry! :hi: Welcome to the forums....

I'd like to point out a couple of things -->

First, I'm not sure if you were refering to removing the underlines as well as making the text change, but if so, I would recommend that you NOT remove the underlines (unless all your links will be differentiated otherwise, such as a colored background). This, IMO, makes your sites' visitors have to work hard to find all the links, and could be a possible detraction. IMO.

Second, CSS is a very powerful language, not too hard to learn, which can greatly help you in the management and presentation of your website(s). I would urge you to look into using it as much as you can. You can start here (http://www.w3.org/Style/CSS/), if you like.

And lastly, a minor correction from Debs post above -->

CSS doesn't have to be used strictly in the <head></head> section of your code. It can also be applied inline, which just means that it can be applied to a single (or more) element by placing it in the <body></body> section, and applied only to the element(s) in question.

However, I prefer to use Debs method, placing the CSS into an external file, and linking to it in the <head></head> section, in order to reduce code bloat.

:cheers:
scottiecl
11-12-2002, 20:09/08:09PM
Hi Terry-

When I first started, I found the tutorials at www.echoecho.com to be easy to follow. (Ignore their SEO tutorial though...)

What you are talking about is a pretty simple CSS thing where you designate a different color for each "link type"

.class1 a:link { color:#ffffff; text-decoration:none; }
.class1 a:active { color:#003399; text-decoration:none; }
.class1 a:visited { color:#ffff99; text-decoration:none; }
.class1 a:hover { color:#ff6699; text-decoration:none; }

The above code creates a link that is is not underlined and changes color they way you described.

This code came from an external style sheet but it can be put in the <head></head> section of your page as well.

For consistency and ease of making changes, it is really easy to make an external style sheet. Then you can make changes in one page instead of every page when you need to.
scottiecl
11-12-2002, 20:24/08:24PM
Whoops! Didn't see Blue's post when I posted.

Only remove underlines when the text is clearly a link, such as in a navigation bar or other clearly defined area.

Please Do NOT use CSS to disguise links in the text areas and do not underline or color text that is NOT a link.

Very confusing for the user!
terry
12-12-2002, 04:38/04:38AM
:hi:

Thanks for the replies. I will let you know how I get on.

Thanks again

Regards

Terry:)
terry
12-12-2002, 05:29/05:29AM
:hi:
Hi Scottie,

I must be a bit dim today.. the code that you suggested...
I pasted the lot into the body of a test page, and all hell broke loose,,,, well actually not a lot happened, it just displayed the text.

Any suggestions?

Cheers

Terry
scottiecl
12-12-2002, 10:25/10:25AM
Sorry-

I didn't finish the thought- that code was just an example of how you would change the colors and take off the underline.

Let's create a simple stylesheet. Create a new page and put the code from my previous post in it. Save it as style.css in the main folder of your site (the same folder your home page is in).

Now, in the head section of your home page, put in this:

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

I am assuming you are creating a navigation area, so we will use a div tag to format your links:

<div class="class1">
<a href="link1.htm">Link 1 </a><br>
<a href="link2.htm">Link 2 </a><br>
<a href="link3.htm">Link 3 </a><br>
</div>

Now view your page- the links should be white so if the page is white, change the color code on the first "link" attribute.

If you want another set of links in different colors, you can create a class2 and assign new colors in the stylesheet, then assign the class to the set of links.

There are tons of ways to use CSS and this is just the way I do it- for more details, check out a CSS tutorial to see all the things you can do!
kneelsit
12-12-2002, 20:49/08:49PM
http://www.webreference.com/html/tutorials/ (http://)

I found the above site quite useful - extremely comprehensive and leads you by the hand from HTML through to CSS.