Need help in CSS and HTML

Question

michibahn 0 Newbie Poster

14 Years Ago

Hi guys,

I'm really new to web development and I need your help in getting my sample page modified.

I've downloaded a sample drop down menu template and I just need it to modify to meet my needs.

Attached is the files. Basically, I just need to do the following:

1. When I hover the mouse to the "Reports" menu, I want the drop down menu to show not on the green arrow.

2. If I choose 111111111 in the drop down menu, the 1.pdf file should show right below the page menu (in the white area of the page) not in a new page so that I can still open new reports 222222 and 3333333 without hitting the "back" button in the browser.

Appreciate if you can help me on this.

thanks in advance!

html-css web-design

This attachment is potentially unsafe to open. It may be an executable that is capable of making changes to your file system, or it may require specific software to open. Use caution and only open this attachment if you are comfortable working with zip files.

new_drop_down_(2).zip (538.5 KB)

2 Contributors
15 Replies
205 Views
1 Day Discussion Span
Latest Post 14 Years Ago Latest Post by michibahn

Dani AI

Generated 7 Months Ago

Brief recap: followed ’s iframe approach and moved the iframe out of the submenu, which solved the “open in new page” problem. Two remaining issues are visible in the thread: the submenu only opens on the small green arrow instead of the whole Reports label, and after a PDF loads the dropdown stops working because the frame is effectively covering/stealing the hover.

Make the whole Reports cell the hover target and force the submenu to sit under the label. The common pattern is to make the top-level link fill its list cell and show the submenu on the list-item hover, not on a small child element:

.topnav > li { position: relative; }
.topnav > li > a { display: block; padding: 8px 12px; }
.subnav { position: absolute; display: none; left: 0; top: 100%; }
.topnav > li:hover > .subnav { display: block; }

Ensure the iframe cannot sit on top of the header/menu. The header/menu must have a higher stacking context and the iframe should be placed after the header in the DOM (so it appears visually below). Example CSS to create that ordering:

#header, .topnav { position: relative; z-index: 9999; }
.report-frame { display: block; margin: 20px auto 0; width: 900px; height: 800px; position: relative; z-index: 1; border: 0; }

Troubleshooting checklist: confirm the iframe tag is outside the header markup; confirm each report link targets the iframe (same target name) so clicks load into the frame; use browser dev tools to inspect computed z-index and position; if the PDF still sits above the menu (old plugin/windowed behavior), consider a JavaScript PDF renderer (PDF.js) or an HTML wrapper so the PDF content is rendered windowlessly and respects z-index.

All 15 Replies

Member #826153

14 Years Ago

One easy way to do this is to use an iframe. Place an iframe where you want the file, and the iframe should point to the file.

Member #826153

14 Years Ago

For example:

<a href="1.pdf" target="iframe_a">111111111</a>
<iframe src="demo_page.html" name="iframe_a"></iframe>

Member #826153

14 Years Ago

The demo_page.html can be one of the files, if you want. That is the page that will open when you load the page the first time.
for the second question, YES.

Here is an old example I've made:

Member #826153

14 Years Ago

where have you placed your iframe?

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

michibahn 0 Newbie Poster · Answer 1 · 2011-11-17T18:35:00+00:00

hi ovidiu_b13.. based on your example, do i need to create the demo_page.html? also, will the PDF file open on the same page right below the menus?

thanks for your reply.

michibahn 0 Newbie Poster · Answer 2 · 2011-11-17T21:14:55+00:00

Hi ovidiu_b13.. when i hover the mouse to the menu, the pdf file shows up. it does wait for me to click the menu (111111). also the pdf file doesn't show up in the white space below. it shows right next to the 111111 menu.

your example is the one exactly i need. hope you can help me with the right code.

thanks!

michibahn 0 Newbie Poster · Answer 3 · 2011-11-17T21:35:05+00:00

this is the sample that i did..

</head>

<body>
<div class="container">
    <div id="header">
    	 <div class="disclaimer">Report by <a href="#">Services</a>.</div>
        <ul class="topnav">
            <li><a href="#">Home Page</a></li>
            <li>
                <a href="#">Reports</a>
                <ul class="subnav">
                    <li><a href="1.pdf" target="iframe_a">111111111</a>
			<iframe src="index.html" name="iframe_a"></iframe></li>
                    <li><a href="2.pdf">22222222222222</a></li>
                    <li><a href="3.pdf">33333333333333</a></li>
                </ul>
            </li>
            <li><a href="#">Contact Us</a></li>
        </ul>
    </div>
</div>


</body>
</html>

Member #826153 · Answer 4 · 2011-11-17T21:35:44+00:00

Place it after you close your <div class="container"> tag.

Member #826153 · Answer 5 · 2011-11-17T21:36:52+00:00

</head>
 
<body>
<div class="container">
    <div id="header">
    	 <div class="disclaimer">Report by <a href="#">Services</a>.</div>
        <ul class="topnav">
            <li><a href="#">Home Page</a></li>
            <li>
                <a href="#">Reports</a>
                <ul class="subnav">
                    <li><a href="1.pdf" target="iframe_a">111111111</a></li>
                    <li><a href="2.pdf">22222222222222</a></li>
                    <li><a href="3.pdf">33333333333333</a></li>
                </ul>
            </li>
            <li><a href="#">Contact Us</a></li>
        </ul>
    </div>
</div>
 
<iframe src="index.html" name="iframe_a"></iframe> 
</body>
</html>

michibahn 0 Newbie Poster · Answer 6 · 2011-11-17T22:33:18+00:00

hi ovidiu_b13.. thanks! seems to be working. can teach me how to position the pdf in the center? thanks again!

also, how come if the 1111111 PDF file is already displayed, the drop down menu selection doesn't work anymore for me to chose another PDF file?

Member #826153 · Answer 7 · 2011-11-17T22:40:58+00:00

Place the Iframe in a DIV and give the DIV a width and auto margin on left and right.

<div style="width:300px;  margin: 0px auto;"><iframe style="width:300px;" src="demo_iframe.htm" name="iframe_a"></iframe></div>

Member #826153 · Answer 8 · 2011-11-17T22:45:10+00:00

Can I see your code?

Have you placed links to each pdf for each menu item?
in the IFRAME tag the page/file you place in the src="" attribute is the page/file that is loaded when you open the page. You can leave the src="" empty if you want.

michibahn 0 Newbie Poster · Answer 9 · 2011-11-17T22:49:05+00:00

hi ovidiu_b13.. here's what i did. thanks a lot for helping me :)

</head>
 
<body>
<div class="container">
    <div id="header">
    	 <div class="disclaimer">Report by <a href="#">Services</a>.</div>
        <ul class="topnav">
            <li><a href="#">Home Page</a></li>
            <li>
                <a href="#">Reports</a>
                <ul class="subnav">
                    <li><a href="1.pdf" target="iframe_a">111111111</a></li>
                    <li><a href="2.pdf">22222222222222</a></li>
                    <li><a href="3.pdf">33333333333333</a></li>
                </ul>
            </li>
            <li><a href="#">Contact Us</a></li>
        </ul>
    </div>
</div>
 
<iframe src="blank.html" name="iframe_a" style="width:1800px; height:800px;" frameborder="0"></iframe> 
</body>
</html>

Member #826153 · Answer 10 · 2011-11-17T22:57:58+00:00

you forgot the target attribute for the other menu items. And use the example I showed you to center it.

michibahn 0 Newbie Poster · Answer 11 · 2011-11-17T23:03:09+00:00

here's the revised code. it centers now however, the drop down menu is no longer working if 111111PDF is displayed. it seems the iframe covers it up?

</head>
 
<body>
<div class="container">
    <div id="header">
    	 <div class="disclaimer">Report by <a href="#">Services</a>.</div>
        <ul class="topnav">
            <li><a href="#">Home Page</a></li>
            <li>
                <a href="#">Reports</a>
                <ul class="subnav">
                    <li><a href="1.pdf" target="iframe_a">111111111</a></li>
                    <li><a href="2.pdf">22222222222222</a></li>
                    <li><a href="3.pdf">33333333333333</a></li>
                </ul>
            </li>
            <li><a href="#">Contact Us</a></li>
        </ul>
    </div>
</div>
 
<div style="width:900px;  margin: 0px auto;"><iframe style="width:900px;" src="demo_iframe.htm" name="iframe_a"></iframe></div>
 
</body>
</html>

Need help in CSS and HTML

Dani AI

Recommended Answers Collapse Answers

All 15 Replies

Recommended Answers