Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Mar 2011
    Posts
    24
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Center Parent DIV but Not Child

    I have all of the content on my site functioning currently including some a multi level menu inside a table. I need to center the table on the page and of course the menu needs to stay in the correct cell of the table. I have a div wrapper set to position: relative, my table to centered and everything is fine except that my submenus are no longer left floating left agains the vertical top level menu but are instead centered within the wrapper div. As I changed nothing with the submenus css I'm at a loss what the issue is.

    The top level menu is positioned absolute and appear fine. the submenus are positioned relative and though I didnt change anything with that portion of the css I'm not sure why some centering logic is carying through to this child div. I have tried also adding float: left for the submenus but made no difference.

    Any help is greatly appreciated.

  • #2
    New Coder
    Join Date
    Sep 2011
    Posts
    17
    Thanks
    0
    Thanked 2 Times in 2 Posts
    link?

  • #3
    New Coder
    Join Date
    Mar 2011
    Posts
    24
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I can't provide a link as this is an internal site behind the corporate firewall.

  • #4
    New Coder
    Join Date
    Sep 2011
    Posts
    17
    Thanks
    0
    Thanked 2 Times in 2 Posts
    code and some screen shots of the problem ?

  • #5
    New Coder
    Join Date
    Mar 2011
    Posts
    24
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I was really hoping there was something obvious I was missing that someone could suggest such as explicitly defining clearing, floating, adding a div, etc. I can't post screen shots or the code as-is due to a lot of proprietary and confidential information. As I just put in a 16 hr day I'll comb through all my code in a day or so, replacing and stripping most of it out. I'll need to strip most of the page content and recreate certain graphics and menus as well so it's not a quick or easy task due to the nature of the site unfortunately.

  • #6
    New Coder
    Join Date
    Mar 2011
    Posts
    24
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Ok I stripped out almost everything else else except the menu and the code for my page and css are below. I have also included a couple screenshots that show whats happening. The only thing that changed between the 2 screenshot is that I added the <div class="centered"> just before the table.

    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <
    html xmlns="http://www.w3.org/1999/xhtml">
    <
    head>
    <
    meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <
    title>Test</title>

    <
    script type="text/javascript" src="scripts/liveMenu.js"></script>
    <link rel="stylesheet" href="test1.css" type="text/css" media="screen" />

        <script type="text/javascript">
         if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/Android/i)) || (navigator.userAgent.match(/BlackBerry/i)) || (navigator.userAgent.match(/iPhone|iPad|iPod/i))) {
            liveMenu.initOnLoad('siteMenu1', { effect: 'fade', showOn: 'click', duration: 400, mode: 'simultaneous',
                beforeShow: function () { 
                    this.opener.className = 'lm-selected-item';
                },
                beforeHide: function () {
                    this.opener.className = '';
                }
            });
            } else {
            liveMenu.initOnLoad('siteMenu1', { effect: 'fade', showOn: 'mouseenter', duration: 400, mode: 'simultaneous',
                beforeShow: function () { 
                    this.opener.className = 'lm-selected-item';
                },
                beforeHide: function () {
                    this.opener.className = '';
                }
            });
        }
        </script>
    </head>
    <body>
    <div class="centered">
    <table width="1050" cellpadding="0" cellspacing="0" border="1">
    <tr><td colspan="3">Top Content</td></tr>
    <tr height="225">
    <td width="250" valign="top">
            <div id="vertical-menu-container">
            <ul id="siteMenu1" class="lm-vertical lm-menu">
                <li><a href="#"><span class="lm-right-arrow"></span>Menu 1</a>
                    <ul class="lm-vertical lm-right lm-submenu">
                        <li><a href="test1.php">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="#"><span class="lm-right-arrow"></span>Menu 2</a>
                    <ul class="lm-vertical lm-right lm-submenu">
                        <li><a href="#">Item 2.1</a></li>
                        <li><a href="#">Item 2.2</a></li>
                    </ul>
                </li>
                <li><a href="#"><span class="lm-right-arrow"></span>Menu 3</a>
                    <ul class="lm-vertical lm-right lm-submenu">
                        <li><a href="#">Item 3.1</a></li>
                        <li><a href="#">Item 3.2</a></li>
                    </ul>
                </li>
                <li><a href="#"><span class="lm-right-arrow"></span>Menu 4</a>
                    <ul class="lm-vertical lm-right lm-submenu">
                        <li><a href="#">Item 4.1</a></li>
                        <li><a href="#">Item 4.2</a></li>
                    </ul>
                </li>
            </ul>
            </div>
            <br style="clear: both" />
    </td>
    <td width="600" valign="top">Main Content</td>
    <td width="200" bgcolor="#000066" align="center" valign="middle">
    Right Side Content</td>
    </tr>
    </table>
    </div>
    <br /><br />


    </body>
    </html> 
    Code:
    body		{ margin:0px; padding:0px; border:0px; align:center; background-color:#ffffff; }
    
    a:hover{text-decoration:underline;}
    #a:hover{text-decoration:none;}
    
    div.centered 
    {
    text-align: center;
    }
    div.centered table 
    {
    margin: 0 auto; 
    text-align: left;
    }
    
    #vertical-menu-container { position: relative; float: left; margin-top: 0px; width: 250px; }
    #main-content { padding: 0px 0px 0 250px; }
    
    .lm-menu {
        list-style-type: none;
        padding-left: 0px;
        margin-left: 0px;
    	position: absolute;
    	left: 0px;
    	margin: 0px;
    }
    .lm-submenu {
        display: none;
        list-style-type: none;
        position: relative;
        margin: 0px;
        padding-left: 0px;
    }
    .lm-container {
        position: absolute;
        top: 0px;
        overflow: hidden;
        visibility: hidden;
        margin: 0px 0px 0px -20px;
    	padding: 0px;
    }
    .lm-menu li, .lm-submenu li {
        /* Should be specified in order to prevent ie6 unpredictable behaviour */
        width: 250px;
        background: transparent url(bogus); /* url(bogus) is a fix for IE */
    }
    .lm-menu li a, .lm-submenu li a {
        display: block;
    }
    
    .lm-up-arrow {
        width: 11px; height: 8px;
        background: transparent url("images/arrow_up.gif") no-repeat;
        float: right;
        margin-top: 5px;
    }
    
    .lm-right-arrow {
        width: 8px; height: 11px;
        background: transparent url("images/arrow_right.gif") no-repeat;
        float: right;
        margin-top: 5px;
    }
    .lm-down-arrow {
        width: 11px; height: 8px;
        background: transparent url("images/arrow_down.gif") no-repeat;
        float: right;
        margin-top: 5px;
    }
    .lm-left-arrow {
        width: 8px; height: 11px;
        background: transparent url("images/arrow_left.gif") no-repeat;
        float: right;
        margin-top: 5px;
    }
    
    .lm-menu li, .lm-submenu li {
        padding: 0px;
        cursor: pointer;
    }
    
    .lm-menu li { width: 250px; }
    .lm-submenu li { width: 200px; }
    
    .lm-menu li a {
        height: 21px;
        line-height: 21px; /* IE <8 need it */
    	font: bold 12px Verdana;
    	text-decoration: none;
        display: block;
        background: #000066;
        color: #FFFFFF;
        padding: 14px 10px 14px 10px;
    	border-bottom: 1px solid #778;
    	border-right: 1px solid #778;
    }
    
    .lm-submenu li a {
        height: 21px;
        line-height: 21px; /* IE <8 need it */
    	font: 12px Verdana;
    	text-decoration: none;
        display: block;
        background: #000066;
        color: #FFFFFF;
        padding: 14px 10px 14px 10px;
    	border-bottom: 1px solid #778;
    	border-left: 2px ridge #0066CC;
    }
    
    .lm-menu li a:hover, .lm-submenu li a:hover {
        background: #0066CC;
        color: #FFFFFF;
    }
    
    li.lm-selected-item a {
        background: #0066CC;
        color: #FFFFFF;
    }


    Last edited by doby48; 03-06-2013 at 09:02 PM.

  • #7
    New Coder
    Join Date
    Mar 2011
    Posts
    24
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Ok I've figured this issue out. I could have swore I tried this yesterday but all I needed do was decrease my side left margin for the container even more so. Why I needed to change this number so drastically with the change of a left alignment of the table to a center alignment of the table is beyond me. If someone has a logic explanation why, I'd love to know.

    For future reference though the piece that I changed along with the new values is below:

    Code:
    .lm-container {
        position: absolute;
        top: 0px;
        overflow: hidden;
        visibility: hidden;
        margin: -25px 0px 0px -175px;
    	padding: 0px;
    }


  •  

    Posting Permissions

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