HTML - Frames - Always To Stay On Top (external Url Browsing)
Hi,
I have a framed page, two frames, a small top frame with a drop-down menu, the drop down menu are links to external pages, the external links are displayed within the lower frame. I have everything set up and working fine, but then I had to find a little "snag"...(of course) When I browse within the lower window (clicking links on the pages displayed in the lower window) some links override my frames and open up on top of my framed site. So my question is: Is there a way to make my frames "absolute" (stay on top nomatter what), that is, all links within the lower frame will be opened up within the frame and not on top? (bare in mind that these are external pages and I do not control the nature of the links such as target tags etc.) I have my code here... INDEX: Quote: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE></TITLE> </HEAD> <frameset rows="35px,*" frameborder="0"> <frame name="menu" src="dropdown.html" scrolling="no" noresize> <frame name="content" src="blank.html"> </frameset> </HTML> DROPDOWN.HTML Quote: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE></TITLE> <base target="content"> <script language="javascript" type="text/javascript"> <!-- function menu_goto( menuform ) { var baseurl = "" ; selecteditem = menuform.newurl.selectedIndex ; newurl = menuform.newurl.options[ selecteditem ].value ; if (newurl.length != 0) { parent.content.location.href = baseurl + newurl ; } } //--> </script> </HEAD> <BODY topmargin="2" leftmargin="2"> <form action="dummyvalue"> <select name="newurl" onchange="menu_goto(this.form)"> <option value="" selected="selected">----- Choose a link -----</option> <option value="http://www.sitenumber1.com">first link</option> <option value="http://www.sitenumber2.com">second link</option> </select> </form> </BODY> </HTML> any suggestions? Similar TutorialsHope the title made sense, I am using Microsoft Expression Web and, I am also using Frames on my website. I have 3 Frames, One complete at the top, one on the left side and then a main page frame to fill the rest. I am using a 19" wide screen monitor, and because of that the pages I make are all unaligned with each other as they get stretched to fill the monitor. now the top frame and left frame stay where they should I have done that, but I can't keep the main page frame from moving over to the right and making everything look untidy and nasty. so could anyone help me out with this problem please, I use a background Image, text and images on the page so they all need to stay centered bu to the left of the page. Or maybe center all the frames to the middle of the screen such as www.myspace.com looks on a wide screen monitor (although i know they do not use frames.) Thanks in advance Hello. I have a frameset (frmst.htm) consisting of a menubar (leftframe) and main page (mainframe). What I would like to make such a hyperlink that from an external page (page1.htm) to open frmst.htm and change the mainframe to a webpage somehow specified in the link. I could achieve this by using php but i would like to know if it is possible with something like HTML or javascript. Thank you in advance. I'm relatively novice in web page development. In my recent work it is required to let user browse thro' web server files system, similarly as one can do it with <input type=file> tag. What I learnt is, there in no equivalent input tag to do so. Is there any other way to do accomplish this task Is it possible to have some error text appear if a user is browsing your website with a certain browser using html/css or maybe java? An example being: If - The website is being browsed using Safari Then - SHOW error text = "This link won't work with the Safari browser." Else - DO NOT SHOW error text is that sort of thing viable or just a pipe dream at current? Thanks in advance. Regards, Stoney I have listed items inside a div that display just find in FF v3.0.1, but not in IE v7. Here is the link to my page. http://web.missouri.edu/~mdsybf/ Here is the CSS of a class div that surrounds the previously mentioned div. .MainEdit { clear:both; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; color: #000000; text-decoration: none; float: left; padding-right: 10px; padding-left: 10px; padding-bottom: 10px; padding-top: 10px; margin-left: 10px; width: 700px; clear: right; display: inline; vertical-align: top; height: auto; } What is wrong with my code that makes the listed items appear outside the div box? Hello lady's and gentelmen.. I have a really short question (almost so small it's not even worth waste a whole thread on it!) But, here it goes When I go to my homepage: www.sp34k.dk and maybe select "blog", then I can see the link "www.sp34k.dk/blog.htm" and if it go to billeder (picture) then its www.sp34k.dk/billeder.htm. Are there any possibility for that I can do such it dosent change? So it would ALWAYS stay as "www.sp34k.dk"? Kind regards Mike Bertelsen Denmark I've heard many times "don't use frames, there is better ways to accomplish it", and I was wondering, is this just referring to "invisible" frames, or any frames? For example, look at Kingdom of Loathing. They use frames (or what appears to be frames) and I can't see how they could successfully make that site without. If I had to have all the screens scroll as one rather than separate, and couldn't resize when I needed to, it would be extremely annoying. So, frames are bad, or just the invisible ones? I'm using NVU. I've got code that was generated by Omnipage - it is full of boxes and divs and spans which I don't understand yet. Anyway I'm doing alright except when I put a line of links (forward,back,index,main) in at the bottom of each of these pages, above the bottom-of-the-page 'credits', I find I can't keep them separate. I put a few carriage returns in and there's some clear space - four or five lines or more - between them. I save the file, close the file, pick the file up again and look at it and they've closed up again! Dreamweaver doesn't seem to be able to sort it out, either. You can see the pages and their code at mbccc.net and follow the 'parent information' link. regards, ab hi i have built two pages using DW, an INDEX page and a FORM page. They both contain divs. I want to have the FORM page appear in the MAIN CONTENT div of the INDEX page. I got that to work, however the problem is the Form itself does not stay in the Div it is placed in, it floats out under the DIv and on top of other content. thanks for the help - my code is too long to post in one thread - will post the index code in part two here is the FORM code: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> <style type="text/css"> <!-- * { margin: 0px; padding: 0px; } body { } img { } h1 { } h2 { } h3 { } #retailWrapper { height: 540px; width: 980px; } #retailWrapper #retailHeader { height: 50px; width: 980px; float: left; } #retailWrapper #leftImage { float: left; margin-top: 10px; clear: none; } #retailWrapper #form { height: 400px; width: 680px; margin-top: 10px; padding-top: 10px; float: left; } .style1 {font-family: Arial, Helvetica, sans-serif} .style19 {font-size: 12px} .style21 {font-size: 16px} .style23 {color: #000000} .style25 {color: #FFFFFF} .style27 {color: #BEBEBE} .style29 {font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #000000; } .style30 {font-size: 14px} .style31 {font-family: Arial, Helvetica, sans-serif; font-size: 14px; } --> </style> </head> <body> <div id="retailWrapper"> <div id="retailHeader"><img src="_Art Files/newRetailerInq.gif" width="980" height="51" /></div> <div id="leftImage"><img src="_images/_galleryImages/retailDisplay.jpg" width="200" height="480" /></div> <div id="form"> <form id="form1" name="form1" method="post" action=""> <table width="51%" align="center" cellpadding="8" cellspacing="6"> <tr> <td width="131"><div align="right" class="style29"> <label for="name">Name:</label> </div></td> <td width="196"><div align="left" class="style31"> <input type="text" name="name" id="name" /> </div></td> </tr> <tr> <td width="131"><div align="right" class="style29"> <label for="storeName">Store Name:</label> </div></td> <td width="196"><div align="left" class="style31"> <input type="text" name="storeName" id="storeName" /> </div></td> </tr> <tr> <td width="131"><div align="right" class="style29"> <label for="addressLine1">Address Line 1:</label> </div></td> <td width="196"><div align="left" class="style31"> <input type="text" name="addressLine1" id="addressLine1" /> </div></td> </tr> <tr> <td width="131"><div align="right" class="style29"> <label for="addressLine2">Address Line 2:</label> </div></td> <td width="196"><div align="left" class="style31"> <input type="text" name="addressLine2" id="addressLine2" /> </div></td> </tr> <tr> <td width="131"><div align="right" class="style29"> <label for="city">City:</label> </div></td> <td width="196"><div align="left" class="style31"> <input type="text" name="city" id="city" /> </div></td> </tr> <tr> <td width="131"><div align="right" class="style29"> <label for="state">State:</label> </div></td> <td width="196"><div align="left" class="style31"> <input type="text" name="state" id="state" /> </div></td> </tr> <tr> <td width="131"><div align="right" class="style29"> <label for="zip">Zip:</label> </div></td> <td width="196"><div align="left" class="style31"> <input type="text" name="zip" id="zip" /> </div></td> </tr> <tr> <td width="131"><div align="right" class="style29"> <label for="email">Email:</label> </div></td> <td width="196"><div align="left" class="style31"> <input type="text" name="email" id="email" /> </div></td> </tr> <tr> <td width="131"><div align="right" class="style29"> <label for="phone">Phone:</label> </div></td> <td width="196"><div align="left" class="style31"> <input type="text" name="phone" id="phone" /> </div></td> </tr> <tr> <td width="131"><div align="right" class="style29"> <label for="comments">Comments:</label> </div></td> <td width="196"><div align="left" class="style31"> <textarea name="comments" rows="4" id="comments"></textarea> </div></td> </tr> <tr> <td width="131"><div align="right"><span class="style1"><span class="style19"><span class="style21"><span class="style23"><span class="style25"><span class="style27"><span class="style30"></span></span></span></span></span></span></span></div></td> <td width="196"><div align="left" class="style31"> <input type="checkbox" name="subscribe" id="subscribe" /> <label for="subscribe">Subscribe newsletter</label> </div></td> </tr> <tr> <td width="131"><div align="right" class="style29"> <label for="reset"></label> <input type="reset" name="reset" id="reset" value="Reset Form" /> </div></td> <td width="196"><div align="left" class="style31"> <label for="submit"></label> <input type="submit" name="submit" id="submit" value="Submit" /> </div></td> </tr> <tr> <td width="131"><div align="right"><span class="style1"><span class="style19"><span class="style21"><span class="style23"><span class="style25"><span class="style27"><span class="style30"></span></span></span></span></span></span></span></div></td> <td width="196"><div align="left"><span class="style1"><span class="style21"><span class="style30"></span></span></span></div></td> </tr> </table> </form> </div> </div> </body> </html> Hi there, I am currently making an iPhone/Touch website, and would like to know how I can make it so the top banner stays at the top, while the main body of the site scrolls up and down below it. Can you help? Josh For some reason when there is little content on the page, the layout doesn't remain centered. What can I do to fix this? Here is the link to my website: Check out the difference between about and knowledge http://www.organicgardencafe.com/about.php Hi Guys, How can i make my footer stay at the bottom of the page so when the user holds down ctrl and zooms out i want to the footer to stick to the bottom of the screen, i have done this before but i cant remember for the life of me and its actually killing me know can someone put me out of my misery please. heres the HTML and CSS its called BottomBanner HTML Code: <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Vodafone One Net Express</title> <style type="text/css"> body{background: none repeat scroll 0 0 #F4F4F4; margin:0px !important; padding:0px !important;} .PageSetter{margin-left:auto; margin-right:auto; margin-top:-2.3%; background: none repeat scroll 0 0 #F4F4F4; position:relative; } .TopBanner{background-color:#C51906; width:100%;height:80px;} .TopBanner h1{font-size:2.7em; text-align:center; color:White; margin-left:auto; margin-right:auto; padding-top:15px; font-weight: normal; width: 600px;} .BottomBanner{background-color:#C51906; width:100%;height:80px; margin-bottom:-0.1% !IMPORTANT} .BottomBanner h1{font-size:2.3em; text-align:center; color:White; margin-left:auto; margin-right:auto; padding-top:15px; font-weight: normal; width: 600px;} .IframeContiner{width:980px; margin-left:auto; margin-right:auto; margin-top:10px} .IframeStyle{Width:982px; height:1000px; border:0px} </style> </head> <body> <div class="PageSetter"> <div class="TopBanner"> <h1> Vodafone One Net Express </h1> </div> <div class="IframeContiner"> <iframe scrolling="auto" class="IframeStyle" src="http://www.telegraph.co.uk/finance/yourbusiness/businesstechnology/9209385/Review-Vodafone-One-Net-Express.html"> </iframe> </div> </div> <div class="BottomBanner"> <h1> Call Now 0800 1980 000 </h1> </div> </body> </html> I'm working on my new site and my next step is to figure out how to make a cell stretch to the width of a page regardless of the size. I'm not sure what this is called. Here is the site. Let's just use the yellow menu bar for an example. I need to make it stretch to the right of the page. http://C-41productions.com/C-41_2008 Thanks so much. Hi all, If you go to http://kvc.dk/CTC7/index.htm Press "ctc-info" in the top menu you goes to a page with an iframe and links on top. When you press these links i want the current link to stay active until you press on another link. I have tried this: http://forums.htmlhelp.com/index.php...ndpost&p=38645 But i cant get it to work. Heres the code: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"/> <title>CTC</title> <link rel="stylesheet" type="text/css" href="../stylesheet.css"/> </head> <body> <table border="0" width="950" cellspacing="0" cellpadding="0" height="500"> <tr> <td align="right" bgcolor="#000000" valign="top" style="padding-right: 10px; padding-top: 70px" background="../images/Frontimages/ombygning.jpg"> <table border="0" width="500" cellspacing="0" cellpadding="0" > <tr> <td style="border: 2px solid #FFFFFF"> <table border="0" width="100%" cellspacing="0" cellpadding="0" background="../images/hvidbg.png" > <tr> <td style="padding-left:5px; padding-right:5px; padding-top:5px; padding-bottom:14px"> <a target="menu" href="Text/CTCinfo/omctc.htm">Om CTC</a> | <a target="menu" href="Text/CTCinfo/ansatte.htm">Ansatte</a> | <a target="menu" href="Text/CTCinfo/samarbejdspartnere.htm">Samarbejdspartnere</a> | <a target="menu" href="Text/CTCinfo/dopingpolitik.htm">Dopingpolitik</a> | <a target="menu" href="Text/CTCinfo/job.htm">Job</a> | </font><a target="menu" href="Text/CTCinfo/downloads.htm"> Downloads</a></td> </tr> <tr> <td> <iframe name="menu" src="Text/CTCinfo/omctc.htm" width="500" height="329" frameborder="0" allowtransparency="true" background-color="transparent"></iframe> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </body> </html> I am having a very frustrating issue that seems to have crept up over the last month or so. This problem did not exist on my site before, but it certainly exists now. Whenever I resize IE6 or IE7, the Google Ads I use on my site stay in place instead of following the browser resize shift. Needless to say, this makes the site look horrible when someone resizes their browser. And the real kicker is I haven't changed this section of code in months and now its suddenly not working. However, I have started using some other ads that use an <iframe> tag, and those ads do not have this issue. I know that Google uses javascript to serve the ads. Could there be some strange interaction between my code and Google's code? Has anyone else run into this? If so, how did you solve it? Here is a sample of my code that has this problem: Code: <div id="adPad"> <div class="floatArea1" style="margin:0 5px 0 0;"> <div class="noBorder"> <a href = "URL"><img src="img/image.png" alt="ALT" width="x" height="y"/></a> </div> </div> <div class="floatArea1" style="width:728px; height: 92px; margin: 0 0 5px 0;"> GOOGLE AD GOES HERE </div> </div> relevant CSS: Code: #adPad{width:955px; padding:5px;} .floatArea1{ float:left; margin-left: 10px; font-weight: normal; width: auto; padding: 0px; display: inline; overflow: hidden; } .noBorder { float: left; width:auto; } .noBorder img { border: 0px; /*width: 312px; height: 90px;*/ overflow: hidden; } Any help on this is greatly appreciated! Thanks! Can someone show me how to make a background stay still when you scroll up and down the page? Hi there, Not sure if this is HTML or CSS - I've got a <ul> menu that I've set up and it's changing nicely in colour when you mouseover (using a:hover etc.) I've seen a few menus though where if you click on home, it loads home and that option stays a different colour to show you what page you're currently on.. any ideas? hello everyone. I'm a newbie at this HTML stuff. I've made my first webpage and everything is working fine. I added some .SWF files and placed them where I wanted using <div> coding. My problem is whenever you resize the browser window, the flash movies move with it, they "float" over the rest of the page. How do I make them stay static when you resize the window? Could someone please help me with this problem? I appreciate it very much. How do I make a table with a fixed width stay centered even if the browser window's horizontal size is smaller than the table's horizontal size? align="center" makes the table centered as long as the browser window is bigger than the table. If the browser window is smaller, the table will be cropped on the right size only, not on both size. I would like to do this to have a table with a fixed width and a background image, so that no horizontal scrolling bar appears if the screen resolution if too small for the table. The image should howerver stay centered no matter what the windows size is. Thanks. |