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!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

CSS generated page tabs? 1

Status
Not open for further replies.
theniteowl

theniteowl

Programmer
May 24, 2005
1,975
US
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!
 
Sort by date Sort by votes
I have been doing the same thing myself using this tutorial:


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
 
Upvote 0 Downvote
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!
 
Upvote 0 Downvote
Using sample code for creating rounded corners from this link: 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!
 
Upvote 0 Downvote
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?
sheepico.jpg
 
Upvote 0 Downvote
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!
 
Upvote 0 Downvote
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
 
Upvote 0 Downvote
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!
 
Upvote 0 Downvote
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
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
790
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
412
pmonett
pmonett
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
132
lmcate
lmcate
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
328
PeDa
PeDa
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
361
PeDa
PeDa

Part and Inventory Search

Sponsor

Back
Top