Advertising

Want to be here?

Navigation

Main Domain Owner Contest

Affiliates

Aila | Anna | Ari | Beth | Bizz & Florin | Catherine | Elisabeth | Fatima | Gunnstein | Jabed | Jack | Katinka | Kristin | Lise | Marius | Michelle & Skye | Miriam | Nina | Taz | Tiffany | Tom | Tonje | Tori | Shahad | Sophie | Vegard | Victoria

MORE?

the owner

Vibeke. 20 years old. February 23. Norway. Asker. green eyes. brown hair. soccer player.
Loves: Jan Christopher. kebab. friends. Dolly+Ferdinand. Kumsen. money. pizza. snowboard. my green car. surprises. candy. coca cola. LOST. Prison Break. Ugly Betty. sun. Nickelback.
Hates: arrogant/fake people. school. toes. rain. stealers/copiers. homework. teachers.

MORE?

Domain

Owner: Vibeke
Host: one
Site name: vejc-design.com
Online since: 4. October '07
Hits:
Online: Online
Last updated: 28. July '08

MORE?

Layout

Layout up since July 28. It was made by Vibeke in Paint Shop Pro 9. Featuring no one. Fonts used: Ambrosia.

link me

MORE?

Updates

July 28

Frontpage

Photos from Ibiza

June 9

7 PNG's

8 photographs

May 29

5 photographs

Photo Gallery

Ads

Navigation Blocks

Main >> Tutorials >> CSS >> Navigation Blocks

"Navigation Blocks" is sort of a link-effect. I think it's really cool! This code is not easy, so read the tutorial carefully. I will try to explain as good as I can. I have put out different types of the code. You can change the settings in the code so it fits your site better. I suggest you try different things with the code on your own, this way you learn how the code work and eventually you'll get better in HTML.
Navigation block is actually a part of CSS. Just paste it in your CSS code between your style tags and it will be much easier to update.


Step 1: The first thing you have to do is copy the code under and paste it into a HTML-box on the page you want to have the navigation blocks. In this code you can choose the colours and how you want the links to look when you put the mouse over.
<style>a.box, a.box:link, a.box:active, a.box:visited { text-decoration: none; font-family: verdana; font-weight:normal; font-size:9px; line-height:13px; color: #ffffff; padding: 1px; display:block; letter-spacing:0px; border-bottom: 1px solid #505050; border-left: 0px solid #707070; padding: 0px; text-align: right; background: #606060; text-transform: none; } a.box:hover { text-decoration: none; font-family: verdana; font-weight:bold; font-size:9px; line-height:13px; color: #000; border-bottom: 1px solid #505050; border-left: 0px solid #808080; background: #606060; letter-spacing:0px; display:block; text-transform: none; text-align: right; </style>

Step 2: Then you have to change all the links you want the code to work on. Use the code under instead of the link-code you already have:
<a href="URL" class="box">Page Name</a>

Step 3: Now you're done. And you can test your new link-effect. If you want other colours or anything else I suggest you try to change some parts of the code and see how it looks. You learn a lot by doing this. Here's how my navigation blocks turned out: EXAMPLE EXAMPLE EXAMPLE EXAMPLE EXAMPLE

Copyright © 2007-2008 vejc-design.com. All rights reserved.
CN | ONE | GA | PB | CC