Help us test the new Databridge BETA with MySQLi support

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

› WebAssist Forums › Design Extender › CSS Menu Writer › CSS Menu Writer menu showing behind PDF

CSS Menu Writer menu showing behind PDF

Thread began 5/14/2010 7:31 pm by vendors341626 | Last modified 6/05/2010 1:52 pm by neilo | 6684 views | 28 replies |

5/14/2010 7:31 pm | #1 vendors341626

CSS Menu Writer menu showing behind PDF

Have been looking around for a solution, it is not answered here, I have contacted Webassist they offered no help sending me back to the forum, Irresponsible as if I purchased this somewhere else and this was not the first time.. Webassist short coming, hiding behind the forum to do their job using free outsourcing. You be upset to buying from here all the time, have no proper support, they do not answer back for few days or they do not reply at all.

My menu falls behind a PDF embedded section. It means that when the horizontal menu expands for different levels, it hides behind the embedded PDF file that is in that page. I have tried many ways to get this fix, but no luck.

5/15/2010 12:49 am | #2 anonymous

As a community member, I will be glad to help you. But what is with the sour attitude? You have all of ONE post and yet you somehow claim that no one is responding to you. How can you make such a claim when you clearly have never previously posted a request for support?

Now to answer your question - you need to wrap your menu in a div. Give your div a class like "mainMenu". Then edit the CSS for the class. Set the positioning "relative". Then give it a high value for Z-INDEX so it will appear above other layers and your PDF.

Your CSS should look something like this:

.mainMenu {
position: relative;
z-index: 100;
}

Stay positive.

Cheers,

Brian

5/17/2010 10:59 am | #3 Jason ByrnesWebAssist

If you are still having problems, please post a link to your page so that I can examine the code to find the cause.

5/18/2010 5:25 pm | #4 vendors341626

Test Link

Hi, I have changed few things few times, but give you troubled some original link below.

Test.php

5/19/2010 12:00 pm | #5 Jason ByrnesWebAssist

on this page the menu is not placed in a div:

<body>
<ul class="level-0" id="cssmw">
<li class="parent"><a href="#">Item 1</a>
<ul class="level-1">
<li><a href="#">Sub Item 1</a></li>
<li><a href="#">Sub Item 2</a></li>
<li><a href="#">Sub Item 3</a></li>
<li><a href="#">Sub Item 4</a></li>
<li><a href="#">Sub Item 5</a></li>
<li><a href="#">Sub Item 6</a></li>
</ul>
</li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul>

Like Brian suggested, place the menu in a div and give it a high z index:

<body>
<div style="position: relative; z-index: 100;">
<ul class="level-0" id="cssmw">
<li class="parent"><a href="#">Item 1</a>
<ul class="level-1">
<li><a href="#">Sub Item 1</a></li>
<li><a href="#">Sub Item 2</a></li>
<li><a href="#">Sub Item 3</a></li>
<li><a href="#">Sub Item 4</a></li>
<li><a href="#">Sub Item 5</a></li>
<li><a href="#">Sub Item 6</a></li>
</ul>
</li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul></div>

another problem is that the div for the pdf is set to use position: absolute:

<div style="z-index:-1;position:absolute;">
<embed src="File-11.pdf#view=FitH,top&view=FitV,left&navpanes=0" width="960" height="760">
</embed>
</div>

you do not set a top or left attribute though, so it will put the embedded pdf at the "absolute" top left corner of the browser window.

when using position absolute, you are in control of where the element appears in the browser, you must specify where to put it, or it will go to the default top left corner regardless of any other element that is in the top left corner.

5/21/2010 1:00 am | #6 vendors341626

Changes have no effect

I have tried this before myself, I have mentioned it as well in the forum.

I just thought if I have by mistake not done it the way you have, so I did it anyway. You can refere to the same page again and look for your self.

There is no change.

As you can see there are no other scripts or styles in this page to interrupt the conditions.

The problem still exists and looks like there is no fix to the mighty CSS Menu.

I am still waiting though.

Thanks

5/21/2010 2:07 am | #7 anonymous

Did you make the changes Jason suggested? Because, I don't see them on the page you refer to.

It still has the PDF wrapped in a div with the position set to absolute. You need to change that to relative or it will always be absolutely positioned making the z-index attribute meaningless.

Regards

5/21/2010 9:55 am | #8 Jason ByrnesWebAssist

The absolute positioned div is indeed a big problem here for 2 reasons:
1) You dont specify top or left properties, so it will always go into the top left corner of the browser.

2) The z-index stacking order is dependent on the position attribute. but another way, there is a separate z-index stacking order for Absolutely positioned elements and Relative positioned elements. The Absolutely positioned stacking order is always on top of the relatively positioned elements

Regardless of setting the z-index for the relatively positioned element to 100, it will still be stacked under the absolutely positioned element, even with a z-index of -1

If you insist on giving the pdf div a position: absolute; you must specify a top and left attribute to position it on the page in a location that is not occupied by the menu.

As i explained in the previous post, position absolute requires that you provide absolute coordinates on the page for where you wish that element to be displayed. if no top and left coordinates are specified, top:0; and left:0; are used. this is directly over the menu.

5/21/2010 9:25 pm | #9 vendors341626

Not getting it right

Hi There

It might sound thick or it just did, anyway.

I have tried, I am not following probably, but you might be able to help. I like the menu to open over the PDF file, menu then PDF embedded under it and when menu expands, the submenus are not under or behind the embedded PDF.

Would you be kind to just code this?

<div What Goes Here >
[ Menu ]
</div>
<div What Goes Here >
[ Embedded PDF ]
</div>

I appreciate it greatly.

Thanks

Ben

5/22/2010 3:09 am | #10 anonymous

Ben,

It should look like this:

<div style="position: relative; z-index: 100;">
[menu]
</div>

<div style="position: relative; z-index: -1;">
[PDF]
</div>

Regards,

Brian

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now. Build a store, a gallery, or a web-based email solution.