Mouseover Tabs ***Centering***

[dani-wu]

1) Script Title: Mouseover Tabs

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/mouseovertabs.htm

3) Describe problem:

I've applied the script to my header. Please see my progress here: http://www.kisssmileandskincare.ca/new/header.htm

What I'm wondering is how to have the submenu centered below each image rather than flush left. Do I change this in the .js or .css document?

Thanks so much in advance for your help.

I'm almost there!!!!

[Snookerman]

Try this:

.tabsmenucontent {
display:none;
position:relative;
margin:auto;
}

[dani-wu]

I don't think that will work....

I've done some horrible work around with spacers!!!!
http://www.kisssmileandskincare.ca/new/

Seems to be working except when you reach "contact us" on the right. I can't stop it from bumping to the line below *does that even make any sense*???

Here are the links to my other files:
http://www.kisssmileandskincare.ca/new/mouseovertabs.css
http://www.kisssmileandskincare.ca/new/submenucontents.htm
http://www.kisssmileandskincare.ca/new/mouseovertabs.js

[ddadmin]

There are many ways to indent the sub menu contents so it lines up with the tab that shows it. You can try using CSS's margin-left property, for example:


<div class="tabsmenucontent">
<ul>
<li><a href="http://www.javascriptkit.com">Home</a></li>
<li><a href="http://www.javascriptkit.com/cutpastejava.shtml">Free JavaScripts</a></li>
<li><a href="http://www.javascriptkit.com/javatutors/">JS Tutorials</a></li>
<li><a href="http://www.javascriptkit.com/jsref/">JS Reference</a></li>
<li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li>
<li><a href="http://www.javascriptkit.com/java/">Applets</a></li>
<li><a href="http://www.codingforums.com">Coding Forums</a></li>
</ul>
</div>

<div class="tabsmenucontent" style="margin-left:100px">
<ul>
<li><a href="http://www.cssdrive.com">Gallery</a></li>
<li><a href="http://www.cssdrive.com/index.php/menudesigns/">Menu Designs</a></li>
<li><a href="http://www.cssdrive.com/index.php/news/">News</a></li>
<li><a href="http://www.cssdrive.com/index.php/examples/">Examples</a></li>

</ul>

<div class="tabsmenucontent" style="margin-left:250px">
<ul>
<li><a href="http://www.cssdrive.com">Gallery</a></li>
<li><a href="http://www.cssdrive.com/index.php/menudesigns/">Menu Designs</a></li>
<li><a href="http://www.cssdrive.com/index.php/news/">News</a></li>
<li><a href="http://www.cssdrive.com/index.php/examples/">Examples</a></li>

</ul>
</div>
</div>

<br style="clear:left" />

[dani-wu]

This simplified everything!