ldbillings
03-13-2009, 08:06 PM
I hope someone can offer me some advice here. I have been trying to figure this out for days.
My problem is that I am using a vertical flyout menu on the left side of my page, and I have text to the right of it. Somehow, the menu section is overlapping my text, and I cannot figure out why.
I will post my code below. Please note the crazy colors are just so I can see what is going on. I don't plan to leave them on my page.
Here's the CSS:
[CODE]
#xsnazzy h1, #xsnazzy h2, #xsnazzy p {margin:0 10px; letter-spacing:1px;}
#xsnazzy h1 {font-size:2.5em; color:#fff;}
#xsnazzy h2 {font-size:2em;color:#06a; border:0;}
#xsnazzy p {padding-bottom:0.5em;}
#xsnazzy h2 {padding-top:0.5em;}
#xsnazzy {background: transparent; margin:150px 1em; position: absolute; top: 20px; left: -11px; width: 890px; z-index: 1;}
.xtop, .xbottom {display:block; background:transparent; font-size:1px;}
.xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden;}
.xb1, .xb2, .xb3 {height:1px;}
.xb2, .xb3, .xb4 {background:white; border-left:1px solid #18c99d; border-right:1px solid #18c99d;}
.xb1 {margin:0 5px; background:#18c99d;}
.xb2 {margin:0 3px; border-width:0 2px;}
.xb3 {margin:0 2px;}
.xb4 {height:2px; margin:0 1px;}
.xboxcontent {display:block; background:blue; border:0 solid #18c99d; border-width:0 1px; z-index: 2; height: 600px;}
.xboxcontent2 {display:block; background:blue; border:1 solid black; border-width: 1px; position: absolute; left: 220px; z-index: 100;}
.menu{
margin:0px;
padding:0;
padding-bottom: 0px;
padding-top: 0px;
width:1px;
list-style:none;
background:green;
position: absolute;
top: 180px;
left: 15px;
z-index: 20;
}
.menu ul {padding-right: 0px; padding-left: 0px; z-index: 500; padding-bottom: 0px; margin: 0px; width: 15em; padding-top: 0px; list-style-type: none; position: relative}
.menu li{
padding:0,0;
margin:0 0 0 0;
height:30px;
}
.menu li a{
text-align:left;
height:30px;
padding:5px 25px;
font:12px Verdana, Arial, Helvetica, sans-serif;
color:rgb(255,255,255);
display:block;
background:url('verMenuImages.png') 0px 0px no-repeat;
text-decoration:none;
}
.menu li a:hover{
background:url('verMenuImages.png') 0px -40px no-repeat;
color:rgb(241,247,146);
}
.menu li a.active, .menu li a.active:hover{background:url('verMenuImages.png') 0px -80px no-repeat; color:rgb(255,255,255);}
.menu li a span{line-height:30px;padding:0;}
/* .menu li.sub {background-color: #cccc99} */
.menu table {margin-top: 0px; font-size: 1em; z-index: 100; left: 0px; position: absolute; top: 0px; border-collapse: collapse; padding:0;}
/*.menu a {border-right: #ffffff 1px solid; border-top: #ffffff 1px solid; display: block; padding-left: 1em; font-weight: normal; text-transform: none; border-left: #ffffff 1px solid; width: 11em; color: #000000; line-height: 2em; border-bottom: #ffffff 1px solid; font-style: normal; height: 2em; font-variant: normal; text-decoration: none}*/
/*.menu a:visited {border-right: #ffffff 1px solid; border-top: #ffffff 1px solid; display: block; padding-left: 1em; font-weight: normal; text-transform: none; border-left: #ffffff 1px solid; width: 11em; color: #000000; line-height: 2em; border-bottom: #ffffff 1px solid; font-style: normal; height: 2em; font-variant: normal; text-decoration: none}*/
.menu b {float: right; margin-right: 5px; padding:0;}
* html .menu a {width: 20em}
* html .menu a:visited {width: 40em}
* html .menu a:hover {font-weight: normal; text-transform: none; color:rgb(241,247,146); font-style: normal; position: relative; background:url('verMenuImages.png'); font-variant: normal; text-decoration: none; width: 200px; }
.menu li:hover {position: relative;}
/*.menu a:active {font-weight: normal; text-transform: none; color: #ccff66; font-style: normal; background-color: #999966; font-variant: normal; text-decoration: none} */
.menu a:focus {font-weight: normal; text-transform: none; color: #ccff66; font-style: normal; background-color: #999966; font-variant: normal; text-decoration: none;}
.menu li:hover > a {font-weight: normal; text-transform: none; color: #ccff66; font-style: normal; background-color: #999966; font-variant: normal; text-decoration: none;}
.menu li ul {padding-right: 2em; padding-left: 2em; left: 7em; visibility: hidden; padding-bottom: 2em; padding-top: 2em; position: absolute; top: -2em; left: 150px;}
/*.menu li ul li {background-color: red;}*/
.menu li:hover > ul {visibility: visible}
.menu ul a:hover ul ul {visibility: hidden}
.menu ul a:hover ul a:hover ul ul {visibility: hidden}
.menu ul a:hover ul a:hover ul a:hover ul ul {visibility: hidden}
.menu ul a:hover ul {visibility: visible}
.menu ul a:hover ul a:hover ul {visibility: visible}
/*.menu ul a:hover ul a:hover ul a:hover ul {visibility: visible}
.menu ul a:hover ul a:hover ul a:hover ul a:hover ul {visibility: visible} */
#header { position: absolute; top: 0px; left: 0px;
width: 100%; }
#containmenu { position: absolute; left: 0px;
width: 200px; z-index: 20;}
#content { position: absolute; top: 200px; left: 200px;
width: 100%; background-color: #FFFFFF;
color: #000000"}[CODE]
Here's the HTML:
[CODE]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css">
<title>Greater Long Green Community Association</title>
</head>
<body bgcolor="c4f5e9">
<div id="header">
<img src="menu-top.gif" width="900" height="171" alt="Greater Long Green Community Association">
</div>
<div id="containmenu">
div is containmenu
<div class="menu">
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">
About
<!--[if IE 7]>
</a>
<![endif]-->
<!--[if lte IE 6]>
<table>
<TR>
<td>
<![endif]-->
<ul>
<li>
<a href="1">Mission Statement</a>
</li>
<li>
<a href="1">Board Members</a>
</li>
<li>
<a href="1">Bylaws</a>
</li>
<li>
<a href="1">Newsletter</a>
</li>
</ul>
<!--[if lte IE 6]>
</td>
</TR>
</table>
</a>
<![endif]-->
</li>
<li>
<a href="#">Calendar<!--[if IE 7]>
</a>
<![endif]-->
<!--[if lte IE 6]>
<table>
<TR>
<td>
<![endif]-->
<ul>
<li>
<a href="1">Meetings</a>
</li>
<li>
<a href="1">Activities</a>
</li>
<li>
<a href="1">More Info</a>
</li>
</ul>
<!--[if lte IE 6]>
</td>
</TR>
</table>
</a>
<![endif]-->
</li>
<li>
<a href="#">Membership<!--[if IE 7]>
</a>
<![endif]-->
<!--[if lte IE 6]>
<table>
<TR>
<td>
<![endif]-->
<ul>
<li>
<a href="1">Eligibility</a>
</li>
<li>
<a href="1">Map</a>
</li>
<li>
<a href="1">Membership Form</a>
</li>
</ul>
<!--[if lte IE 6]>
</td>
</TR>
</table>
</a>
<![endif]-->
</li>
<li>
<a href="history.html">History</a>
</li>
<li>
<a href="links.html">Links</a>
</li>
</ul>
div is menu
</div>
</div>
<div id="xsnazzy">
<b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b>
<div class="xboxcontent">
<p> </p>
<div class="xboxcontent2">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
</div>
<b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>
</div>
<br class="clear" /><br/>
</div>
<!--
<center>
<table cellpadding=0 cellspacing=0 border=1>
<tr>
<td colspan=3><img src="menu-top.gif"></td>
</tr>
<tr>
<td colspan=3><img src="main-top.gif"></td>
</tr>
<tr>
<tr>
<td background="menu-middle.gif">
<ul class="menu">
<li><a href="#" class="active"><span>Home</span></a></li>
<li><a href="#"><span>About</span></a></li>
<li><a href="#"><span>Membership</span></a></li>
<li><a href="#"><span>Calendar</span></a></li>
<li><a href="#"><span>Newsletter</span></a></li>
<li><a href="#"><span>By-Laws</span></a></li>
<li><a href="#"><span>Links</span></a></li>
</ul>
<div id="copy">
insert copy here
</div>
</td>
</tr>
<tr>
<td><img src="menu-bottom.gif"></td>
</tr>
</table>
</center>
-->
</body>
</html>[CODE]
My problem is that I am using a vertical flyout menu on the left side of my page, and I have text to the right of it. Somehow, the menu section is overlapping my text, and I cannot figure out why.
I will post my code below. Please note the crazy colors are just so I can see what is going on. I don't plan to leave them on my page.
Here's the CSS:
[CODE]
#xsnazzy h1, #xsnazzy h2, #xsnazzy p {margin:0 10px; letter-spacing:1px;}
#xsnazzy h1 {font-size:2.5em; color:#fff;}
#xsnazzy h2 {font-size:2em;color:#06a; border:0;}
#xsnazzy p {padding-bottom:0.5em;}
#xsnazzy h2 {padding-top:0.5em;}
#xsnazzy {background: transparent; margin:150px 1em; position: absolute; top: 20px; left: -11px; width: 890px; z-index: 1;}
.xtop, .xbottom {display:block; background:transparent; font-size:1px;}
.xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden;}
.xb1, .xb2, .xb3 {height:1px;}
.xb2, .xb3, .xb4 {background:white; border-left:1px solid #18c99d; border-right:1px solid #18c99d;}
.xb1 {margin:0 5px; background:#18c99d;}
.xb2 {margin:0 3px; border-width:0 2px;}
.xb3 {margin:0 2px;}
.xb4 {height:2px; margin:0 1px;}
.xboxcontent {display:block; background:blue; border:0 solid #18c99d; border-width:0 1px; z-index: 2; height: 600px;}
.xboxcontent2 {display:block; background:blue; border:1 solid black; border-width: 1px; position: absolute; left: 220px; z-index: 100;}
.menu{
margin:0px;
padding:0;
padding-bottom: 0px;
padding-top: 0px;
width:1px;
list-style:none;
background:green;
position: absolute;
top: 180px;
left: 15px;
z-index: 20;
}
.menu ul {padding-right: 0px; padding-left: 0px; z-index: 500; padding-bottom: 0px; margin: 0px; width: 15em; padding-top: 0px; list-style-type: none; position: relative}
.menu li{
padding:0,0;
margin:0 0 0 0;
height:30px;
}
.menu li a{
text-align:left;
height:30px;
padding:5px 25px;
font:12px Verdana, Arial, Helvetica, sans-serif;
color:rgb(255,255,255);
display:block;
background:url('verMenuImages.png') 0px 0px no-repeat;
text-decoration:none;
}
.menu li a:hover{
background:url('verMenuImages.png') 0px -40px no-repeat;
color:rgb(241,247,146);
}
.menu li a.active, .menu li a.active:hover{background:url('verMenuImages.png') 0px -80px no-repeat; color:rgb(255,255,255);}
.menu li a span{line-height:30px;padding:0;}
/* .menu li.sub {background-color: #cccc99} */
.menu table {margin-top: 0px; font-size: 1em; z-index: 100; left: 0px; position: absolute; top: 0px; border-collapse: collapse; padding:0;}
/*.menu a {border-right: #ffffff 1px solid; border-top: #ffffff 1px solid; display: block; padding-left: 1em; font-weight: normal; text-transform: none; border-left: #ffffff 1px solid; width: 11em; color: #000000; line-height: 2em; border-bottom: #ffffff 1px solid; font-style: normal; height: 2em; font-variant: normal; text-decoration: none}*/
/*.menu a:visited {border-right: #ffffff 1px solid; border-top: #ffffff 1px solid; display: block; padding-left: 1em; font-weight: normal; text-transform: none; border-left: #ffffff 1px solid; width: 11em; color: #000000; line-height: 2em; border-bottom: #ffffff 1px solid; font-style: normal; height: 2em; font-variant: normal; text-decoration: none}*/
.menu b {float: right; margin-right: 5px; padding:0;}
* html .menu a {width: 20em}
* html .menu a:visited {width: 40em}
* html .menu a:hover {font-weight: normal; text-transform: none; color:rgb(241,247,146); font-style: normal; position: relative; background:url('verMenuImages.png'); font-variant: normal; text-decoration: none; width: 200px; }
.menu li:hover {position: relative;}
/*.menu a:active {font-weight: normal; text-transform: none; color: #ccff66; font-style: normal; background-color: #999966; font-variant: normal; text-decoration: none} */
.menu a:focus {font-weight: normal; text-transform: none; color: #ccff66; font-style: normal; background-color: #999966; font-variant: normal; text-decoration: none;}
.menu li:hover > a {font-weight: normal; text-transform: none; color: #ccff66; font-style: normal; background-color: #999966; font-variant: normal; text-decoration: none;}
.menu li ul {padding-right: 2em; padding-left: 2em; left: 7em; visibility: hidden; padding-bottom: 2em; padding-top: 2em; position: absolute; top: -2em; left: 150px;}
/*.menu li ul li {background-color: red;}*/
.menu li:hover > ul {visibility: visible}
.menu ul a:hover ul ul {visibility: hidden}
.menu ul a:hover ul a:hover ul ul {visibility: hidden}
.menu ul a:hover ul a:hover ul a:hover ul ul {visibility: hidden}
.menu ul a:hover ul {visibility: visible}
.menu ul a:hover ul a:hover ul {visibility: visible}
/*.menu ul a:hover ul a:hover ul a:hover ul {visibility: visible}
.menu ul a:hover ul a:hover ul a:hover ul a:hover ul {visibility: visible} */
#header { position: absolute; top: 0px; left: 0px;
width: 100%; }
#containmenu { position: absolute; left: 0px;
width: 200px; z-index: 20;}
#content { position: absolute; top: 200px; left: 200px;
width: 100%; background-color: #FFFFFF;
color: #000000"}[CODE]
Here's the HTML:
[CODE]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css">
<title>Greater Long Green Community Association</title>
</head>
<body bgcolor="c4f5e9">
<div id="header">
<img src="menu-top.gif" width="900" height="171" alt="Greater Long Green Community Association">
</div>
<div id="containmenu">
div is containmenu
<div class="menu">
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">
About
<!--[if IE 7]>
</a>
<![endif]-->
<!--[if lte IE 6]>
<table>
<TR>
<td>
<![endif]-->
<ul>
<li>
<a href="1">Mission Statement</a>
</li>
<li>
<a href="1">Board Members</a>
</li>
<li>
<a href="1">Bylaws</a>
</li>
<li>
<a href="1">Newsletter</a>
</li>
</ul>
<!--[if lte IE 6]>
</td>
</TR>
</table>
</a>
<![endif]-->
</li>
<li>
<a href="#">Calendar<!--[if IE 7]>
</a>
<![endif]-->
<!--[if lte IE 6]>
<table>
<TR>
<td>
<![endif]-->
<ul>
<li>
<a href="1">Meetings</a>
</li>
<li>
<a href="1">Activities</a>
</li>
<li>
<a href="1">More Info</a>
</li>
</ul>
<!--[if lte IE 6]>
</td>
</TR>
</table>
</a>
<![endif]-->
</li>
<li>
<a href="#">Membership<!--[if IE 7]>
</a>
<![endif]-->
<!--[if lte IE 6]>
<table>
<TR>
<td>
<![endif]-->
<ul>
<li>
<a href="1">Eligibility</a>
</li>
<li>
<a href="1">Map</a>
</li>
<li>
<a href="1">Membership Form</a>
</li>
</ul>
<!--[if lte IE 6]>
</td>
</TR>
</table>
</a>
<![endif]-->
</li>
<li>
<a href="history.html">History</a>
</li>
<li>
<a href="links.html">Links</a>
</li>
</ul>
div is menu
</div>
</div>
<div id="xsnazzy">
<b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b>
<div class="xboxcontent">
<p> </p>
<div class="xboxcontent2">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
</div>
<b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>
</div>
<br class="clear" /><br/>
</div>
<!--
<center>
<table cellpadding=0 cellspacing=0 border=1>
<tr>
<td colspan=3><img src="menu-top.gif"></td>
</tr>
<tr>
<td colspan=3><img src="main-top.gif"></td>
</tr>
<tr>
<tr>
<td background="menu-middle.gif">
<ul class="menu">
<li><a href="#" class="active"><span>Home</span></a></li>
<li><a href="#"><span>About</span></a></li>
<li><a href="#"><span>Membership</span></a></li>
<li><a href="#"><span>Calendar</span></a></li>
<li><a href="#"><span>Newsletter</span></a></li>
<li><a href="#"><span>By-Laws</span></a></li>
<li><a href="#"><span>Links</span></a></li>
</ul>
<div id="copy">
insert copy here
</div>
</td>
</tr>
<tr>
<td><img src="menu-bottom.gif"></td>
</tr>
</table>
</center>
-->
</body>
</html>[CODE]