Jump to content


Photo

Help on Link Decorating


  • This topic is locked This topic is locked
5 replies to this topic

#1 Solaria

Solaria

    Stirge

  • Members
  • PipPipPipPip
  • 119 posts
  • IGN:-None-


Posted 09 April 2008 - 10:18 AM

Hi, I've been learning a lot on W3Schools.com website about HTML, XHTML, CSS and ASP. I've practically looked through all the tutorials and learned quite a lot. However, I'm in need of some help.

I've had a look at my colleges website, Here and went into the source code and tried having a look around and having a look in their CSS but I can't seem to find what I'm after. Nor is what I want on W3Schools.com website.

See the links on the main page? Such as the following links:

QUOTE
Request an Application Pack
The Principal
Why come to OSFC
Results
Student Destinations
Mission Statement
The Area
Housing
Shopping
Leisure


Well, you see them as they are now, but when you scroll over them, they go into a black colour. I know they are underlined both as a link and when rolled over, what I would like to know is, how do they make the underline grey and the text blue?

Cheers,

-Solaria

Edited by Solaria, 09 April 2008 - 10:19 AM.

"The people who are crazy enough to think they can change the world are the ones that do." - Unknown



Please support our sponsors and mapletip. Don't block ads if you want mapletip to survive! If you do not want to have ads, simply Subscribe to mapletip today!

#2 Soaa-

Soaa-

    Ed's body... it's mine...!

  • MT Awards Creator
  • 5433 posts
  • Location:The City Under
  • IGN:UnluckysparX


Posted 09 April 2008 - 04:16 PM

Don't trust college websites. They're usually terribly written.

Try this:

CODE
a:link
{
color: red;
}

a:hover
{
color: blue;
}

a:visited
{
color: pink;
}

a:active
{
color: orange;
}


Of course, you can add more styling in each section, such as text-decoration. You can also use class and ID selectors too, in the following manner.

CODE
a.menu:link
a#home:link


Hope this helps!
Behold, I will corrupt your seed,
and spread dung upon your faces

Malachi 2:3

Still love you, muh friends. <3

#3 Solaria

Solaria

    Stirge

  • Members
  • PipPipPipPip
  • 119 posts
  • IGN:-None-


Posted 10 April 2008 - 03:14 PM

Thanks, Soaa, but that isn't quite what I was looking for.

I can do that already but what I wanted to do was make well, for example:

-a:link would be simply blue colour or any colour, and it would be default underlined, however, the underline would be a different colour, such as grey.

-a:hover would be simply a different colour such as black, and it would also be default underlined, however, the underline now would be black as well.

Could you find that code or create it for me perhaps? I've tried having a little play around with the ''text-decoration'' properties myself but can't seem to find an acceptable solution to my problem.

Thanks, for the help mush1z.gif

-Solaria
"The people who are crazy enough to think they can change the world are the ones that do." - Unknown

#4 Soaa-

Soaa-

    Ed's body... it's mine...!

  • MT Awards Creator
  • 5433 posts
  • Location:The City Under
  • IGN:UnluckysparX


Posted 10 April 2008 - 04:23 PM

As far as I know, there's no way to only change the underline color. You'll need images for that.
Behold, I will corrupt your seed,
and spread dung upon your faces

Malachi 2:3

Still love you, muh friends. <3

#5 MarthHunter

MarthHunter

    Ribbon Pig

  • Members
  • PipPip
  • 22 posts
  • IGN:MarthHunter


Posted 10 April 2008 - 08:50 PM

After reviewing the links closely, and looking at it very hard, I found out that they CHEATED! mush1k.gif

What you see as "underline" is just the bottom border, and the color of that CAN be changed.

This is the CSS code for the links (directly copied from their source)
CODE
.link {

border-bottom:1px solid #dbd5c5;

color:#326ea1;

text-decoration:none;

voice-family:inherit;

}

a:hover,ul li a:hover {

border-bottom-color:#000;

color:#000;

}


Hope this helps you mush1n.gif

Edited by MarthHunter, 10 April 2008 - 08:53 PM.


#6 Soaa-

Soaa-

    Ed's body... it's mine...!

  • MT Awards Creator
  • 5433 posts
  • Location:The City Under
  • IGN:UnluckysparX


Posted 11 April 2008 - 07:43 AM

QUOTE(MarthHunter @ Apr 10 2008, 10:50 PM) <{POST_SNAPBACK}>
After reviewing the links closely, and looking at it very hard, I found out that they CHEATED! mush1k.gif

What you see as "underline" is just the bottom border, and the color of that CAN be changed.

This is the CSS code for the links (directly copied from their source)
CODE
.link {

border-bottom:1px solid #dbd5c5;

color:#326ea1;

text-decoration:none;

voice-family:inherit;

}

a:hover,ul li a:hover {

border-bottom-color:#000;

color:#000;

}


Hope this helps you mush1n.gif

Touché. I didn't think of that one, even though I've used a similar technique before. mush1k.gif
Behold, I will corrupt your seed,
and spread dung upon your faces

Malachi 2:3

Still love you, muh friends. <3




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users