text in link move down _ px

[mattover-matter]

I got this:

.navlink {
width: 80px;
text-align: center;
text-decoration: none;
font-size: 12px;
height: 22px;
}

but, I need the text in it to be down _ # px from the top. What is the best wau yo do this?

[pardicity3]

Your gonna want to learn up on some positioning (http://www.w3.org/TR/REC-CSS2/visuren.html#positioning-scheme). The best way to do this would probably be to add this into your CSS declaration:

position: asbolute;
top: 25px;

Good luck.

[redhead]

<style>

a.navlink:hover {
position: relative;
top: 1px; /* however many pixels down you want it to move */
}

</style>

<a href="#" class="navlink">monkeys</a>
<a href="#" class="navlink">random</a>
<a href="#" class="navlink">the inevitable "blah"</a>
<a href="#" class="navlink">another link</a>
<a href="#" class="navlink">pleh...</a>

edit... you could add a left: Xpx if you wanted it to look like its coming out the page or something...

edit2... ah... you didnt want it on hover... never mind, im sure you get the general idea

[pardicity3]

Originally posted by redhead

<a href="#" class="navlink">the inevitable "blah"</a>


Lol :thumbsup:

Not gonna lie redhead, that position change on hover gives a nice little effect. It makes me actually feel like I am pushing something down...oh the joy. Though this method is no good if someone puts their mouse right at the top of the link.

[mattover-matter]

thanks for scaring me :(

What do you mean?

[pardicity3]

You talkin to me? (leaves moffia mode...)

I just meant that if you have the text moving too far on hover it's probably not a good idea, especially if you have it moving so far that the mouse won't be over the text anymore. If that happens the link will just keep jumping back and forth.

There is nothing wrong with positioning the text, I was just being odd, no need to become worried!!

[mattover-matter]

oh, I was not going to move it on hover :rolleyes:

[meow]

Padding?

[mattover-matter]

well, you can see what I did with it at this link (http://www20.brinkster.com/amplifieddesign/Index.html)