Marino from TechSymptom is great web-designer and started a series of Fireworks tutorials on web 2.0 styled navigation bars. The last one inspired me to create this small CSS tutorial.

UPDATE: Based on the tutorials from techSyptom we created a new tutorial, check the tutorial via link below,

After we finished the design tutorial we need to create 2 simple images to style our CSS navigation bar: A background image (the light blue bar) and a transparent button that indicate the active state, all other elements are created with CSS.

Like in most CSS horizontal navigation bars an unordered list is used to hold the menu items:

With the next CSS code it’s possible to style the horizontal navigation bar:

#container {
width:800px;
height:600px;
padding:20px;
}
ul#navbar {
background:url(/tutorials/web20_css_bar/backgr.jpg) repeat-x left top;
margin:0;
border-bottom:3px solid #98CB00;
border-top:1px solid #00CCFF;
list-style-type:none;
height:31px;
}
ul#navbar li {
float:left;
}
ul#navbar li a {
display:block;
padding:5px 15px 4px;
font:bold 16px "Trebuchet MS";
text-decoration:none;
color:#00CCFF;
letter-spacing: -0.1em;
}
ul#navbar li a:hover {
color:#98CB00;
}
ul#navbar li a#current {
background:url(/tutorials/web20_css_bar/current.gif) no-repeat center bottom;
color:#98CB00;
}

We placed the background image behind “ul” element and added the two borders to the top and bottom. The li element is defined as a floated block element and got some padding to create a bigger button. The last definition is for the current state, which will show up the tri-angle. You need some server-side code (php) to get a dynamic position every time a different page is loaded.

That’s all, download the example files here.Similar Posts:

• Your e-mail address hidden with jQuery?
• Image manipulations with Imagemagick
• jQuery Contact form for your website

After writing last week a short review about the advertisement site 43ads.com I got some interesting comments about other nice Web 2.0 styled advertising ideas.

bla.st
This is a nice combination of free and paid advertising, in the beginning you will get a spot on the first page of common key words like “web-design”. Interesting at this site is, that your ad is live after submission and the possibility to get a direct information how much a bid will raise your ad on selected pages. The website is really clear and you get the chance to have a 270×165 pixel banner ad for free.

ispuare
I found this advertising site via other blogs about the popular “Web 2.0 advertising thing”. Placing a link is for free and after that I got the invitation to get also a free “square” in exchange for a link. Sure the websites idea is very “original”, but I’m not sure that this is the “coolest” way to surf the internet. Placing a square inclusive an extra text link is € 50 at the moment.

At the end I’m asking me, who will visit all the websites behind the ads? In these days there is a lot of traffic because of all the blog posts but what about the real visitors a website need to sell products?Similar Posts:

• 8 Link building ideas for corporate websites
• Is AdBrite your advertising partner?
• Social media services are more efficient these days