I got this code from Dynamic Drive and modified it a little bit, but I want to modify it even further and I'm just not quite getting it. I want to create a menu at the top that looks like the tabs of a three-ring binder where there are 5 tabs on the bottom row and the four tabs on the top fit exactly between the 5 on the bottom. I will paste the code that I have at the bottom of this post. Any help would REALLY be appreciated. Thanks!
<style type="text/css">
#ddimagetabs{
}
#ddimagetabs a{
display: inline;
text-decoration: none;
font: bold 12px Arial; /*tab font */
color: black; /*font color */
width: 86px; /*width of tab image */
height: 22px; /*height of tab image */
float: left;
display: inline;
margin-left: 1%; /*spacing between tabs */
margin-right: 5%; /*spacing between tabs */
background-image:url(/mudd/bluetab.jpg); /*URL to tab image */
background-repeat: no-repeat;
text-align: center;
}
#ddimagetabs a:hover, #ddimagetabs a.current{
background-image:url(/mudd/bluetabover.jpg); /*URL to tab image onmouseover */
color: black;
}
#ddimagetabs2{
}
#ddimagetabs2 a{
display: inline;
text-decoration: none;
font: bold 12px Arial; /*tab font */
color: black; /*font color */
width: 86px; /*width of tab image */
height: 22px; /*height of tab image */
float: left;
display: inline;
margin-left: 60px; /*spacing between tabs */
background-image:url(/mudd/bluetab.jpg); /*URL to tab image */
background-repeat: no-repeat;
text-align: center;
}
#ddimagetabs2 a:hover, #ddimagetabs a.current{
background-image:url(/mudd/bluetabover.jpg); /*URL to tab image onmouseover */
color: black;
}
#tabcontentcontainer{
width:480px; /*width of 2nd level content*/
height:40px; /*height of 2nd level content. Set to largest's content height to avoid jittering.*/
}
.tabcontent{
display:none;
}
</style>
<script type="text/javascript">
/***********************************************
* DD Tab Menu II script- ?Dynamic Drive DHTML code library (<!-- w --><a class="postlink" href="http://www.dynamicdrive.com">www.dynamicdrive.com</a><!-- w -->)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at <!-- m --><a class="postlink" href="http://www.dynamicdrive.com/">http://www.dynamicdrive.com/</a><!-- m --> for full source code
***********************************************/
//Set tab to intially be selected when page loads:
//[which tab (1=first tab), ID of tab content to display]:
var initialtab=[1, "sc1"]
//Turn menu into single level image tabs (completely hides 2nd level)?
var turntosingle=0 //0 for no (default), 1 for yes
//Disable hyperlinks in 1st level tab images?
var disabletablinks=0 //0 for no (default), 1 for yes
////////Stop editting////////////////
var previoustab=""
if (turntosingle==1)
document.write('<style type="text/css">\n#tabcontentcontainer{display: none;}\n</style>')
function expandcontent(cid, aobject){
if (disabletablinks==1)
aobject.onclick=new Function("return false")
if (document.getElementById && turntosingle==0){
highlighttab(aobject)
if (previoustab!="")
document.getElementById(previoustab).style.display="none"
document.getElementById(cid).style.display="block"
previoustab=cid
}
}
function highlighttab(aobject){
if (typeof tabobjlinks=="undefined")
collectddimagetabs()
for (i=0; i<tabobjlinks.length; i++)
tabobjlinks.className=""
aobject.className="current"
}
function collectddimagetabs(){
var tabobj=document.getElementById("ddimagetabs")
tabobjlinks=tabobj.getElementsByTagName("A")
}
function do_onload(){
collectddimagetabs()
expandcontent(initialtab[1], tabobjlinks[initialtab[0]-1])
}
if (window.addEventListener)
window.addEventListener("load", do_onload, false)
else if (window.attachEvent)
window.attachEvent("onload", do_onload)
else if (document.getElementById)
window.onload=do_onload
</script>
</head>
<body>
<table width="800" align="center">
<tr>
<td width="18%"> </td>
<td width="76%">
<div id="ddimagetabs"><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://url/" onMouseover="expandcontent('sc1', this)">Home</a> <a href=http://www.webdeveloper.com/forum/archive/index.php/"http://url/" onMouseover="expandcontent('sc2', this)">New</a> <a href=http://www.webdeveloper.com/forum/archive/index.php/"http://url/" onMouseover="expandcontent('sc3', this)">Revised</a><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://url/" onMouseover="expandcontent('sc9', this)">Home</a></div></td>
<td width="6%"> </td>
</tr>
</table>
<table width="800" align="center">
<tr>
<td> </td>
<td width="100%">
<div id="ddimagetabs2"><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://url/" onMouseover="expandcontent('sc4', this)">Home</a> <a href=http://www.webdeveloper.com/forum/archive/index.php/"http://url/" onMouseover="expandcontent('sc5', this)">New</a> <a href=http://www.webdeveloper.com/forum/archive/index.php/"http://url/" onMouseover="expandcontent('sc6', this)">Revised</a><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://url/" onMouseover="expandcontent('sc7', this)">Submit</a> <a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.ccboe.com" onMouseover="expandcontent('sc8', this)">CCBOE</a>
</div></td>
<td> </td>
</tr>
</table>
</body>
</html>You'll have better luck if you put that up on the Internet and give us a link.You'll have better luck if you put that up on the Internet and give us a link.
Thank you. I put up the link. Got it really close to what I want...looks great in Firefox but terrible in IE. There's got to be a simpler way. Right now I have the div tags inside layers inside a table row.
<!-- m --><a class="postlink" href="http://www.ccboe.com/mudd/defaultnew.htmOne">http://www.ccboe.com/mudd/defaultnew.htmOne</a><!-- m --> thing Fx noticed:
Error: document.getElementById(cid) has no properties
Source File: <!-- m --><a class="postlink" href="http://www.ccboe.com/mudd/defaultnew.htm">http://www.ccboe.com/mudd/defaultnew.htm</a><!-- m -->
Line: 114
Is this what you had in mind?
#ddimagetabs{ padding-left:43px }
#ddimagetabs a{
...
margin-left: 4px;
...}Yeah that looks good. Thanks! Still having trouble in IE (for Mac...don't know what it's like on the PC version). I can put a space in there but then it spaces it creates a space that I don't want in FF. Any ideas?I can put a space in thereAnd the antecedent of "there" would be?And the antecedent of "there" would be?
Sorry for not being clear. The <br /> tag would go after Layer 1 </div> tag. Like this: (The only problem is it creates an unwanted space in FF and in IE it doesn't center like it looks in design mode. WYSI(Not)WYG.
<td width="70%" align="center"><div id="Layer1">
<div id="ddimagetabs"><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.ccboe.com/mudd" onMouseover="expandcontent('sc1', this)">Home</a><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.ccboe.com/mudd/handbook.pdf" onMouseover="expandcontent('sc2', this)">Handbook</a> <a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.ccboe.com/schoolmenus.pdf" onMouseover="expandcontent('sc3', this)">Lunch
Menu </a><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.ccboe.com/events/events.htm" onMouseover="expandcontent('sc9', this)">Events</a></div></div><br />
<div id="Layer2">
<div id="ddimagetabs2"><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.ccboe.com" onMouseover="expandcontent('sc4', this)">CCPS
Home </a> <a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.ccboe.com/mudd/teachers/teachersites.htm" onMouseover="expandcontent('sc5', this)">Teacher
Sites </a> <a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.ccboe.com/mudd/news/news.htm" onMouseover="expandcontent('sc6', this)">In
the News </a><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.ccboe.com/mudd/newsletter/newsletter.htm" onMouseover="expandcontent('sc7', this)">Newsletters</a> <a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.ccboe.com/mudd/staff/staff.htm" onMouseover="expandcontent('sc8', this)">Staff
Directory </a></div></div></td>Are those layer divs floated? They should naturally break without an extra tag. Try a clear:both on layer 2.Are those layer divs floated? They should naturally break without an extra tag. Try a clear:both on layer 2.
I was able to do a little rearranging and came up with this: <!-- m --><a class="postlink" href="http://www.ccboe.com/mudd/defaultnew.htm">http://www.ccboe.com/mudd/defaultnew.htm</a><!-- m -->
Does it work for you?
By the way, thanks for all of your help.Yep.
<style type="text/css">
#ddimagetabs{
}
#ddimagetabs a{
display: inline;
text-decoration: none;
font: bold 12px Arial; /*tab font */
color: black; /*font color */
width: 86px; /*width of tab image */
height: 22px; /*height of tab image */
float: left;
display: inline;
margin-left: 1%; /*spacing between tabs */
margin-right: 5%; /*spacing between tabs */
background-image:url(/mudd/bluetab.jpg); /*URL to tab image */
background-repeat: no-repeat;
text-align: center;
}
#ddimagetabs a:hover, #ddimagetabs a.current{
background-image:url(/mudd/bluetabover.jpg); /*URL to tab image onmouseover */
color: black;
}
#ddimagetabs2{
}
#ddimagetabs2 a{
display: inline;
text-decoration: none;
font: bold 12px Arial; /*tab font */
color: black; /*font color */
width: 86px; /*width of tab image */
height: 22px; /*height of tab image */
float: left;
display: inline;
margin-left: 60px; /*spacing between tabs */
background-image:url(/mudd/bluetab.jpg); /*URL to tab image */
background-repeat: no-repeat;
text-align: center;
}
#ddimagetabs2 a:hover, #ddimagetabs a.current{
background-image:url(/mudd/bluetabover.jpg); /*URL to tab image onmouseover */
color: black;
}
#tabcontentcontainer{
width:480px; /*width of 2nd level content*/
height:40px; /*height of 2nd level content. Set to largest's content height to avoid jittering.*/
}
.tabcontent{
display:none;
}
</style>
<script type="text/javascript">
/***********************************************
* DD Tab Menu II script- ?Dynamic Drive DHTML code library (<!-- w --><a class="postlink" href="http://www.dynamicdrive.com">www.dynamicdrive.com</a><!-- w -->)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at <!-- m --><a class="postlink" href="http://www.dynamicdrive.com/">http://www.dynamicdrive.com/</a><!-- m --> for full source code
***********************************************/
//Set tab to intially be selected when page loads:
//[which tab (1=first tab), ID of tab content to display]:
var initialtab=[1, "sc1"]
//Turn menu into single level image tabs (completely hides 2nd level)?
var turntosingle=0 //0 for no (default), 1 for yes
//Disable hyperlinks in 1st level tab images?
var disabletablinks=0 //0 for no (default), 1 for yes
////////Stop editting////////////////
var previoustab=""
if (turntosingle==1)
document.write('<style type="text/css">\n#tabcontentcontainer{display: none;}\n</style>')
function expandcontent(cid, aobject){
if (disabletablinks==1)
aobject.onclick=new Function("return false")
if (document.getElementById && turntosingle==0){
highlighttab(aobject)
if (previoustab!="")
document.getElementById(previoustab).style.display="none"
document.getElementById(cid).style.display="block"
previoustab=cid
}
}
function highlighttab(aobject){
if (typeof tabobjlinks=="undefined")
collectddimagetabs()
for (i=0; i<tabobjlinks.length; i++)
tabobjlinks.className=""
aobject.className="current"
}
function collectddimagetabs(){
var tabobj=document.getElementById("ddimagetabs")
tabobjlinks=tabobj.getElementsByTagName("A")
}
function do_onload(){
collectddimagetabs()
expandcontent(initialtab[1], tabobjlinks[initialtab[0]-1])
}
if (window.addEventListener)
window.addEventListener("load", do_onload, false)
else if (window.attachEvent)
window.attachEvent("onload", do_onload)
else if (document.getElementById)
window.onload=do_onload
</script>
</head>
<body>
<table width="800" align="center">
<tr>
<td width="18%"> </td>
<td width="76%">
<div id="ddimagetabs"><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://url/" onMouseover="expandcontent('sc1', this)">Home</a> <a href=http://www.webdeveloper.com/forum/archive/index.php/"http://url/" onMouseover="expandcontent('sc2', this)">New</a> <a href=http://www.webdeveloper.com/forum/archive/index.php/"http://url/" onMouseover="expandcontent('sc3', this)">Revised</a><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://url/" onMouseover="expandcontent('sc9', this)">Home</a></div></td>
<td width="6%"> </td>
</tr>
</table>
<table width="800" align="center">
<tr>
<td> </td>
<td width="100%">
<div id="ddimagetabs2"><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://url/" onMouseover="expandcontent('sc4', this)">Home</a> <a href=http://www.webdeveloper.com/forum/archive/index.php/"http://url/" onMouseover="expandcontent('sc5', this)">New</a> <a href=http://www.webdeveloper.com/forum/archive/index.php/"http://url/" onMouseover="expandcontent('sc6', this)">Revised</a><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://url/" onMouseover="expandcontent('sc7', this)">Submit</a> <a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.ccboe.com" onMouseover="expandcontent('sc8', this)">CCBOE</a>
</div></td>
<td> </td>
</tr>
</table>
</body>
</html>You'll have better luck if you put that up on the Internet and give us a link.You'll have better luck if you put that up on the Internet and give us a link.
Thank you. I put up the link. Got it really close to what I want...looks great in Firefox but terrible in IE. There's got to be a simpler way. Right now I have the div tags inside layers inside a table row.
<!-- m --><a class="postlink" href="http://www.ccboe.com/mudd/defaultnew.htmOne">http://www.ccboe.com/mudd/defaultnew.htmOne</a><!-- m --> thing Fx noticed:
Error: document.getElementById(cid) has no properties
Source File: <!-- m --><a class="postlink" href="http://www.ccboe.com/mudd/defaultnew.htm">http://www.ccboe.com/mudd/defaultnew.htm</a><!-- m -->
Line: 114
Is this what you had in mind?
#ddimagetabs{ padding-left:43px }
#ddimagetabs a{
...
margin-left: 4px;
...}Yeah that looks good. Thanks! Still having trouble in IE (for Mac...don't know what it's like on the PC version). I can put a space in there but then it spaces it creates a space that I don't want in FF. Any ideas?I can put a space in thereAnd the antecedent of "there" would be?And the antecedent of "there" would be?
Sorry for not being clear. The <br /> tag would go after Layer 1 </div> tag. Like this: (The only problem is it creates an unwanted space in FF and in IE it doesn't center like it looks in design mode. WYSI(Not)WYG.
<td width="70%" align="center"><div id="Layer1">
<div id="ddimagetabs"><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.ccboe.com/mudd" onMouseover="expandcontent('sc1', this)">Home</a><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.ccboe.com/mudd/handbook.pdf" onMouseover="expandcontent('sc2', this)">Handbook</a> <a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.ccboe.com/schoolmenus.pdf" onMouseover="expandcontent('sc3', this)">Lunch
Menu </a><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.ccboe.com/events/events.htm" onMouseover="expandcontent('sc9', this)">Events</a></div></div><br />
<div id="Layer2">
<div id="ddimagetabs2"><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.ccboe.com" onMouseover="expandcontent('sc4', this)">CCPS
Home </a> <a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.ccboe.com/mudd/teachers/teachersites.htm" onMouseover="expandcontent('sc5', this)">Teacher
Sites </a> <a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.ccboe.com/mudd/news/news.htm" onMouseover="expandcontent('sc6', this)">In
the News </a><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.ccboe.com/mudd/newsletter/newsletter.htm" onMouseover="expandcontent('sc7', this)">Newsletters</a> <a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.ccboe.com/mudd/staff/staff.htm" onMouseover="expandcontent('sc8', this)">Staff
Directory </a></div></div></td>Are those layer divs floated? They should naturally break without an extra tag. Try a clear:both on layer 2.Are those layer divs floated? They should naturally break without an extra tag. Try a clear:both on layer 2.
I was able to do a little rearranging and came up with this: <!-- m --><a class="postlink" href="http://www.ccboe.com/mudd/defaultnew.htm">http://www.ccboe.com/mudd/defaultnew.htm</a><!-- m -->
Does it work for you?
By the way, thanks for all of your help.Yep.