10 Replies - 1101 Views - Last Post: 06 May 2009 - 08:57 PM

#1 SixOfEleven  Icon User is offline

  • using Caffeine;
  • member icon

Reputation: 945
  • View blog
  • Posts: 6,342
  • Joined: 18-October 08

Problem with links in CSS

Posted 21 April 2009 - 11:04 AM

I'm trying to remake my website. It was done about 3 years ago and looks pretty amaturish. I've been looking at samples of CSS. I've come up with a CSS but it doesn't work right for the links. This is my CSS

body 
{
    font-family: Tahoma, Verdana, Arial; font-size: 12pt;
    width: 800px;
    border: medium single #000000;
    color: Black;
}
a:link
{
    color: Yellow;
    text-decoration: none;
    font-family: Arial;
    font-size: 12pt;
}
a:visited
{
    color: Blue;
    text-decoration: none;
    font-family: Arial;
    font-size: 12pt;
}
a:hover
{
    color: Purple;
    text-decoration: underline, blink;
    font-family: Arial;
    font-size: 14pt;
}
a:active
{
    color: red;
    text-decoration: none;
    font-family: Arial;
    font-size: 12pt;
}
.code
{
    border: thin double #0000FF;
    background-color: #C0C0C0;
    color: Blue;
    font-family: Courier New, Courier, Sans-Serif;
    font-size: 10pt;
    
}
.title
{
    font-family: Arial;
    width: 750px;
    font-size: 16pt;
    border: medium double #000000;
    
    background-color: Silver;
    color: White;
    text-align: center;
    font-weight: bold;
}
div
{
    width: 750px;
    color: Black;
    text-align: left;
}



The body works fine, the code, title and div all work fine. I'm having problems with the link. All of the links show up Blue. When I hover over a link the font changes size and the color changes to Purple. When a link is clicked it turns red and the font is right. I want the links to show Yellow (just a sample color that I'm going to change for the actual site.) I want visited links to be Blue. When a mouse hovers I want the font to increase, change to Purple, underline and blink. When a link is clicked it turns Red and goes to normal size. Any help would be appreciated.

Is This A Good Question/Topic? 0
  • +

Replies To: Problem with links in CSS

#2 SixOfEleven  Icon User is offline

  • using Caffeine;
  • member icon

Reputation: 945
  • View blog
  • Posts: 6,342
  • Joined: 18-October 08

Re: Problem with links in CSS

Posted 21 April 2009 - 11:55 AM

I don't know what I did but for whatever reason the colors are working now. Still having problems with the hover changing to underline and blinking. But that is not terribly important.
Was This Post Helpful? 0
  • +
  • -

#3 Xioshin  Icon User is offline

  • D.I.C Regular

Reputation: 4
  • View blog
  • Posts: 264
  • Joined: 05-November 08

Re: Problem with links in CSS

Posted 21 April 2009 - 12:08 PM

View PostSixOfEleven, on 21 Apr, 2009 - 10:55 AM, said:

I don't know what I did but for whatever reason the colors are working now. Still having problems with the hover changing to underline and blinking. But that is not terribly important.


Could you link it, so I could see visually what you are doing?

From the looks of the code, you shouldn't have any trouble with the a:hover code working.
Was This Post Helpful? 0
  • +
  • -

#4 SixOfEleven  Icon User is offline

  • using Caffeine;
  • member icon

Reputation: 945
  • View blog
  • Posts: 6,342
  • Joined: 18-October 08

Re: Problem with links in CSS

Posted 21 April 2009 - 01:03 PM

View PostXioshin, on 21 Apr, 2009 - 11:08 AM, said:

View PostSixOfEleven, on 21 Apr, 2009 - 10:55 AM, said:

I don't know what I did but for whatever reason the colors are working now. Still having problems with the hover changing to underline and blinking. But that is not terribly important.


Could you link it, so I could see visually what you are doing?

From the looks of the code, you shouldn't have any trouble with the a:hover code working.


I have made a few changes to the CSS, here is the newest version:

