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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS and DIV help

    I'm doing CSS frames with a bunch of nested divs. my problem is the menu that pops out on the left partially comes out behind the top and mainpage divs. I tried doing z-index, but I'm not having any luck. Can someone help me figure this out?

    my code looks like this (without content):

    Code:
    <style type="text/css">
    
    body{
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    height: 100%; 
    max-height: 100%; 
    }
    
    #framecontentLeft, #framecontentTop{
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 200px;
    height: 100%;
    overflow: hidden;
    background-color: navy;
    color: white;
    }
    
    #framecontentTop{ 
    left: 200px;
    right: 0;
    width: auto;
    height: 120px;
    overflow: hidden;
    background-color: navy;
    color: white;
    }
    
    #maincontent{
    position: fixed; 
    left: 200px;
    top: 120px;
    right: 0;
    bottom: 0;
    overflow: auto; 
    background: #fff;
    }
    
    .innertube{
    margin: 15px;
    }
    
    * html body{ padding: 120px 0 0 200px;}
    
    * html #maincontent{ 
    height: 100%; 
    width: 100%; 
    }
    
    * html #framecontentTop{ width: 100%;}
    
    #navigation {width:150px; font-size:12px;}
    
    /*Main Menu*/
    #navigation ul {margin:0px; padding:0px; background-color:#666;}
    
    #navigation ul li {
    height:25px;
    line-height:25px; 
    list-style:none; 
    padding-left:10px;
    
    color:#FFF; 
    border-top:#fff solid; 
    border-bottom:#fff solid; 
    border-width:1px;
    cursor:pointer; 
    }
    #navigation ul li:hover {background-color:#F90; position:relative;}
    
    /*Sub Menu*/
    #navigation ul ul {display:none; position:absolute; left:75px; top:5px; border:#fff solid; border-width:1px; background-color:#999; }
    #navigation ul li:hover ul {display:block;}
    
    #navigation ul ul li { width:150px; float:left; display:inline; border:none;}
    #navigation ul ul li:hover {text-decoration:underline; border:none;}
    
    #navigation li:hover ul li ul {display:none;}
    
    #navigation ul ul li ul {left:110px; background-color:#0099CC;}
    #navigation ul ul li:hover ul {display:block;}
    
    
    </style>
    
    </head>
    
    <body>
    
    <div id="framecontentLeft">
    <div class="innertube">
    
    <div id="navigation">
        	<ul>
            	<li>Home
                	<ul>
    
                    	<li>Sub Menu Item 1</li>
                        <li>Sub Menu Item 2
                        	<ul>
                            	<li>Sub Sub Menu Item 1</li>
                                <li>Sub Sub Menu Item 2</li>
                                <li>Sub Sub Menu Item 3</li>
                                <li>Sub Sub Menu Item 4</li>
    
                            </ul>                    
                        </li>
                        <li>Sub Menu Item 3</li>
                        <li>Sub Menu Item 3</li>
                    </ul>
                </li>
                <li>About</li>
                <li>Contact</li>
    
                <li>FAQ
                    <ul>
                    	<li>Sub Menu Item 1</li>
                        <li>Sub Menu Item 3
                        	<ul>
                            	<li>Sub Sub Menu Item 1</li>
                                <li>Sub Sub Menu Item 2</li>
                                <li>Sub Sub Menu Item 3</li>
    
                                <li>Sub Sub Menu Item 4</li>
                            </ul>                    
                        </li>
                    </ul>
                </li>
                <li>News
                	<ul>
                    	<li>Sub Menu Item 1
                        	<ul>
                            	<li>Sub Sub Menu Item 1</li>
    
                                <li>Sub Sub Menu Item 2</li>
                                <li>Sub Sub Menu Item 3</li>
                                <li>Sub Sub Menu Item 4</li>
                            </ul>
                        </li>
                        <li>Sub Menu Item 2</li>
                        <li>Sub Menu Item 3</li>
    
                    </ul>            
                </li>
            </ul>
        </div>
    
    
    </div>
    </div>
    
    <div id="framecontentTop">
    <div class="innertube">
    
    <h1>Title Text</h1>
    
    </div>
    </div>
    
    
    <div id="maincontent">
    <div class="innertube">
    
    <h1>Main Text</h1>
    
    </div>
    </div>
    Last edited by vmondaro; 06-18-2009 at 06:16 AM.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,864
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Could you post a link to your page? Do you have a DOCTYPE at the top?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up

    I did not have a DOCTYPE set, but that didn't help, however, I found the problem and it was staring me right in the face.

    Here's the code for the left frame:

    Code:
    #framecontentLeft, #framecontentTop{
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 200px;
    height: 100%;
    overflow: hidden;
    background-color: navy;
    color: white;
    }
    All I had to do is change the overflow to visible and everything worked fine! I can't believe I didn't see that sooner!


  •  

    Posting Permissions

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