Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 2 of 2
  1. #1
    Junior Member
    Join Date
    Oct 2012
    Posts
    2
    Member #
    33173
    Hi guys! I just started a new website and I'm new to CSS. (http://gaminggearreviews.servegame.com)
    I'm using DW and one of the templates, and expanding from there.

    I'm having trouble with my spry horizontal drop down menu, as it does not overflow to other divs as instructed, and ends up just being hidden.

    Here's some code of what is going on.

    HTML Code:
    .container {
        width: 960px;
        background-color: #FFF;
        margin: 0 auto;
        overflow: hidden;
    }
    .topbar {
        float: left;
        width: 960px;
        height: 200px;
        background-image: url(images/topbar.gif);
        background-size: contain;
    }
    .menu {
        padding: 159px 0 0 445px;
        overflow: visible;
    }
    ...
    
    <div class="container">
      <div class="topbar">
        <div class="menu">
          <ul id="MenuBar1" class="MenuBarHorizontal">
            <li><a class="MenuBarItemSubmenu" href="#">Item 1</a>
              <ul>
                <li><a href="#">Item 1.1</a></li>
                <li><a href="#">Item 1.2</a></li>
                <li><a href="#">Item 1.3</a></li>
              </ul>
            </li>
            <li><a href="#">Item 2</a></li>
            <li><a class="MenuBarItemSubmenu" href="#">Item 3</a>
              <ul>
                <li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
                  <ul>
                    <li><a href="#">Item 3.1.1</a></li>
                    <li><a href="#">Item 3.1.2</a></li>
                  </ul>
                </li>
                <li><a href="#">Item 3.2</a></li>
                <li><a href="#">Item 3.3</a></li>
              </ul>
            </li>
            <li><a href="#">Item 4</a></li>
          </ul>
        </div>
      </div>
    </div>
    
    <div class="container">
      <div class="sidebar1">
        <ul class="nav">
          <li><a href="#">Previews</a></li>
          <li><a href="#">Reviews</a></li>
          <li><a href="#">Downloads</a></li>
          <li><a href="#">Forum</a></li>
        </ul>
    
    ...
    As you can see container div has overflow hidden which keeps my site a nice square, if it is visible it becomes jagged.
    I have set overflow to visible in the menu div in the hopes it will allow overflow to the content below, but the menu bar appears to dive under the content below.
    If I remove the topbar div from the container div my top bar ends up to the left of my page instead of organized on top with the rest of my site.

    What do I have to do to get my menu visible?

  2.  

  3. #2
    Junior Member
    Join Date
    Oct 2012
    Posts
    2
    Member #
    33173
    Well answered my own question...

    I misconstrued the documentation a little.

    By setting overflow to visible in container div and then adding "<br class="clearfloat" />" after my final floated column in a seperate container div, I can see my menu and my page remains square. Awesome! = )


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 10:18 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com