close ad
 
Important WebAssist Announcement
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

CSS Menu Writer menu showing behind PDF

Thread begun 5/14/2010 4:31 pm by vendors341626 | Last modified 6/05/2010 10:52 am by neilo | 10694 views | 28 replies |

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.

Sign in to reply to this post

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

Sign in to reply to this post

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.

Sign in to reply to this post

vendors341626

Test Link

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

Test.php

Sign in to reply to this post

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.

Sign in to reply to this post

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

Sign in to reply to this post

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

Sign in to reply to this post

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.

Sign in to reply to this post

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

Sign in to reply to this post

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

Sign in to reply to this post
loading

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.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...