[nhagen]

[admin edit]As there was no text in the post, can we assume you mean that you wish to design a single web page that looks as if it has tabs?[/admin edit]

Yes. Each tab graphic would be mapped to another page. The part I don't quite get, is how to get the initial look.

This post has been edited by nhagen: 29 November 2005 - 08:00 AM

[Amadeus]

Tabs in a web page, eh? Quick questions...do you need everything to lead back to the same webpage, or are the tabs leading to a new page? Do you envision this as simply designing something that looks like a tabbed effect (using images and links), or as an actual applicaton, which may have to be built with something like javascript (AJAX, anyone?)?

What might be your end vision for the page?

[nhagen]

I'm only going for a tabbed effect because some people I'm designing for liked that look. Each tab will link to another page one their site or outside the site.

[Arbitrator]

You can create a table:

[ TABLE CELL ][ TABLE CELL ][ TABLE CELL][ --- EMPTY CELL --- ]
[
[
[ CONTENT TABLE CELL
[
[
[

The upper table cells will be the tabs. Give the active tab the color of the content table cell's background so they look like they are one and give the other "tab" cells a different color with a line border on the bottom. Make sure the table cells also have side borders so they look separate.

Just a possible example, I know that there are other ways of doing this:

<table style="width: 100%; border-collapse: collapse;">
<tr>
<td style="background-color: #39f; border-left: 1px solid #000; border-top: 1px solid #000; border-right: 1px solid #000; width: 15%;">ACTIVE TAB</td>
<td style="background-color: #ffc; border-top: 1px solid #000; border-right: 1px solid #000; border-bottom: 1px solid #000; width: 15%;">INACTIVE TAB</td>
<td style="background-color: #ffc; border-top: 1px solid #000; border-right: 1px solid #000; border-bottom: 1px solid #000; width: 15%;">INACTIVE TAB</td>
<td style="border-bottom: 1px solid #000; width: 55%;">&nbsp;</td>
</tr>
<tr>
<td colspan="4" style="background-color: #39f; border-left: 1px solid #000; border-right: 1px solid #000; border-bottom: 1px solid #000; width: 100%;"><pre>CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
CONTENT</pre></td>
</tr>
</table>

* Tested in IE6

This post has been edited by Arbitrator: 29 November 2005 - 10:04 AM

[Amadeus]

You could also make images to represent each of the tabs...two images per tab, one being the 'selected' tab image, the other the 'unselected' image, and run them in a table across the top of the screen, each one also being a link of course. When the right page is chosen, the 'selected' tab image for that page is used, the rest use the 'unselected' image.

Take this suggestion with a grain of salt...I'm not an accomplished visual web designer....Arbitrator's suggestion is likely the better option.

[1lacca]

Here is a very good tutorial on creating very nice looking tabs with css.

[Amadeus]

Very nice , 1lacca! That looks great!

[nhagen]

Thanks to all of you who have helped me get going with this design. I had started working on it as a table and that might work for us.

Your suggestions are much appreciated and helpful.