Results 1 to 3 of 3

Thread: DDTabs in container DIV

  1. #1
    Join Date
    Jul 2008
    Thanked 0 Times in 0 Posts

    Default DDTabs in container DIV

    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

    Many thanks in advance

  2. #2
    Join Date
    Mar 2005
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries


    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;
    <!--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>
    <!--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>
    <!--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>
    <!--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>
    <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 . . .
    - John

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jul 2008
    Thanked 0 Times in 0 Posts


    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


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts