[SOLVED] <iframe> Drop-down Menu Covers Content

For general web development questions that are not specifically related to CSS HTML Validator. This includes (but is not limited to) general HTML, CSS, Accessibility, JavaScript, and SEO questions.
Post Reply
paulp575
Rank IV - Intermediate
Posts: 170
Joined: Tue Aug 09, 2005 1:20 pm
Location: Spokane WA
Contact:

[SOLVED] <iframe> Drop-down Menu Covers Content

Post by paulp575 »

I am developing a website for a non-profit. Unfortunately I'm the only one that knows HTML, web hosting. etc,

I have developed the pages using HTML5, but ran across a problem using <iframe> to contain the menu for all the pages.

Here's the situation:

1. Put the same menu on all the pages. Unfortunately if the menu changes then I have to update all the pages (quite laborsome!).

2. While thinking about a better way, I came across the <iframe> tag. Thinking this would work. Well, it does - to some extent. One of the menu items has a drop-down menu. When you click on that item, the drop-down is hidden behind the content on that page. I could easily solve it by having a large HEIGHT in the menu CSS, but that leaves an ugly black space between the menu and the content. I looked up using the z-index tag/attribute, but it appears that only works with position content; not iframe.

Any suggestion on how to accomplish this and keep it simple so someone later can understand what I did?

I've attached a ZIP file with the files needs to help you hopefully solve this problem

Thanks!
Attachments
EWATV.zip
(317.64 KiB) Downloaded 169 times
Last edited by paulp575 on Sun Jun 13, 2021 6:33 pm, edited 1 time in total.
paulp575
User avatar
Albert Wiersch
Site Admin
Posts: 3783
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: <iframe> Drop-down Menu Covers Content

Post by Albert Wiersch »

Hello,

For security reasons I don't think there is a way for an iframe to overflow its own content area.

Do you have access to PHP? That's what I use to easily include common menus, headers, and footers on the pages at htmlvalidator.com. You can do this using the include(), include_once(), require(), and/or require_once() function:
https://www.php.net/manual/en/language. ... ctures.php

Another old-fashioned solution would be to use the template tool. This was one of the first 'tools' in CSS HTML Validator over 20 years ago which let you update common parts of pages without needing server side includes, PHP, or any server processing. If you think you might want to use it then please see:
https://www.htmlvalidator.com/current/d ... amples.htm

I hope this helps.
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
paulp575
Rank IV - Intermediate
Posts: 170
Joined: Tue Aug 09, 2005 1:20 pm
Location: Spokane WA
Contact:

Re: <iframe> Drop-down Menu Covers Content

Post by paulp575 »

In order to keep it simple. I'll leave it as it is - with the large blank space between the menu and the page content.

Thanks for the suggestions to use wither PHP or templates.
paulp575
Post Reply