body 
{
    font-family: Tahoma, Arial, Sans-Serif;
    font-size: 12pt;
    width: 800px;
}
a:link
{
    color: Yellow;
    text-decoration: none;
    font-family: Arial;
    font-size: 10pt;
}
a:visited
{
    color: Blue;
    text-decoration: none;
    font-family: Arial;
    font-size: 10pt;
}
a:hover
{
    color: Purple;
    text-decoration: underline, blink;
    font-family: Arial;
    font-size: 12pt;
}
a:active
{
    color: red;
    text-decoration: none;
    font-family: Arial;
    font-size: 10pt;
}
.code
{
    width: 800px;
    border: thin double #0000FF;
    background-color: #C0C0C0;
    color: Blue;
    font-family: 'Courier New' , Courier, Monospace;
    font-size: 10pt;
}
.title
{
    font-family: Arial;
    width: 800px;
    font-size: 16pt;
    border: medium double #000000;
    
    background-color: Silver;
    color: White;
    text-align: center;
    font-weight: bold;
}
.text
{
    font-family: Times New Roman;
    font-size: 12pt;
    border: none;
    width: 800px;
    color: Black;
    text-align: left;
}
.inline
{
    font-size: 10pt;
    color: gray;
    background-color: #ffffcc;
    border-right: blue thin dotted;
    border-top: blue thin dotted;
    border-left: blue thin dotted;
    border-bottom: blue thin dotted;
}



This is a simple HTML page that demonstrates what I'm doing:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Title Page</title>
    <link href="rpgtutorial.css" rel="stylesheet" type="text/css" />
</head>
<body>
   <div class="title">This is the title of the tutorial I'm working on.
   </div>
   <p />
   <div class="text">This is regular text would go.</div>
   <p />
   <div class="code">Code for the tutorial would go here.</div>
   <p />
   <div>Comments will be listed like this:<br />
       <br />
       A list of links will be as follows:</div>
   <div>
       <a href="http://www.jtmbooks.com">My Home Page</a><br />
       <a href="http://xna-tutorials.blogspot.com">My Blog</a><br />
       <a href="http://www.dreamincode.net">Dream in Code</a><br />
   </div>
</body>
</html>



This is the link to the page on my web server:

Demo Web Page

I've tried to view the page in IE-7 and FireFox. The first and third link appear Blue and the second appears Yellow. When I hover the text size changes and the color changes but no underline or blinking. Is the problem with the CSS or the HTML?
Was This Post Helpful? 0
  • +
  • -

#5 SixOfEleven  Icon User is offline

  • using Caffeine;
  • member icon

Reputation: 945
  • View blog
  • Posts: 6,342
  • Joined: 18-October 08

Re: Problem with links in CSS

Posted 21 April 2009 - 07:32 PM

I found what the problem was with the colors in the CSS I was using. Whenever I viewed the page I had already clicked the link in the browser so it would show up as the wrong color. :P I still can't figure out when the hover will not underline or blink though. :(

This is the hover code:

a:hover
{
    color: Purple;
    text-decoration: underline, blink;
    font-family: Arial;
    font-size: 12pt;
}



I looked it up and it looks like it should work. Can't figure that one out. Otherwise my CSS works perfectly.
Was This Post Helpful? 0
  • +
  • -

#6 calebjonasson  Icon User is offline

  • $bert = new DragonUnicorn(); $bert->rawr();
  • member icon

Reputation: 209
  • View blog
  • Posts: 989
  • Joined: 28-February 09

Re: Problem with links in CSS

Posted 21 April 2009 - 09:45 PM

im not sure if this will work but have you tried:

a:hover
{
	color: Purple;
	text-decoration: underline;
	text-decoration: blink;
	font-family: Arial;
	font-size: 12pt;
}

Was This Post Helpful? 0
  • +
  • -

#7 Daegan  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 5
  • View blog
  • Posts: 67
  • Joined: 17-March 09

Re: Problem with links in CSS

Posted 22 April 2009 - 01:26 AM

View Postcalebj, on 21 Apr, 2009 - 09:45 PM, said:

im not sure if this will work but have you tried:

a:hover
{
	color: Purple;
	text-decoration: underline;
	text-decoration: blink;
	font-family: Arial;
	font-size: 12pt;
}


You can save time by saying:

a:hover
{
	color: purple;
	text-decoration: underline blink;
}



