PDA

View Full Version : CSS and DIV help



vmondaro
Jun 18th, 2009, 03:38 AM
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):


<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>

abduraooft
Jun 18th, 2009, 08:53 AM
Could you post a link to your page? Do you have a DOCTYPE at the top?

vmondaro
Jun 18th, 2009, 06:06 PM
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:


#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!