Log in

View Full Version : DDTabs in container DIV


charlieboy
07-18-2008, 02:03 PM
Hi there

I have recently downloaded the DD Tabs Menu and really pleased with how easy it is to work with. Unfortunately though I've hit a snag - The site I'm planning to use it in sits within a container DIV to keep the site in the middle of the browser window regardless of how wide or narrow the browser window is. However, when the menu system is placed within this container DIV it moves the submenus away from their parent link.

I have read in other posts that the solution to this is to move the menu system outside of other DIVs, but I can't work out how to keep the menu in it's correct horizontal position relative to the rest of the site while outside of the container DIV so that it moves with the site as the browser window is opened out to the right? I hope this makes sense and would be extremely grateful for any advice.

An example of the menu on a blank page within the container DIV can be seen at http://clients.creativeph.co.uk/testfolder/newmenu.htm.

Many thanks in advance
jscheuer1
07-18-2008, 02:51 PM
At least on your demo (and in most cases with these sort of situations), you don't need to put the menu outside the centering element, just its drop downs. Put them as the first thing after the opening <body> tag:


. . . ght: 0;
margin: 0 auto;
width: 760px;
text-align: left;
}

-->
</style><body>
<!--1st drop down menu -->
<div id="group" class="dropdowns">
<a href="aboutus.htm" target="_self">About Us / Philosophy</a>
<a href="csr.htm" target="_self">CSR</a>
<a href="environmentalpolicy.htm" target="_self">Environmental Policy</a>
<a href="distribution.htm" target="_self">Distribution</a>
</div>


<!--2nd drop down menu -->
<div id="divisions" class="dropdowns">
<a href="division1.htm" target="_self">division1</a>
<a href="division2.htm" target="_self">division2</a>
<a href="division3.htm" target="_self">division3</a>
<a href="division4.htm" target="_self">division4</a>
</div>

<!--3rd drop down menu -->
<div id="products" class="dropdowns">
<a href="stationery.htm" target="_self">Stationery, Software &amp; Computer Supplies</a>
<a href="itbusequipment.htm" target="_self">IT, Business Equipment &amp; Media Solutions</a>
<a href="officefurniture.htm" target="_self">Office Furniture</a>
<a href="meetingandboardroom.htm" target="_self">Meeting &amp; Boardroom Supplies</a>
<a href="archivalandcraterental.htm" target="_self">Archival &amp; Crate Rental</a>
<a href="corpclothingpromo.htm" target="_self">Corporate Clothing &amp; Promotional Merchandising</a>
<a href="janitorialsupplies.htm" target="_self">Janitorial Supplies</a>
<a href="digitaldictation.htm" target="_self">Digital Dictation Solutions</a>
<a href="liquidandprintgold.htm" target="_self">Liquid &amp; Print Gold</a>
<a href="fooddrinkandcatering.htm" target="_self">Food / Drink / Catering</a>
</div>

<!--4th drop down menu -->
<div id="contacts" class="dropdowns">
<a href="contactus.htm" target="_self">Contact Details</a>
<a href="howtofindus.htm" target="_self">How to find Us</a>
<a href="#">Open an Account</a>
<a href="#">Site Map</a>
</div>
<h2>3) Example 3</h2>

<p>Note that the CSS for this menu style requires each menu item be wrapped in an additional <span> tag.</p>
<div id="centered">
<div id="slidemenu" class="slide . . .
charlieboy
07-18-2008, 03:04 PM
That's done it!!:)
Thank you so much for your swift answer and solving a problem that's puzzled me for most of the morning.
Kind regards
Paul