[SixOfEleven]

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.

[SixOfEleven]

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.

[Xioshin]

SixOfEleven, 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.

[SixOfEleven]

Xioshin, on 21 Apr, 2009 - 11:08 AM, said:

SixOfEleven, 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?

[SixOfEleven]

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. 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.

[calebjonasson]

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;
}

[Daegan]

calebj, 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.

[SixOfEleven]

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.

[crazyjugglerdrummer]

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!

[SixOfEleven]

crazyjugglerdrummer, 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. Never even tried CSS until a week ago.

[piduuu]

SixOfEleven, on 22 Apr, 2009 - 06:49 PM, said:

crazyjugglerdrummer, 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. 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!