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 derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Help with width of span tag through css

Status
Not open for further replies.
theniteowl

theniteowl

Programmer
May 24, 2005
1,975
US
Hi all,
I am generating a tabbed menu dynamically by pulling values from a javascript array to put in as the tab headings.
I use CSS to generate the tab rather than using images and I would like to get the width of the tab to alter according to the length of the text used.
Currently I have a fixed width for each tab. If I set it to auto then the tabs wrap screwing up the page.

Any thoughts?
The css uses b1 - b4 to generate the curved edges of the tab and tabcontent to handle the text area. I have two styles, one for selected one for unselected and use javascript to change the class of the span tag when it becomes selected or unselected.

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:0px 5px 2px 5px;
  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:2px 5px 2px 5px;
  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight:bold;
  text-align:center;
}



/* Unselected Tab */
.oldtabunsel {background: transparent; width:100px; border-bottom:1px solid #fff;}
.oldtabunsel .b1, .oldtabunsel .b2, .oldtabunsel .b3, .oldtabunsel .b4, .oldtabunsel .b5 {display:block; overflow:hidden; font-size:1px;}
.oldtabunsel .b1, .oldtabunsel .b2, .oldtabunsel .b3, .oldtabunsel .b5 {height:1px;}
.oldtabunsel .b2 {background:#ccc; border-left:1px solid #fff; border-right:1px solid #eee;}
.oldtabunsel .b3 {background:#ccc; border-left:1px solid #fff; border-right:1px solid #ddd;}
.oldtabunsel .b4 {background:#ccc; border-left:1px solid #fff; border-right:1px solid #aaa;}
.oldtabunsel .b1 {margin:0 5px; background:#fff;}
.oldtabunsel .b2, .oldtabunsel .b2b {margin:0 3px; border-width:0 2px;}
.oldtabunsel .b3, .oldtabunsel .b3b {margin:0 2px;}
.oldtabunsel .b4, .oldtabunsel .b4b {height:2px; margin:0 1px;}
.oldtabunsel .b5 {margin:0 100%;}
.oldtabunsel .oldtabcontent {
  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 */
.oldtabsel {background: transparent; width:100px;}
.oldtabsel .b1, .oldtabsel .b2, .oldtabsel .b3, .oldtabsel .b4 {display:block; overflow:hidden; font-size:1px;}
.oldtabsel .b1, .oldtabsel .b2, .oldtabsel .b3 {height:1px;}
.oldtabsel .b2 {background:#ccc; border-left:1px solid #fff; border-right:1px solid #eee;}
.oldtabsel .b3 {background:#ccc; border-left:1px solid #fff; border-right:1px solid #ddd;}
.oldtabsel .b4 {background:#ccc; border-left:1px solid #fff; border-right:1px solid #aaa;}
.oldtabsel .b1 {margin:0 5px; background:#fff;}
.oldtabsel .b2, .oldtabsel .b2b {margin:0 3px; border-width:0 2px;}
.oldtabsel .b3, .oldtabsel .b3b {margin:0 2px;}
.oldtabsel .b4, .oldtabsel .b4b {height:2px; margin:0 1px;}
.oldtabsel .oldtabcontent {
  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" nowrap><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!
 
Sort by date Sort by votes
I'm sure you tried this, but if you omit the width altogether, you get dynamic tabs that expand to fit the text of the longest tab. All tabs are still the same width but at least they don't wrap, and everything fits.


Mike Krausnick
Dublin, California
 
Upvote 0 Downvote
It does not seem to work for me. If I eliminate the width settings they wrap.
It might be the way I have the spans setup, I just do not know enough about CSS yet.


Stamp out, eliminate and abolish redundancy!
 
Upvote 0 Downvote
1. Try it in Firefox - that's what I used to test it sans width and it worked ok.

2. Put in a DOCTYPE if you don't already have one, so IE will behave itself. DOCTYPEs are available at
3. A suggestion in your other post was to use <span> instead of <b>. That will work the same (the tag is just an inline placeholder to apply the class) and <span> will validate, whereas <b> won't because it's deprecated. Eventually your co-worker may want the code to validate.

Mike Krausnick
Dublin, California
 
Upvote 0 Downvote
I just installed FireFox 1.5 and the tabs are wrapping no matter what the width setting is. Did you add in a DocType when you tested the code?

I tried a number of different doctypes in IE and some of them caused wrapping despite the width settings. 3.2 does not seem to affect it but I still cannot remove the width settings without the wrapping occuring.

I cannot get it to work in FireFox with or without Width or any of the DocType settings I have tried.



Stamp out, eliminate and abolish redundancy!
 
Upvote 0 Downvote
I'd suggest cutting out the javascript and the rounded corners to begin with. Just hard-code some different-length tab labels, with the CSS you use to display them, and get it working to your satisfaction. Then add the rounded corners, and finally the javascript.

That way it's a lot easier to tell the wood from the trees.

Incidentally, Mike, the <b> element is deprecated, not invalid. Pages that use it will still validate, you're just advised not to use it.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
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
1K
spamjim
spamjim
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
802
spamjim
spamjim
scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
741
3esolar
3
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
785
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
623
PeDa
PeDa

Part and Inventory Search

Sponsor

Back
Top