Results 1 to 4 of 4

Thread: jQuery Menu and CSS Frames Overlay

  1. #1
    Join Date
    Jul 2009
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Exclamation jQuery Menu and CSS Frames Overlay

    Hello,

    Well, although I took two web development courses in University and have a minor in IT, I have no idea what went wrong here. I have a used the jQuerty Multi-Level CSS Menu #2 on a new design for the Museums webpage. The layout for the CSS frames was also taken and modified by me from the Dynamic Drive site under CSS Left, Top, Bottom, and Right. Unfortunately, I can not get the sub-menu's to show up because the main content block is covering it. I have tried various forum suggestions for other menu and CSS problems and I have no idea what it could be.

    Here is the Code from the Main Style Sheet that I think applies:

    [CODE]

    body{
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    height: 100%;
    max-height: 100%;
    font-family: arial;
    }

    #framecontentLeft{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 239px; /*Width of left frame div*/
    height: 671px;
    overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
    background-color: green;
    color: white;
    }

    #framecontentRight{
    position: absolute;
    top: 0px;
    left: 1451px;
    right: 0px;
    width: 233px; /*Width of right frame div*/
    overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
    background-color: green;
    color: white;
    height: 669px;
    }

    #framecontentTop{
    top: -1px;
    left: 239px; /*Set left value to WidthOfLeftFrameDiv*/
    right: 125px; /*Set right value to WidthOfRightFrameDiv*/
    width: 1213px;
    height: 169px; /*Height of top frame div*/
    overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
    background-color: green;
    color: white;
    position: relative;
    z-index: 1000;
    }

    #framecontentBottom{
    position: absolute;
    top: 666px;
    left: -95px; /*Set right value to WidthOfRightFrameDiv*/
    height: 199px; /*Height of bottom frame div*/
    bottom: 0;
    width: 1839px;
    color: white;
    background-color: green;
    }

    #maincontent{
    position: absolute;
    top: 169px;
    left: 239px;
    overflow: scroll;
    background: #ffffff;
    width: 1210px;
    height: 500px;
    font-family: arial;
    z-index: -1;
    }

    [CODE]

    The pages code is located for the moment at:
    http://emm.fp.execulink.com/Layout%20Options/layout%20squared.html

    A second problem I have is the frames were sized on an 22 inch. screen and were a pain to get where they are now. The problem however is that the whole layout is thrown off on a smaller screen. Viewers of the page will know what I'm talking about.

    Please HELP!!

    Many Thanks.

  2. #2
    Join Date
    Jul 2009
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Can anyone Please Help with this Problem?!?!?!?!?!

  3. #3
    Join Date
    Jul 2009
    Posts
    1
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    ok, in your layout.css you wrote:

    Code:
    #framecontentTop{
    	top: -1px;
    	left: 239px; /*Set left value to WidthOfLeftFrameDiv*/
    	right: 125px; /*Set right value to WidthOfRightFrameDiv*/
    	width: 1213px;
    	height: 169px; /*Height of top frame div*/
    	overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
    	background-color: green;
    	color: white;
    	position: absolute;
    	z-index: 1000;
    }
    ... just remove overflow: hidden; and the menu will behave like you want it to

  4. The Following User Says Thank You to eriamel For This Useful Post:

    Curator (07-17-2009)

  5. #4
    Join Date
    Jul 2009
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Thumbs up Thanks You

    Thanks so much. I knew the solution was going to be something simple I just didn't read the code close enough. Two pairs of eyes are always better than one.

Bookmarks

Posting Permissions

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