Tabs in a web page

How can I create a tabbed effect?

Page 1 of 1

7 Replies - 25304 Views - Last Post: 29 November 2005 - 03:04 PM

#1 nhagen  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 29-November 05

Tabs in a web page

Posted 29 November 2005 - 07:50 AM

[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

Is This A Good Question/Topic? 0
  • +

Replies To: Tabs in a web page

#2 Amadeus  Icon User is offline

  • g+ + -o drink whiskey.cpp
  • member icon

Reputation: 248
  • View blog
  • Posts: 13,506
  • Joined: 12-July 02

Re: Tabs in a web page

Posted 29 November 2005 - 07:56 AM

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?
Was This Post Helpful? 0
  • +
  • -

#3 nhagen  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 29-November 05

Re: Tabs in a web page

Posted 29 November 2005 - 08:04 AM

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.
Was This Post Helpful? 0
  • +
  • -

#4 Arbitrator  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 51
  • View blog
  • Posts: 530
  • Joined: 26-January 05

Re: Tabs in a web page

Posted 29 November 2005 - 10:04 AM

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

Was This Post Helpful? 0
  • +
  • -

#5 Amadeus  Icon User is offline

  • g+ + -o drink whiskey.cpp
  • member icon

Reputation: 248
  • View blog
  • Posts: 13,506
  • Joined: 12-July 02

Re: Tabs in a web page

Posted 29 November 2005 - 10:13 AM

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.
Was This Post Helpful? 0
  • +
  • -

#6 1lacca  Icon User is offline

  • code.rascal
  • member icon

Reputation: 44
  • View blog
  • Posts: 3,822
  • Joined: 11-August 05

Re: Tabs in a web page

Posted 29 November 2005 - 02:09 PM

Here is a very good tutorial on creating very nice looking tabs with css.
Was This Post Helpful? 0
  • +
  • -

#7 Amadeus  Icon User is offline

  • g+ + -o drink whiskey.cpp
  • member icon

Reputation: 248
  • View blog
  • Posts: 13,506
  • Joined: 12-July 02

Re: Tabs in a web page

Posted 29 November 2005 - 02:10 PM

Very nice , 1lacca! That looks great!
Was This Post Helpful? 0
  • +
  • -

#8 nhagen  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 29-November 05

Re: Tabs in a web page

Posted 29 November 2005 - 03:04 PM

:D 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.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1