homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
Forum Library, Charter, Moderators: not2easy

Site Graphics and Multimedia Design Forum

easiest way to create tab navigation bars?
emma matthews

 11:23 am on Apr 25, 2003 (gmt 0)

I am regularly designing tabbed navigation bar sites(like amazon) for clients. It takes me ages to create each bar in photoshop, as I have to make each tab individually.

Is there an easier way? Perhaps an onoine generator, that lets you specify the text and font, and tab colour and style, and then genrate the appropriate sized finished tagged.

I know I'm being lazy, but with the number of tabs I have to create for the bars every week, it would save me hours every week, if there was one!



 11:54 am on Apr 25, 2003 (gmt 0)

One solution could be to create the tab with no text and use it as a background. Then use CSS to style the text for the tab label.

That way you only need to create 2 tabs, one general and one (if applicable) for the tab if it's the active page.

emma matthews

 12:00 pm on Apr 25, 2003 (gmt 0)

Thanks BlobFisk. However, the only problem with that would be all the tabs would be of the same size. I really want the tabs to be the exact size of the text. I am forever resizing tabs to fit the text. Surely, there must be a simpler way to auto generate tabs that fit the text in them?


 12:07 pm on Apr 25, 2003 (gmt 0)

In that case you need three graphics: a left tab edge, a middle and a right tab edge.

Use the middle one as a horizontally repeating background for the text. And position the other ones in the appropriate place.


 10:12 pm on Apr 26, 2003 (gmt 0)

what's about letting PHP dynamicaly creating the Tabs design, color etc...
with something like: if text =... then tab = etc....

I still do it by hand :) but I did read many chapters about the tech

look around for a good tutorials or a book such as PHP4


 11:03 pm on Apr 26, 2003 (gmt 0)

I like blobfisk's and grahamstewart's idea. It's win-win because you get a quicker page load and real anchor text which help in SEO.

Robert Charlton

 12:12 am on Apr 27, 2003 (gmt 0)

...and real anchor text which help in SEO...

Unless, of course, the tab text won't help in SEO. Sometimes, I'll give the client whatever they want in graphics as long as I can influence the text links... So, if they want to call a navbar link "Welcome to Our Product Page" or "About Us" or whatever, that's fine, as long as these links are graphics. I then build global text links with good anchor text for the footer section, and also add text links to other positions on the page.


 1:09 am on Apr 27, 2003 (gmt 0)

Hi Emma,

Can you sticky me a URL to a demo page of the kind of tabs you wish to create?

I have built a PHP library for dynamically generating various graphical navigation controls (complete with smooth "pseudo" anti-aliased rounded corners :) and might be able to help.



 11:13 am on Apr 27, 2003 (gmt 0)

HEllo Dmorison,
as I mentioned I dev in PHP
but do not have the graphic side knowledge
would you please share with me some "how to"
by advance

thank you




 3:02 pm on Apr 27, 2003 (gmt 0)

Hi Henry,

It basically involves the use of PHP's image creation capabilities. The reference guide is here:


The process is quite simple...

- Create a new image with imagecreate() and get a handle to the image (the canvas)

- Create a colour palette with imagecolorallocate()

...and then plot individual pixels, shapes, text, lines etc. etc. onto the canvas to create whatever effect you want...

- Get the image stream with imagepng() (for a .png)

- Send the output of imagepng() to client

You can even have a PHP script as the src='' attribute of an <img> tag. For example:

<img src='tabletop.php?fg=ffffff&bg=000000&width=300'>

The first line of tabletop.php is then something like:

header ("Content-type: image/png");

The output is then a .png that can form the top of a table with nice anti-aliased smooth corners.

Using this technique, you can easily experiment with different colour schemes without having to go into Photoshop every time. I only actually do this on my development server. When i'm happy with a colour scheme I run a script to go through all my "dynamic" img src's and convert them to actual .png files for publishing.

Hope this helps!


 5:11 pm on Apr 27, 2003 (gmt 0)

Hi Dmorison
thank you for typing a long primer
this is opening some nice perspective

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved