overlay layout help, navigation transforming and html help Options

[kaylz123]

i was wondering if anyone can help me with changing my navigation.
for instance like most of the myspace overlay layouts pn here, when you hover over a link the back ground around the link and the text transform.
i am having difficulty managing to do this properly and so far have only managed to change the text.
if you dont know what i mean here is a link to a profile which does what i want >
http://www.createblog.com/layouts/preview.php?id=22481


i would also like to change all the underlined text on my page to a different colour.
please can anyone help?

[miyashu]

I'll go through this step-by-step.

First you adjust the properties for your links. Change it to your liking:

CODE

a.nav:link, a.nav:active, a.nav:visited{
background-color:000000;
color:ffffff;
font-family:arial;
font-size:8px;
text-align:center;
padding:7px;
text-decoration:none;
width:150px;
text-transform:uppercase;
font-weight:normal;
letter-spacing:1pt;
margin-bottom:1px;
}

Then you adjust the properties of your links when hovered. Again, you can change the colors, styles, sizes, etc to whatever you want.

CODE

a.nav:hover{
background-color:000000;
color:333333;
font-family:arial;
font-size:8px;
text-align:center;
padding:7px;
text-decoration:uppercase;
width:150px;
text-transform:none;
font-weight:normal;
letter-spacing:1pt;
margin-bottom:1px;
}

Then you put your code to work, using this:

CODE

<a href="URL HERE" class="nav">Link</a>
<a href="URL HERE" class="nav">Link</a>
<a href="URL HERE" class="nav">Link</a>
<a href="URL HERE" class="nav">Link</a>

So this is the entire code, which you would place in your About Me section:

CODE

<style>
a.nav:link, a.nav:active, a.nav:visited{
background-color:000000;
color:ffffff;
font-family:arial;
font-size:8px;
text-align:center;
padding:7px;
text-decoration:none;
width:150px;
text-transform:uppercase;
font-weight:normal;
letter-spacing:1pt;
margin-bottom:1px;
}

a.nav:hover{
background-color:000000;
color:333333;
font-family:arial;
font-size:8px;
text-align:center;
padding:7px;
text-decoration:uppercase;
width:150px;
text-transform:none;
font-weight:normal;
letter-spacing:1pt;
margin-bottom:1px;
}
</style>

<a href="URL HERE" class="nav">Link</a>
<a href="URL HERE" class="nav">Link</a>
<a href="URL HERE" class="nav">Link</a>
<a href="URL HERE" class="nav">Link</a>

To change the color of underlined text, you'd use this code:

CODE

u {
color:FONT COLOR HERE;
}