...

View Full Version : CSS Vertical Menu Overlapping My Text



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>&nbsp;</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]

effpeetee
03-13-2009, 08:16 PM
I have put it here. (http://exitfegs.co.uk/GLGCA.html):D
Tidied up with HTML Pad.

Frank

ldbillings
03-14-2009, 12:38 AM
I couldn't understand why my menu div was so big. I still don't understand why it is so big, but I did fix the problem.

I had to set the background to transparent for the menu div.

Whew! I won't make that mistake again!

effpeetee
03-14-2009, 03:04 PM
Your menu width:20ems; was too great.
I think that you have hidden the fault and not removed it.
We do not have the images, so it is hard to be more precise.

Look at this. (http://exitfegs.co.uk/GLGCAb.html)

Frank



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum