dynamic photo display - drop down menu conflict

[ChuckRS]

Using http://www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/#thumb I created a plain html page and a css. I did remove z-index for the images are not displayed over any other existing text of images. A link to the css was placed in the head of the html. All worked great (in Firefox and IE8).

Also using Expression Web 4 with DWT pages. The actual DWT, the style section has a fully functional dropdown menu with submenus (works in Firefox and IE8). The position of the menu is fixed at the top (a single row 25 px in height)


A page that is a DWT type was opened and into the body was pasted the html from the plain page then saved. In the head section of the actual DWT but before <style>, pasted the css link. Saved, and pressed F12. Nothing displayed in firefox. Opened with IE8 with 7 empty blue border rectangles with a red "x". To the right of each was a small rectangle with a red "x".

Hovering over the drop down menu, the list items displayed but when the curser got down to the first list item that touched the boundary of the dynamic area, the list went away.

What is needed for dynamic photo display to work in a DWT page and for the complete dropdown menu to function?

[Beverleyh]

Most of the regulars here code manually in a code editor so it's unlikely that we'll be able to give you assistance in using Dreamweaver/Expression Web 4/another WYSIWYG web builder. We can however assist with the generated output/code but in order to do that we need to see the code, so paste a link to your page and someone can take a look.

We can tell you what in the code is wrong, but if your web builder is somehow fudging the code during save, it would be best to move to a code editor to edit that page in future. You can Google free code editors (such as Notepad++) to find one you like.

Post the link to your page first though.

[ChuckRS]

Thanks Beverleyh. Looking over the code would be great but I do not a place yet to upload to. Is there an alternative to make the code available?

[Beverleyh]

You can setup a reduced live example in JSBin, JSFiddle or CodePen

[ChuckRS]

Rather sheepishly, I did find the solutions to both problems. Beverleyh comments about code errors got my orientation to looking at the code differently. dynamic photo display did not work in the DWT page because the pathway was not complete up to the root. Puzzling for it is the same pathway that worked in the plain page creation. With dynamic photo display working, the drop down menus (that extended far enough) were under the photos. I remembered z-index controlled what was on top. Went into the style for the drop down menu to set z-index to 1. Had to try it in several locations but finally found the right place. Learned along the way

[Beverleyh]

Glad you sorted it :)