CSS simple problem

P

Parsa44

New Member
Messages
232
Reaction score
0
Points
0
I have always wanted to have some red rollover links and some green rollover links on my page i followed this guide to try and do this:

http://www.echoecho.com/csslinks.htm


i did exactly as it said but for some reason it doesnt work for me, here is my code:

The problem is that the links appear already underlined, and when i roll over they are still underlined.

Code: 
body  {
    font-size: 24px;
    font-family:  Agency FB, Arial Narrow, Sylfaen, Microsoft Sans Serif, Times New Roman;
    color: #FFFF00;
    background: #000000;
    margin: 0;
    padding: 0;
    text-align: left;
}
.SmallGreen {
    Font-family: Agency FB, Arial Narrow, Sylfaen, Microsoft Sans Serif, Times New Roman;
    color: #00FF00;
    font-size: 20px;
    text-align; left;
}
.SmallGreen a:link  {
    color: #00FF00;
    text-decoration: none;
    font-size: 24px;
}
.SmallGreen a:visited  {
    color: #00FF00;
    text-decoration: none;
    font-size: 20px;
}
.SmallGreen a:hover {
    color: #00FF00;
    text-decoration: underline;
    font-size: 20px;
}
.SmallGreen a:active {
    color: #00FF00;
    text-decoration: none;
    font-size: 20px;
}


.HeaderLink {
    color: #FF0000;
    Font-family: Agency FB, Arial Narrow, Sylfaen, Microsoft Sans Serif, Times New Roman;
    text-align: center;
    font-size:25px;
}
.HeaderLink a:link  {
    color: #FF0000;
    text-decoration: none;
    font-size: 25px;
}
.HeaderLink a:visited  {
    color: #FF0000;
    text-decoration: none;
    font-size: 25px;
}
.HeaderLink a:hover {
    color: #FF0000;
    text-decoration: underline;
    font-size: 25px;
}
.HeaderLink a:active {
        color: #FF0000;
        text-decoration: underline;
        font-size: 25px;
}


.Title {
    color: #FF0000;
    font-family: Algerian, Stencil, Rockwell Extra Bold, Arial Black, Times New Roman;
    font-size: 30px;
    text-align: center;
}
.SubTitle {
    color: #FF0000;
    Font-family: Agency FB, Arial Narrow, Sylfaen, Microsoft Sans Serif, Times New Roman;
    text-align: center;
    font-size:25px;
    text-decoration: underline;
}
.Text {
    color: #FFFF00;
    Font-family: Agency FB, Arial Narrow, Sylfaen, Microsoft Sans Serif, Times New Roman;
    font-size: 24px;
    text-align: left;
}
.TextCentered {
    color: #FFFF00;
    Font-family: Agency FB, Arial Narrow, Sylfaen, Microsoft Sans Serif, Times New Roman;
    font-size: 24px;
    text-align: left;
}
.container { 
    width: 46em; 
    background: #000000;
    margin: 0 auto; 
    border: 1px solid #000000;
    text-align: left; 
} 
.header { 
    background: #000000; 
} 
.mainContent {
    border: 1px solid #FF0000;
    margin: 0 1.5em 0 13em;
    background: #000000;
} 
.navigation {
    float: left; 
    width: 12em; 
    background: #000000; 
    padding: 5px 0; 
    border: 1px solid #FF0000;
}
 
kbjradmin

kbjradmin

New Member
Messages
512
Reaction score
2
Points
0
try this:

Code: 
.SmallGreen a:link, .SmallGreen a:active, .SmallGreen a:visited{
font-family: Agency FB, Arial Narrow, Sylfaen, Microsoft Sans Serif, Times New Roman;
color: #00ff00;
size: 24px;
text-decoration: none;
}

.SmallGreen a:hover{
font-family: Agency FB, Arial Narrow, Sylfaen, Microsoft Sans Serif, Times New Roman;
color: #00ff00;
size: 24px;
text-decoration: underline;
}
 
P

Parsa44

New Member
Messages
232
Reaction score
0
Points
0
why does hover get its own tag and the rest dont?


btw thanks for your support i really appriciate it.
 
Last edited:
xPlozion

xPlozion

New Member
Messages
868
Reaction score
1
Points
0
also, if :link, :active and :visited aren't used, they will get their looks from the standard a tag. i just use a and a:hover when doing links on my site.
 
P

Parsa44

New Member
Messages
232
Reaction score
0
Points
0
unfortunatley it still doesnt work, i really cannot understand where the problem is here.

when i use:

Code: 
body a:link  {
    color: red;
	text-decoration: none;
}
body a:visited  {
	color: red;
	text-decoration: none;
}
body a:hover {
	color: black;
	text-decoration: none;
	background-color: yellow;
}
body a:active {
        color: blue;
		text-decoration: none;
}

it works fine, but that doesnt help me because i need three diffrent link hovers....
 
Last edited:
Scoochi2

Scoochi2

New Member
Messages
185
Reaction score
0
Points
0
Code: 
a:hover.hovergreen {
	color: yellow;
}

a:hover.hoverred {
	color: red;
}

a:hover#hoverblue{
	color: red;
}
Use the above snippet as a quick example of using multiple styles for the same type of element. In your HTML:
Code: 
<a href='redpage.html' class='hoverred'>This link is red on hover.</a><br>
<a href='greenpage.html' class='hovergreen'>This link is green on hover.</a>
<a href='bluepage.html' id='hoverblue'>This link is blue on hover.</a><br>
The name of the class/id is irrelevant, so long as it matches up with your markup.
 
Last edited:
P

Parsa44

New Member
Messages
232
Reaction score
0
Points
0
Im still extreamly confused, how does that relate back to my problem? Shall i remove a:link a:active and a:visited?
 
goldy300

goldy300

New Member
Messages
33
Reaction score
0
Points
0
You were putting your class first and then a:hover second.

.class a:hover{}

Make it

a:hover.class{}
 
Scoochi2

Scoochi2

New Member
Messages
185
Reaction score
0
Points
0
Parsa44 said:
Im still extreamly confused, how does that relate back to my problem? Shall i remove a:link a:active and a:visited?
Click to expand...
Actually, yes. In your initial post you mentioned that you only wanted different links to be different colours when you hover on them. If you're happy with everything else staying at the defaults, the only thing you need to do is to tell it what you want to do on the hover.

See my above post for how to do that, using classes or ids.

(note, the 'blue id' in my previous post will make the text red because I copy pasted from the red and forgot to change the colour, you'll see why when you look at it ;))
 
P

Parsa44

New Member
Messages
232
Reaction score
0
Points
0
I still cant seem to solve all the problem, i managed to get small green to work but headerlink doesnt seem to work.

Code: 
body  {
	font-size: 24px;
	font-family:  Agency FB, Arial Narrow, Sylfaen, Microsoft Sans Serif, Times New Roman;
	color: #FFFF00;
	background: #000000;
	margin: 0;
	padding: 0;
	text-align: left;
}



.Title {
	color: #FF0000;
	font-family: Algerian, Stencil, Rockwell Extra Bold, Arial Black, Times New Roman;
	font-size: 30px;
	text-align: center;
}
.SubTitle {
	color: #FF0000;
	Font-family: Agency FB, Arial Narrow, Sylfaen, Microsoft Sans Serif, Times New Roman;
	text-align: center;
	font-size:25px;
	text-decoration: underline;
}
.Text {
	color: #FFFF00;
	Font-family: Agency FB, Arial Narrow, Sylfaen, Microsoft Sans Serif, Times New Roman;
	font-size: 24px;
	text-align: left;
}
.TextCentered {
	color: #FFFF00;
	Font-family: Agency FB, Arial Narrow, Sylfaen, Microsoft Sans Serif, Times New Roman;
	font-size: 24px;
	text-align: left;
}
.container { 
	width: 46em; 
	background: #000000;
	margin: 0 auto; 
	border: 1px solid #000000;
	text-align: left; 
} 
.header { 
	background: #000000; 
} 
.mainContent {
	border: 1px solid #FF0000;
	margin: 0 1.5em 0 13em;
	background: #000000;
} 
.navigation {
	float: left; 
	width: 12em; 
	background: #000000; 
	padding: 5px 0; 
	border: 1px solid #FF0000;
}
a.SmallGreen:link {
	text-decoration: none;
    color: #00FF00;
	Font-family: Agency FB, Arial Narrow, Sylfaen, Microsoft Sans Serif, Times New Roman;
	color: #00FF00;
	font-size: 20px;
	text-align; left;
	
}
a.SmallGreen:visited  {
	color: #00FF00;
	Font-family: Agency FB, Arial Narrow, Sylfaen, Microsoft Sans Serif, Times New Roman;
	color: #00FF00;
	font-size: 20px;
	text-align; left;
	text-decoration: none;
}
a.SmallGreen:hover {
	color: #00FF00;
	text-decoration: underline;
}
a.SmallGreen:active {
    color: #00FF00;
	text-decoration: underline;
}




.HeaderLink {
	color: #FF0000;
	Font-family: Agency FB, Arial Narrow, Sylfaen, Microsoft Sans Serif, Times New Roman;
	text-align: center;
	font-size:25px;
}
.HeaderLink a:link  {
    color: #FF0000;
	text-decoration: none;
	font-size: 25px;
}
.HeaderLink a:visited  {
	color: #FF0000;
	text-decoration: none;
	font-size: 25px;
}
.HeaderLink a:hover {
	color: #FF0000;
	text-decoration: underline;
	font-size: 25px;
}
.HeaderLink a:active {
        color: #FF0000;
		text-decoration: underline;
		font-size: 25px;
}
 
Last edited:
ichwar

ichwar

Community Advocate
Community Support
Messages
1,454
Reaction score
7
Points
0
Code: 
.HeaderLink {
	color: #FF0000;
	Font-family: Agency FB, Arial Narrow, Sylfaen, Microsoft Sans Serif, Times New Roman;
	text-align: center;
	font-size:25px;
}
a.HeaderLink:link  {
    color: #FF0000;
	text-decoration: none;
	font-size: 25px;
}
a.HeaderLink:visited  {
	color: #FF0000;
	text-decoration: none;
	font-size: 25px;
}
a.HeaderLink:hover {
	color: #FF0000;
	text-decoration: underline;
	font-size: 25px;
}
a.HeaderLink:active {
        color: #FF0000;
		text-decoration: underline;
		font-size: 25px;
}

replace your header section (the last 5 groups with this code.
Let me know it this still doesn't work for you.
 
You must log in or register to reply here.
Top