Need help in CSS and HTML

Question

michibahn 0 Newbie Poster

13 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
194 Views
1 Day Discussion Span
Latest Post 13 Years Ago Latest Post by michibahn

ovidiu_b13

13 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.

ovidiu_b13

13 Years Ago

For example:

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

ovidiu_b13

13 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: http://amcenter.ro/produse.html

ovidiu_b13

13 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>

ovidiu_b13 · Answer 4 · 2011-11-17T21:35:44+00:00

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

ovidiu_b13 · 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?

ovidiu_b13 · 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>

ovidiu_b13 · 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>

ovidiu_b13 · 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>