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

    CSS Vertical Menu Overlapping My Text

    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]

  • #2
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    I have put it here.
    Tidied up with HTML Pad.

    Frank
    Last edited by effpeetee; 03-13-2009 at 11:20 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

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

    Smile Resolved!

    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!

  • #4
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    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.

    Frank
    Last edited by effpeetee; 03-14-2009 at 04:58 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.


  •  

    Posting Permissions

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