CSS generated page tabs? 1

theniteowl · Jan 9, 2006

Hi All,
Has anyone done or seen CSS generated page tabs?
I mean tabs at the top of the page to act as selectors for the content to show in the main window just like file folder tabs. The selected tab changes appearance to look as if it is forward.

I did this with graphics creating a left and right image for the sides of the tab and a single pixel wide image for the middle that repeats to fill in the space allowing for the tabs to be dynamically generated rather than having fixed width images. This requires three images for a tab in the background and 3 for the foreground tab.

If anyone has done something similar completely in CSS I would love to see it, it makes page color and style changes a lot simpler if you do not have to create new images every time and would allow the tabs to change height if the font changes.

Stamp out, eliminate and abolish redundancy!

ca8msm · Jan 9, 2006

Although it still uses some images, you may want to check out:

http://www.alistapart.com/articles/slidingdoors/

____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

TobyA · Jan 9, 2006

I have been doing the same thing myself using this tutorial:

http://www.simplebits.com/notebook/2003/09/30/accessible_imagetab_rollovers.html

The method uses one image for each menu items with the three image states (e.g. Normal, Hoever, Active) stacked on top of eachother.

CSS is then used to displace the image and hence display the relevent part of the section.

I've had some problems getting this working in both IE and FF although other have managed it without any glitches.

Hope this helps.

Cheers,
Toby

theniteowl · Jan 9, 2006

What they show on that site is essentially what I am doing now with a mix of a few images and CSS.

I have code that does rounded corners with CSS and thought it might apply well to tabs as well so that I can eliminate all images but I do not know CSS well enough yet to make it work. If I spend enough time playing I am sure I can get it working but I do not have the time to do it anytime in the near future and thought if someone had done it I would learn a lot faster looking at the code example.

Stamp out, eliminate and abolish redundancy!

theniteowl · Jan 10, 2006

Using sample code for creating rounded corners from this link:

http://www.webreference.com/programming/css_borders/index.html

I came up with this tabbed menu. It works completely without images and can be re-styled at will for different colors without creating new graphics.

Feel free to make suggestions on how it may be improved. I am not real skilled with CSS yet and it took a lot of poking and prodding to get this to work as it does now but could almost certainly be improved.

Code:

