Welcome to WebmasterWorld Guest from 54.198.210.67

Forum Moderators: not2easy

Message Too Old, No Replies

easiest way to create tab navigation bars?

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

New User

10+ Year Member

joined:Nov 14, 2002
posts:27
votes: 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)

Senior Member

WebmasterWorld Senior Member blobfisk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Feb 25, 2002
posts:3185
votes: 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.

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

New User

10+ Year Member

joined:Nov 14, 2002
posts:27
votes: 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)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 8, 2003
posts:1429
votes: 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)

Senior Member from FR 

WebmasterWorld Senior Member henry0 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Apr 19, 2003
posts:4422
votes: 9


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
cheers

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

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 22, 2002
posts:2546
votes: 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.
12:12 am on Apr 27, 2003 (gmt 0)

Moderator from US 

WebmasterWorld Administrator robert_charlton is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Nov 11, 2000
posts:11951
votes: 308


...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)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 3, 2003
posts:1633
votes: 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.

Cheers.

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

Senior Member from FR 

WebmasterWorld Senior Member henry0 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Apr 19, 2003
posts:4422
votes: 9


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

cheers

Henry

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

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 3, 2003
posts:1633
votes: 0


Hi Henry,

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

[uk.php.net...]

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)

Senior Member from FR 

WebmasterWorld Senior Member henry0 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Apr 19, 2003
posts:4422
votes: 9


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

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members