PDA

View Full Version : DD Tab Menu II - centering on page??



jungletim
08-01-2005, 07:36 PM
hey..just woundering how you centralise this script on a page....

iv tried putting it in a table..but then the text bellow the tabs drops by a line...very confused...cheers!!

tim

jscheuer1
08-02-2005, 03:50 PM
I worked on this yesterday and I didn't like my solution as it will require tweaking to get it to look good depending upon the length of the titles displayed in the tabs (padding with the   character & individualized negative right margins, in some cases). This is required for Mozilla, mostly but, we'd want it to work well there too, right? There are also some general changes to the style and markup. However, since no one else has jumped in with a better solution, here is what I've got (from the demo):

<html>
<head>
<title>Centered CSS Tab - Demo (DD Tab Menu II)</title>
<style type="text/css">

#ddimagetabs{
}

#ddimagetabs a{
display: block;
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 */
display: inline;
margin-left: -2px; /*spacing between tabs */
padding: 4px 23px; /*vertical offset of tab text from top of tab*/
background-image:url(../bluetab.jpg); /*URL to tab image */
background-repeat: no-repeat;
text-align: center;
}

#ddimagetabs a:hover, #ddimagetabs a.current{
background-image:url(../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.*/
text-align:left;
padding-left:130px;
}

* html #tabcontentcontainer{ /*padding for IE is half that for other browsers*/
padding-left:65px;
}

.tabcontent{
display:none;
}

</style>

<script type="text/javascript">

/***********************************************
* DD Tab Menu II script- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ 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[i].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>
<br>&nbsp;
<center>
<div id="ddimagetabs">
<a style="margin-right:-2px;" href="http://url/" onclick="expandcontent('sc1', this);return false;">&nbsp;Home&nbsp;&nbsp;</a> <a href="http://url/" onclick="expandcontent('sc2', this);return false;">&nbsp;&nbsp;New&nbsp;&nbsp;&nbsp;</a> <a style="margin-right:-7px;" href="http://url/" onclick="expandcontent('sc3', this);return false;">Revised&nbsp;&nbsp;</a><a href="http://url/" onclick="expandcontent('sc4', this);return false;">Submit</a>
</div>
<DIV id="tabcontentcontainer">

<div id="sc1" class="tabcontent">
Return to the <a href="http://www.dynamicdrive.com">frontpage</a> of Dynamic Drive.
</div>

<div id="sc2" class="tabcontent">
See the new scripts recently added to Dynamic Drive. <a href="http://www.dynamicdrive.com/new.htm">Click here</a>.
</div>

<div id="sc3" class="tabcontent">
A listing of scripts recently changed, plus description of the changes. <a href="http://www.dynamicdrive.com/revised.htm">Revised Section</a>.
</div>

<div id="sc4" class="tabcontent">
Have a great script you wish to submit to Dynamic Drive for possible inclusion? <a href="http://www.dynamicdrive.com/submitscript.htm">Click here</a>.
</div>

</DIV></center>
</body>
</html>