CSS for clean navigation links

Print This Post Print This Post Email This Post Email This Post

Another question many people ask me is how to make clean navigation links like this one on Glitter Frosting’s MySpace page:

This is done editing the CSS for fieldsets. The HTML <fieldset> tag groups items that belong together into a box (you can see the dark pink line). The legend part formats the text ontop of the box (in my case “Links”)

div fieldset {border:1px solid #f8406b; text-align:left;padding:5px;line-height:20px;color:#f8406b;}
div fieldset legend {font-family:arial; color:#f8406b; padding:5px; font-size:20px;}

Play around with the code and add different things until you have the box you like!

Now we need to add the links, inside the box and make them nice! I will set it up in a way that the links look changes when you hover over them with your mouse (see the one dark pink link, which was hovered). So I added a text class and called it “navi”, you can call it whatever you want.
Note the values below are just examples, add more as you please (they also don’t make the box above, but one that is slightly different 😉 )

a.navi:link,a.navi:active,a.navi:visited {
display: block;
padding: 2 2 1 1;
margin-bottom:2px;
text-align: left;
font-family:arial;
color:#ffffff;
background:#edb2c0;
line-height:18px;}

a.navi:hover {
display: block;
padding: 2 2 1 1;
margin-bottom:2px;
text-align: right;
font-family:arial;
color:#ffffff;
background: #f8406b;
line-height:18px;}

The whole CSS code goes into the CSS section under Customize Profile

Now, it’s all fun and games, but we need to let the html document know to use the tags we just defined. So here we go, paste this scheme into your i.e. “interests section”  under “Edit Profile“:

<fieldset>
<legend>Links</legend>
<a href=”http://camolove.com” class=”navi”>camolove.com</a>
</fieldset>

Your box will look something like this, depending on how wide the space is you have available!

Links

camolove.com

I hope you enjoyed this tutorial!

Related Posts Plugin for WordPress, Blogger...

Comments

  1. a great website and dramatic post. I will copy this page.

  2. Awesome! Thanks!! 😀

  3. Sure hun just use:

    background:transparent;

    in both fieldset items :)

  4. Thanks for making this! It’s the first one I’ve read that I actually understand!

    I do have a question though: Is there any way to make the background transparent? (Specifically the part where your example is white?) I have a pretty background on the layout I am making and I want it to show through there! :)

    What sort of code could I use to make a transparent background, if there is one? Thank you so much hun! <3

  5. Dani, you are honestly my hero! I have been battling this for a while now! I couldn’t find anything that resembled (I think b/c I didn’t know what to call it lol) it and what little I did find, didn’t work. Thank you SO SO SO much for this tut!! You will be added to my credit list when I use the code tomorrow. Thanks again!!!
    Lana

  6. MRSFOLAND says:

    i got it fixed..thanks!

  7. Hun, in your class=”navi” html you have two ”, delete the double ones and they will show like these here!

  8. i used the same code as what you have displayed but all my links are side by side. can you help me please!?! Thanks

  9. Nikki, I sent you a friend request, let me look at your code :)

  10. Hey I just want to say great tutorial!

    I tried it and I get the form to work so basically the part that says links on yours and the the line to make the table like; however the colored part with the links does not work. I do have that class = quote navi in there but its not working.

    Any ideas?
    I happy I got the box part to work but would like the rest to work as well.

    Thanks

  11. Glad it worked Hannah!

  12. It took me awhile but I got it and got it the way I like it! Thank you so much for posting this! I have tried so many different tutorials and I never could figure it out but you made it so easy!!

  13. Nikki Wheeler says:

    o dang spaces lol i totally forgot! thank you lol

  14. Hi Nikki Angel got it to work, just make sure this is in your interest (html) section (delete the spaces, I am putting them so the code shows):

    < fieldset >
    < legend > Links < /l egend >
    < a href=”http://camolove.com” class = ”navi ” > camolove.com < / a>
    < / fieldset>

    Don’t forget this part class = ”navi ” (no spaces) after your link!

  15. Nikki Wheeler says:

    i can’t get the the thing angel couldn’t get to work, and i tried what you said

  16. In your html (interests) after you close the link with ” type class=”navi” and then close it with >

  17. preggomama says:

    oops it didnt work.lol

  18. preggomama says:

    this is whats under my interest section:

    Links
    Rules

    i think i have something messed up.
    i tried deleting everything and using your code without changing a thing and its still not doing right. ill keep working at it,im determined to get this

  19. Oops, it made the box instead of the code, look above at the html to paste :)

  20. Hun, make sure you add the class=”navi” with your link:

    Links

    Rules

  21. here’s my site that i tested it on:
    http://www.myspace.com/candykisseddesigns

    here’s the code i put under css:
    div fieldset {border:1px solid #1cd3f9; text-align:left;padding:5px;line-height:20px;color:#4044f8;}
    div fieldset legend {font-family:arial; color:#4044f8; padding:5px; font-size:20px;}

    a.navi:link,a.navi:active,a.navi:visited {
    display: block;
    padding: 2 2 1 1;
    margin-bottom:2px;
    text-align: left;
    font-family:arial;
    color:#ffffff;
    background:#1cd3f9;
    line-height:18px;}

    a.navi:hover {
    display: block;
    padding: 2 2 1 1;
    margin-bottom:2px;
    text-align: right;
    font-family:arial;
    color:#ffffff;
    background: #4044f8;
    line-height:18px;}

    the rest i put under my interest section

    thanks Dani
    if i sent the wrong info lemme know

  22. Angel, send me your myspace link I will look at your code! Hugs!

  23. thanks for posting this tut.iv been working at it all night and i still havent been able to get the hover part to work. It not moving to the right or changing colors.idk what else to do,lol.

  24. Your the best Dani =0)

  25. Nikki Wheeler says:

    thank you for making this, every time i found something like this it confused me, but you didn’t!!
    thank you again!

Speak Your Mind

*