Log in

View Full Version : How to center tabs in DD Color Tab II


manjeet
11-20-2006, 01:31 AM
I am using this contribution (DD Color Tab II) and want to center the tabs (instead of left align). What changes do I need to make? Please look at example page - http://www.nightstay.us/footer.html

Thanks for your help!
Manjeet
coothead
11-20-2006, 06:05 PM
Hi there manjeet,

and a warm welcome to these foums. ;)

Firstly, to get IE out of Quirks Mode always use a full DOCTYPE...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
...instead of...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
Secondly change this in your stylesheet...


#invertedtabs {
margin-left: 4px;
padding: 0;
width: 100%;
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
padding-left: 5px;
}
...to this...


#invertedtabs {
margin:auto;
width: 510px;
background-color: transparent;
voice-family: "\"}\"";
voice-family: inherit;
}

coothead
manjeet
11-20-2006, 08:43 PM
Thanks coothead, it worked like a charm! I knew there were still good people on this earth. :-) Thanks for the warm welcome!

I was playing around with "#invertedtabs ul" section after seeing other contributions, and had put "text-align:center" directive and was hoping for it to work, like a switch - left/center/right! Obviously, it has no value.

Thanks again!
Manjeet
coothead
11-20-2006, 09:05 PM
No problem, you're welcome. ;)
tech_support
11-20-2006, 10:14 PM
Next time,

Warning: Please post all Dynamic Drive Script Related Questions here (http://www.dynamicdrive.com/forums/forumdisplay.php?f=2)
marif
01-20-2007, 06:59 PM
Thanks so much for the CSS on centering the tabs! The DD Color Tab II tabs look terrific on the site I had built (Balletpacifica.org (http://balletpacifica.org)). I applied the new definition for #invertedtabs and it works great!

Mari
coothead
01-20-2007, 08:49 PM
http://www.dynamicdrive.com/forums/showpost.php?p=62307&postcount=4 :)
gfin19
01-24-2007, 02:09 PM
What would you do to make it align right?
coothead
01-24-2007, 02:57 PM
What would you do to make it align right?

change this...

#invertedtabs {
margin:auto;
width: 510px;
background-color: transparent;
voice-family: "\"}\"";
voice-family: inherit;
}
...to this...

#invertedtabs {
float:right;
width: 510px;
background-color: transparent;
voice-family: "\"}\"";
voice-family: inherit;
}
coothead
gfin19
01-24-2007, 03:25 PM
I should have thought of that, thanks again.
gfin19
01-24-2007, 03:27 PM
I've another one, does anyone know if there's a way to put a border on the bottom of the tabsline that is not seen above the tabs?

Graham
coothead
01-24-2007, 07:48 PM
Hi there gfin19,

does this help...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
#invertedtabs {
border-bottom:8px solid #050110;
}
#invertedtabs ul{
float:right;
width:510px;
font:bold 11px arial,verdana,sans-serif;
margin:0;
margin-bottom:1px;
padding:0;
list-style-type:none;
text-align:center;
}
#invertedtabs li {
display:inline;
margin:0 2px 0 0;
padding:0;
text-transform:uppercase;
line-height:1.5em;
}
#invertedtabs a {
float:left;
color:#fff;
background-color:#050110;
margin:0 2px 0 0;
padding:0 0 0 3px;
text-decoration:none;
letter-spacing:1px;
}
#invertedtabs a span {
display:block;
padding:3px 9px 3px 6px;
}
#invertedtabs a:hover{
background-color:#150bde;
}
#invertedtabs a:hover span {
background-color:#150bde;
}
#invertedtabs #current a, #invertedtabs #current span {
background-color:#150bde;
}
#invertedtabsline {
clear:both;
padding:0;
width:100%;
height:8px;
line-height:8px;
background:#050110;
border-bottom:1px solid #fff;
}
#clear {
clear:both;
}
</style>

</head>
<body>

<div id="invertedtabsline">&nbsp;</div>

<div id="invertedtabs">

<ul>
<li><a href="#" title="FAQ"><span>FAQ</span></a></li>
<li><a href="#" title="About Us"><span>About Us</span></a></li>
<li><a href="#" title="Terms &amp; Conditions"><span>Terms &amp; Conditions</span></a></li>
<li><a href="#" title="Cancellations"><span>Cancellations</span></a></li>
<li><a href="#" title="Contact Us"><span>Contact Us</span></a></li>
</ul>

<div id="clear"></div>

</div>

</body>
</html>

coothead
girl81
02-26-2007, 04:06 AM
hi..Thanks for the nice codes..
Here i have one question.
May i know how to make the flexible selected menu so that if i choose HOME menu(to display HOME data), it will highlights HOME menu till i choose another menu.Thanks in advance
jorge1145
03-15-2007, 11:31 PM
I'm using Dreamwever 8 and Firefox to center these tabs as described

here's my HTML

<div id="invertedtabsline">&nbsp;</div>

<div id="invertedtabs">
<ul>
<li id="current"><a href="#" title="Home"><span>Home</span></a></li>
<li><a href="#" title="New"><span>New</span></a></li>
<li><a href="#" title="Revised"><span>Revised</span></a></li>
<li><a href="#" title="Tools"><span>Tools</span></a></li>
<li><a href="#" title="DHTML Forums"><span>Forums</span></a></li>
</ul>
</div>

and here's my css

<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ http://www.dynamicdrive.com/forums/showthread.php?t=15023 */

#invertedtabs {
margin:auto;
width: 510px;
background-color: transparent;
voice-family: "\"}\"";
voice-family: inherit;
}

#invertedtabs ul{
font: bold 11px Arial, Verdana, sans-serif;
margin:0;
margin-bottom: 1em; /*margin between menu and rest of content*/
padding:0;
list-style:none;
}

#invertedtabs li{
display:inline;
margin:0 2px 0 0;
padding:0;
text-transform:uppercase;
line-height: 1.5em;
}


#invertedtabs a{
float:left;
color: white;
background: #8b0000 url(images/color_tabs_left2.gif) no-repeat left bottom;
margin:0 2px 0 0;
padding:0 0 0 3px;
text-decoration:none;
letter-spacing: 1px;
}

#invertedtabs a span{
float:left;
display:block;
background: transparent url(images/color_tabs_right2.gif) no-repeat right bottom;
padding:3px 9px 3px 6px;
}

#invertedtabs a span{
float:none;
}


#invertedtabs a:hover{
background-color: #d50509;
}

#invertedtabs a:hover span{
background-color: #d50509;
}

#invertedtabs #current a, #invertedtabs #current span{ /*currently selected tab*/
background-color: #d50509;
}

#invertedtabsline{
clear: both;
padding: 0;
width: 100%;
height: 8px;
line-height: 8px;
background: #8b0000;
border-bottom: 1px solid #fff; /*Remove this to remove border between bar and tabs*/
}

</style>


It's still not centering.. any one know what's up with that?