Results 1 to 4 of 4

Thread: blank space at bottom of pages using Anylink CSS menu with drop-down divs

  1. #1
    Join Date
    Oct 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default blank space at bottom of pages using Anylink CSS menu with drop-down divs

    I'm using the Anylink CSS menu on a web site. I have 3 drop-down menus on each site page. Each drop-down menu is created using a set of div tags, such as:

    Code:
    <div id="submenu2" class="anylinkcss">
    <ul>
    <li><a href="contractor_benefits.php">Benefits to Contractors</a></li>
    <li><a href="contractor_testimonials.php">Contractor Testimonials</a></li>
    </ul>
    </div>
    When I have these drop-down menu chunks of code on the page, it causes my browser scroll bar to become longer and for there to be about 300 pixels height of blank space below the content of the web page.

    I tried moving the drop-down menu div tags to the bottom of the HTML code before the closing body tag. That did not help. When I deleted the drop-down menu div tags from the code, the blank space disappeared.

    Any suggestions on how to get rid of this empty space at the bottom of the site pages? Thanks!
    Last edited by jscheuer1; 10-28-2011 at 04:59 PM. Reason: Format

  2. #2
    Join Date
    Aug 2004
    Posts
    9,887
    Thanks
    3
    Thanked 963 Times in 952 Posts
    Blog Entries
    15

    Default

    Inside anylinkcssmenu.css, make sure you have retained the below rule at the very end:

    Code:
    /* ######### class for shadow DIV ######### */
    
    
    .anylinkshadow{ /*CSS for shadow. Keep this as is */
    position: absolute;
    left: 0;
    top: 0;
    z-index: 99; /*zIndex for shadow*/
    background: black;
    visibility: hidden;
    }
    Deleting this would cause a gap to appear.
    DD Admin

  3. #3
    Join Date
    Oct 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    GREAT! This is just the info I needed. I ended up deleting the CSS code for the shadow because I couldn't get it to position correctly for both the vertical and horizontal drop-down menus on the pages. But I simply put the code back in and changed the background property to none and the extra space at the bottom of the page has disappeared. Thanks!

  4. #4
    Join Date
    Aug 2004
    Posts
    9,887
    Thanks
    3
    Thanked 963 Times in 952 Posts
    Blog Entries
    15

    Default

    Instead of disabling the shadow by hacking the CSS, you can also do this by changing the setting in red inside the .js file:

    Code:
    effects: {delayhide: 200, shadow:{enabled:true, opacity:0.3, depth: [5, 5]}, fade:{enabled:true, duration:500}}, //customize menu effects
    DD Admin

Bookmarks

Posting Permissions

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