My CSS script wont change text alignment on :hover!

pezbrigade · 12-21-2007, 04:19 PM

I am trying to create a link that is left aligned, but i want the text to align right when the mouse hovers over it; this isnt how its going to look, but im just trying to get the actions right:

-----------------STYLESHEET-------------

#one {

position: absolute;
width: 400px;
height: 400px;
margin: 0;
padding: 0 0 0 100px
margin-top: 50px;
border-left: 1px solid #4682B4;
border-right: 1px solid #4682B4;
font-weight: normal;
}

a.main:link {

color: 4682B4;
font-family: Georgia, serif;
font-size: 14pt;
font-weight: normal;
text-decoration: none;
padding: 0 0 0 50px;
text-align: left;
text-transform: capitalize;
}

a.main:visited {

color: 4682B4;
font-family: Georgia, serif;
font-size: 14pt;
font-weight: normal;
text-decoration: none;
padding: 0 0 0 50px;
text-align: left;
text-transform: capitalize;

}

a.main:hover {

color: 696969;
font-family: Helvetica, sans-serif;
font-size: 58pt;
font-weight: bold;
text-decoration: none;
padding: 0 0 0 0;
text-align: right;
text-transform: lowercase;
}

a.main:active {

color: 000000;
font-family: Helvetica, sans-serif;
font-size: 58pt;
font-weight: bold;
text-decoration: none;
padding: 0 0 0 0;
text-align: right;
text-transform: lowercase;
}

----------------------------/STYLESHEET---------

-----------HTML-------

<body>
<div id="one">
<a href="testmenu2.html" class="main">Home</a><br>
<a href="testmenu2.html" class="main">Bulletin Board</a><br>
<a href="testmenu2.html" class="main">Around Town</a><br>
<a href="testmenu2.html" class="main">History</a><br>
</div>

< / body>

--------/ H T M L-----

Can anyone tell what I'm doing wrong? Any help is appreciated!!!!!!!!!

popcorn · 12-21-2007, 06:11 PM

Has to be in this order:

A:link
A:visited
A:active
A:hover

Pyro-Fire · 12-22-2007, 05:18 AM

Your css works correctly, the problem is you have put it on your webpage wrong.
I have tried a few attempts at embedding the css file into the html, but it didnt really work. just put it in a .css file and use this html in your head tag:

Code:

<link rel="stylesheet" href="{CSS FILE NAME}" />

replacing {css file name} with the filename of the css file, and directory. (so if it is in the folder "css_files", use "css_files/something.css")

12-21-2007, 04:19 PM	#1 (permalink)
pezbrigade Registered User Join Date: Dec 2007 Posts: 2 OS: Mac OSX	My CSS script wont change text alignment on :hover! I am trying to create a link that is left aligned, but i want the text to align right when the mouse hovers over it; this isnt how its going to look, but im just trying to get the actions right: -----------------STYLESHEET------------- #one { position: absolute; width: 400px; height: 400px; margin: 0; padding: 0 0 0 100px margin-top: 50px; border-left: 1px solid #4682B4; border-right: 1px solid #4682B4; font-weight: normal; } a.main:link { color: 4682B4; font-family: Georgia, serif; font-size: 14pt; font-weight: normal; text-decoration: none; padding: 0 0 0 50px; text-align: left; text-transform: capitalize; } a.main:visited { color: 4682B4; font-family: Georgia, serif; font-size: 14pt; font-weight: normal; text-decoration: none; padding: 0 0 0 50px; text-align: left; text-transform: capitalize; } a.main:hover { color: 696969; font-family: Helvetica, sans-serif; font-size: 58pt; font-weight: bold; text-decoration: none; padding: 0 0 0 0; text-align: right; text-transform: lowercase; } a.main:active { color: 000000; font-family: Helvetica, sans-serif; font-size: 58pt; font-weight: bold; text-decoration: none; padding: 0 0 0 0; text-align: right; text-transform: lowercase; } ----------------------------/STYLESHEET--------- -----------HTML------- <body> <div id="one"> <a href="testmenu2.html" class="main">Home</a><br> <a href="testmenu2.html" class="main">Bulletin Board</a><br> <a href="testmenu2.html" class="main">Around Town</a><br> <a href="testmenu2.html" class="main">History</a><br> </div> < / body> --------/ H T M L----- Can anyone tell what I'm doing wrong? Any help is appreciated!!!!!!!!! Last edited by pezbrigade; 12-21-2007 at 04:21 PM.

12-21-2007, 06:11 PM	#2 (permalink)
popcorn Registered User Join Date: Dec 2007 Posts: 3 OS: XP sp2	Re: My CSS script wont change text alignment on :hover! Has to be in this order: A:link A:visited A:active A:hover

12-22-2007, 05:18 AM	#3 (permalink)
Pyro-Fire Registered User Join Date: Dec 2007 Posts: 24 OS: xp	Re: My CSS script wont change text alignment on :hover! Your css works correctly, the problem is you have put it on your webpage wrong. I have tried a few attempts at embedding the css file into the html, but it didnt really work. just put it in a .css file and use this html in your head tag: Code: <link rel="stylesheet" href="{CSS FILE NAME}" /> replacing {css file name} with the filename of the css file, and directory. (so if it is in the folder "css_files", use "css_files/something.css")