You don't use commas to separate values in CSS. If you do it just throws them out as invalid coding. You should also consider declaring a doctype so you can use the W3 Validater to help troubleshoot problems.
Was This Post Helpful? 0
  • +
  • -

#8 SixOfEleven  Icon User is offline

  • using Caffeine;
  • member icon

Reputation: 945
  • View blog
  • Posts: 6,342
  • Joined: 18-October 08

Re: Problem with links in CSS

Posted 22 April 2009 - 07:39 AM

I've modified my CSS a little. I'm not worrying about the blink anymore, just thought it would be a cool addition, don't really need it. This is the section about links:

a
{
    font-family: Arial;
    font-size: 10pt;
    text-decoration: none;
}
a:link
{
    color: springgreen;
}
a:visited
{
    color: Blue;
}
a:hover
{
    color: Purple;
    text-decoration: underline;
    font-size: 12pt;
}
a:active
{
    color: red;
}


Is this a better layout? I tried to use inheritance.
Was This Post Helpful? 0
  • +
  • -

#9 crazyjugglerdrummer  Icon User is offline

  • GAME OVER. NERD WINS.
  • member icon

Reputation: 119
  • View blog
  • Posts: 690
  • Joined: 07-January 09

Re: Problem with links in CSS

Posted 22 April 2009 - 06:00 PM

Yes, you could say its a "better" layout. It properly factors the common properties, and allows you to change them all in one place.

I tried this with the code before you factored it, and it worked fine for me:
a:hover
{
	color: Purple;
	text-decoration: underline, blink;
	font-family: Arial;
	font-size: 12pt;
	text-decoration: blink;
}

The text blinks when you hover over it fine in FF.

Usually its not always the best idea to change the size of the font on hover, because it alters the lay out of the document and can sometimes mess things up.
But hey, do whatcha want! :)
Was This Post Helpful? 0
  • +
  • -

#10 SixOfEleven  Icon User is offline

  • using Caffeine;
  • member icon

Reputation: 945
  • View blog
  • Posts: 6,342
  • Joined: 18-October 08

Re: Problem with links in CSS

Posted 22 April 2009 - 07:49 PM

View Postcrazyjugglerdrummer, on 22 Apr, 2009 - 05:00 PM, said:

Yes, you could say its a "better" layout. It properly factors the common properties, and allows you to change them all in one place.

I tried this with the code before you factored it, and it worked fine for me:
a:hover
{
	color: Purple;
	text-decoration: underline, blink;
	font-family: Arial;
	font-size: 12pt;
	text-decoration: blink;
}

The text blinks when you hover over it fine in FF.

Usually its not always the best idea to change the size of the font on hover, because it alters the lay out of the document and can sometimes mess things up.
But hey, do whatcha want! :)


Well, I was just experimenting. I've sorely neglected my web skills, haven't looked at HTML in about three years and then I was using, :cringe: Front Page and :bigger cringe: tables. :D Never even tried CSS until a week ago. :)
Was This Post Helpful? 0
  • +
  • -

#11 piduuu  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 06-May 09

Re: Problem with links in CSS

Posted 06 May 2009 - 08:57 PM

View PostSixOfEleven, on 22 Apr, 2009 - 06:49 PM, said:

View Postcrazyjugglerdrummer, on 22 Apr, 2009 - 05:00 PM, said:

Yes, you could say its a "better" layout. It properly factors the common properties, and allows you to change them all in one place.

I tried this with the code before you factored it, and it worked fine for me:
a:hover
{
	color: Purple;
	text-decoration: underline, blink;
	font-family: Arial;
	font-size: 12pt;
	text-decoration: blink;
}

The text blinks when you hover over it fine in FF.

Usually its not always the best idea to change the size of the font on hover, because it alters the lay out of the document and can sometimes mess things up.
But hey, do whatcha want! :)


Well, I was just experimenting. I've sorely neglected my web skills, haven't looked at HTML in about three years and then I was using, :cringe: Front Page and :bigger cringe: tables. :D Never even tried CSS until a week ago. :)



To make it blink with an underline this is the style code:

text-decoration: underline blink;

There are no commas to seperate the css keywords.

And font resizing in links is actually an eye catching tool if its used sparingly, and tested to make sure you are not throwing off other elements of your website.

CSS is a great tool in todays web! Have fun with it!
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1