<html>
<head>
<style type="text/css">
<!--
/* Unselected Tab */
.tabunsel {background: transparent; width:100px; border-bottom:1px solid #fff;}
.tabunsel .b1, .tabunsel .b2, .tabunsel .b3, .tabunsel .b4, .tabunsel .b5 {display:block; overflow:hidden; font-size:1px;}
.tabunsel .b1, .tabunsel .b2, .tabunsel .b3, .tabunsel .b5 {height:1px;}
.tabunsel .b2 {background:#ccc; border-left:1px solid #fff; border-right:1px solid #eee;}
.tabunsel .b3 {background:#ccc; border-left:1px solid #fff; border-right:1px solid #ddd;}
.tabunsel .b4 {background:#ccc; border-left:1px solid #fff; border-right:1px solid #aaa;}
.tabunsel .b1 {margin:0 5px; background:#fff;}
.tabunsel .b2, .tabunsel .b2b {margin:0 3px; border-width:0 2px;}
.tabunsel .b3, .tabunsel .b3b {margin:0 2px;}
.tabunsel .b4, .tabunsel .b4b {height:2px; margin:0 1px;}
.tabunsel .b5 {margin:0 100%;}
.tabunsel .tabcontent {
  display:block;
  background:#ccc;
  border-left:1px solid #fff;
  border-right:1px solid #000;
  padding-top:0px;
  padding-bottom:2px;
  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight:normal;
  text-align:center;
}

/* Selected Tab */
.tabsel {background: transparent; width:100px;}
.tabsel .b1, .tabsel .b2, .tabsel .b3, .tabsel .b4 {display:block; overflow:hidden; font-size:1px;}
.tabsel .b1, .tabsel .b2, .tabsel .b3 {height:1px;}
.tabsel .b2 {background:#ccc; border-left:1px solid #fff; border-right:1px solid #eee;}
.tabsel .b3 {background:#ccc; border-left:1px solid #fff; border-right:1px solid #ddd;}
.tabsel .b4 {background:#ccc; border-left:1px solid #fff; border-right:1px solid #aaa;}
.tabsel .b1 {margin:0 5px; background:#fff;}
.tabsel .b2, .tabsel .b2b {margin:0 3px; border-width:0 2px;}
.tabsel .b3, .tabsel .b3b {margin:0 2px;}
.tabsel .b4, .tabsel .b4b {height:2px; margin:0 1px;}
.tabsel .tabcontent {
  display:block;
  background:#ccc;
  border-left:1px solid #fff;
  border-right:1px solid #000;
  padding-top:2px;
  padding-bottom:2px;
  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight:bold;
  text-align:center;
}
-->
</style>
<title></title>
<script language="javascript">

var mytabnames = new Array();
mytabnames[0] = 'First Tab';
mytabnames[1] = 'Second Tab';
mytabnames[2] = 'Third Tab';
mytabnames[3] = 'Fourth Tab';
var seltab = 0;

function buildtabs() {
  var outtabs = '';
  for (var x=0;x<mytabnames.length;x++) {
    outtabs = outtabs + '<span id="whichtab' + x + '" class="tabunsel" onmouseover="this.style.cursor=\'hand\'" onmouseout="this.style.cursor=\'auto\'" onclick="setseltab(' + x + ')">';
    outtabs = outtabs + '<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>';
    outtabs = outtabs + '<span class="tabcontent">' + mytabnames[x] + '</span></span>';
  }
  document.getElementById('mytabs').innerHTML = outtabs;
  setseltab(0);
}

function setseltab(which) {
  //Set current tab to unselected and hide content
  document.getElementById('whichtab' + seltab).className = 'tabunsel';
  document.getElementById('selbody' + seltab).style.display = 'none';

  //Set newly selected tab and content
  document.getElementById('whichtab' + which).className = 'tabsel';
  document.getElementById('selbody' + which).style.display = 'inline';
  seltab = which;
}
</script>
</head>
<body bgcolor="#008080" onload="buildtabs()">
<table width="600" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td nowrap>
      <span id="mytabs" onmouseover="this.style.cursor='hand'" onmouseout="this.style.cursor='auto'"></span>
      <td width="100%" height="22" valign="bottom"><span class="tabunsel"><b class="b5"></b></class></td>
    </td>
  </tr>
  <tr>
    <td height="400" bgcolor="#cccccc" colspan="2" style="border-left: 1px solid rgb(255,255,255); border-right: 1px solid rgb(255,255,255); border-bottom: 1px solid rgb(255,255,255)" align="center">
      <div id="selbody0">First Page</div>
      <div id="selbody1" style="display: none">Second Page</div>
      <div id="selbody2" style="display: none">Third Page</div>
      <div id="selbody3" style="display: none">Fourth Page</div>
    </td>
  </tr>
</table>
</body>
</html>

Stamp out, eliminate and abolish redundancy!

kaht · Jan 10, 2006

Some things that I see that I would change are using bold tags <b> to build the curved tops of the tabs. Bold tags are deprecated, if you want to use an inline tag for this <span> tags will work fine. Additionally, another thing I noticed that will not let your code validate:

Code:

    <td nowrap>
      <span id="mytabs" onmouseover="this.style.cursor='hand'" onmouseout="this.style.cursor='auto'"></span>
      [!]<td[/!] width="100%" height="22" valign="bottom"><span class="tabunsel"><b class="b5"></b></class></td>
    </td>

You have started a new <td> tag before you closed the previous one. This is not valid syntax. Additionally, it could be noted to not use tables for the layout but that argument gets beaten into the ground here so I'll just leave that alone.

Other than that, I think it looks really good and is a pretty neat concept - I've never seen rounded edges done like that before.

-kaht

How much you wanna make a bet I can throw a football over them mountains?

Foamcow · Jan 10, 2006

Additionally, it could be noted to not use tables for the layout

I'd agree with you there.

Foamcow Heavy Industries - Web design and ranting
Buy Languedoc wines in the UK

theniteowl · Jan 10, 2006

Oh, thanks. I had done a lot of code commenting and moving things around while testing and must have pasted stuff back into the wrong postion during cleanup and not caught the missing tag.

I was actually putting this together for a coworker who has to integrate it into an existing page which uses a table design so I put it into a table to make the integration easier. I am also not yet comfortable enough with CSS to do a table free design but I AM working towards it.

I posted another related thread about making the tabs size themselves according to the text width. I would appreciate any thoughts.

Stamp out, eliminate and abolish redundancy!

glenmac · Jan 10, 2006

Nice, theNiteOwl a star for you. I've used your code (slightly tweaked) using IFrames in the divs. If you would like recognition for the code email me your info and I'll insert it in the page.

Glen

http://lantzvillecomputers.com

theniteowl · Jan 10, 2006

Thanks but no recognition needed. After all I based it on sample code I found at webreference.com so the trickiest part had already been worked out.

BTW, in my table structure not only did I miss the </td> I somehow put in </class> where it should have been </span> Do not know where my head was.

If I can just get the widths of the tabs to be more dynamic so they adjust to the width of the text I would be happy.

Stamp out, eliminate and abolish redundancy!

glg1 · Jan 10, 2006

Great stuff tno,
Strange thing happens in FF1.5 though - I get a vertical set of tabs and no hand on mouseover. Works fine in IE - horizontal tabs and the good old hand...

I briefly looked, but nothing jumps out.

George

mdr2271 · Mar 18, 2006

How could you do theniteowl's example without using tables?

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

CSS generated page tabs? 1

theniteowl

Programmer

ca8msm

Programmer

TobyA

MIS

theniteowl

Programmer

theniteowl

Programmer

kaht

Programmer

Foamcow

Programmer

theniteowl

Programmer

glenmac

Technical User

theniteowl

Programmer

glg1

Programmer

mdr2271

Programmer

Similar threads

Part and Inventory Search

Sponsor