HTML - Iframe Basic Question
Hi, I am creating a one page site that uses an iframe to display the other pages. So I create an index.html with an iframe in it and drawing an initial 'page':
<iframe src="pages/welcome.php" name="carter-fairfax" marginwidth="0" marginheight="0" frameborder="0" scrolling="no" width="900px" height="910px"></iframe> I then create another 'page' on the site and link to it using the following: <li><a href="pages/who-we-are.php" target="carter-fairfax" frameborder="0" scrolling="no" width="900px" height="500px">who we are</a></li> Everything displays fine except that there is a good deal of white space at the bottom, obviously because there is a difference in the height of the iframe - is there an elegant way to get round this problem. I do have the containing div height set to auto. Many thanks, Keith Hulse Similar TutorialsI normally work in Flash which is much more intuitive for me. I am making and effort to design more in HTML. Here is the most basic of questions.. When doing designs in Photoshop or Illustrator, what is the best way to save slices. Gif or Jpeg. Are there tutorials or personal comment on the forum about the best practice for slicing sites. Thanks! edit: Problem solved, how do I delete this thread? I want to create a two column table that, in one of the rows, has a large picture in the second column. I wanted to "wrap" the picture in a <div> and give the div scroll bars so the user can scroll horizontally and vertically to see the entire picture, but still keep the width of the table as the same size as the width of the browser window. The div part seems to work fine. The large picture appears in the smaller div and the div has the scroll bars that I want. But, the table is still sized to contain the ENTIRE width of the photo, so the other rows in the table go off the edge of the browser window (because the image is wider than the browser window). Is there a way that I can limit the table width to only be the width of the browser, and have a large photo contained in a scrolling div, within one of the table rows. I will include some basic HTML code to demonstrate the problem. Just insert a path to some large image you might have, for testing, into the image tag's src property. (the image I am using is 1600x1200) Thanks, in advance, for any help you can provide. 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>Test a Large Image in a Table</title> </head> <body> <table style="border-bottom-width:thin"> <tr style="width:300px;"> <td style="width:20%; background-color:gray"> Title #1 </td> <td style="width:80%; background-color:red""> Why does this row go past the edge of the page? </td> </tr> <tr style="width:300px;"> <td style="width:20%; background-color:gray"> Title #2 </td> <td style="width:80%"> <div style="overflow:auto; max-width:60em; min-width:15em;"> <img src="" alt="some large image" /> </div> </td> </tr> </table> </body> </html> I am in the process of writing a spell-checker in PHP, but repeatedly stumble due to my less than perfect knowledge of HTML basics. (1) What's the most straightforward way to open a second page on top of the currently active one? Is it via JavaScript, or can it be done using HTML itself? (2) If I need to update a text area on the original page at the time I close the overlying one, is this again best done by JavaScript? My aim in both of the above is to avoid adding any code to the underlying page, other than the addition of a "SpellCheck" button and the coding associated with that. Many thanks for any pointers. Hi! This is my first post here. I am a part time web designer, (I must admit, better with the graphics than the coding). I am designing a page and I want the background to be black for say 1000 pixels down, and then white after that. How do I accomplish this? Does anyone know an easy way to create backgrounds with several tones? Thanks... Cosmos Hi, In microsoft word you can make the text go all the way across the page so that the beginning of each line and end of each line are inline with the one above and below, if you know what I mean. I can't remember what it is called. But it basically adds small amounts of space between each letter so it goes all the way across. How is this done in HTML/CSS if it can be done? Thank you as always, Ash hi, I'd like to say that I'm extremely new to xhtml and CSS, so please bare with me. My question is simple, consider I have this code HTML Code: <table class="mainTable" border="0" cellspacing="30"> <tbody> <tr> <td> <p><b><a class="button" href="l1.html" target="_blank">Link1</a></b></p> </td> <td> <p><b><a class="button" href="l2.html" target="_blank">Link2</a></b></p> </td> <td> <p><b><a class="button" href="l3.html" target="_blank">Link 3</a></b></p> </td> <td> <p><b><a class="button" href="l4.html" target="_blank">Link 4</a></b></p> </td> </tr> </tbody> </table> 1) what does target="_blank" mean? 2) My intention is to place this table in the upper center of the screen. How can I center the table ? 3) The height on each cell in this table is huge, how can I decrease the height of the cells? Thanks Hi guys, I am trying to help my friend figure out what is going on with his (VERY BASIC) website. I believe that he created it using dreamweaver originally, and then tampered with the code a little. The problem is as follows: The website seems to display perfectly as intended on mac ( safari) however when viewed on PC wit internet explorer the frames do not not work properly, They are opening in different windows etc. I know that no-on ould ever recommend building a site like this with frames, but would recommend iframes etc, however i ws wondering if there is a flaw in the code that can be fixed to resolve his problem simply? Thanks for even taking the time to read this, any helpful advice would be most appreciated! the code is as follows: The code titled "main" the main piece of code, then the coodes titled "top", "middle" and "bottom" are the codes for the respective frames. MAIN: -------------------------------------------------------------------------------------------------------- HTML Code: <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title></title> </head> <frameset rows="67,*,74" framespacing="0" frameborder="no" border="0"> <frameset cols="*" framespacing="0" frameborder="no" border="0"> <frame src="topframe.html" name="topFrame" scrolling="No" noresize="noresize" name="topFrame" /> </frameset> <frameset cols="*" framespacing="0" frameborder="no" border="0"> <frame src="midframe.html" name="mainFrame" name="mainFrame" title=""mainFrame" target="_self" /> </frameset> <frameset cols="*" framespacing="0" frameborder="no" border="0"> <frame src="bottomframe.html" name="bottomFrame" scrolling="No" noresize="noresize" name="bottomFrame" /> </frameset> </frameset> <noframes><body> </body> </noframes></html> TOP: -------------------------------------------------------------------------------------------------------- HTML Code: <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>Untitled Document</title> <style type="text/css"> <!-- body { background-color: #A890AE; background-image: url(Images/maze%20strip%20top.jpg); } .style1 {font-size: 8px} --> </style> <script type="text/JavaScript"> <!-- function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } // function FP_preloadImgs() {//v1.0 var d=document,a=arguments; if(!d.FP_imgs) d.FP_imgs=new Array(); for(var i=0; i<a.length; i++) { d.FP_imgs[i]=new Image; d.FP_imgs[i].src=a[i]; } } function FP_swapImgRestore() {//v1.0 var doc=document,i; if(doc.$imgSwaps) { for(i=0;i<doc.$imgSwaps.length;i++) { var elm=doc.$imgSwaps[i]; if(elm) { elm.src=elm.$src; elm.$src=null; } } doc.$imgSwaps=null; } } function FP_swapImg() {//v1.0 var doc=document,args=arguments,elm,n; doc.$imgSwaps=new Array(); for(n=2; n<args.length; n+=2) { elm=FP_getObjectByID(args[n]); if(elm) { doc.$imgSwaps[doc.$imgSwaps.length]=elm; elm.$src=elm.src; elm.src=args[n+1]; } } } function FP_getObjectByID(id,o) {//v1.0 var c,el,els,f,m,n; if(!o)o=document; if(o.getElementById) el=o.getElementById(id); else if(o.layers) c=o.layers; else if(o.all) el=o.all[id]; if(el) return el; if(o.id==id || o.name==id) return o; if(o.childNodes) c=o.childNodes; if(c) for(n=0; n<c.length; n++) { el=FP_getObjectByID(id,c[n]); if(el) return el; } f=o.forms; if(f) for(n=0; n<f.length; n++) { els=f[n].elements; for(m=0; m<els.length; m++){ el=FP_getObjectByID(id,els[n]); if(el) return el; } } return null; } --> </script> </head> <body onload="FP_preloadImgs(/*url*/'Images/image-g.gif'); MM_preloadImages('Images/discography-black.gif','Images/images-black.gif','Images/text-black.gif','Images/download-black 45pt.gif','Images/download-g.gif','Images/download-b.gif','Images/image-g.gif','Images/text-g.gif')"> <div align="center"><img src="Images/divider.gif" alt="." width="65" height="33" /><a href="download.html" target="mainFrame" onmouseover="MM_swapImage('download','','Images/download-g.gif',1)" onmouseout="MM_swapImgRestore()"><img src="Images/download-b.gif" name="download" width="205" height="10" border="0" id="download" /></a><img src="Images/divider.gif" width="30" height="33" /><a href="images.html" target="mainFrame"><img src="Images/image-b.gif" name="images" width="124" height="10" border="0" id="images" onmouseout="FP_swapImgRestore()" onmouseover="FP_swapImg(1,1,/*id*/'images',/*url*/'Images/image-g.gif')" /></a><img src="Images/divider.gif" width="30" height="33" /><a href="text.html" target="mainFrame" onmouseover="MM_swapImage('text','','Images/text-g.gif',1)" onmouseout="MM_swapImgRestore()"><img src="Images/text-b.gif" name="text" width="104" height="10" border="0" id="text" /></a><img src="Images/divider.gif" alt="." width="65" height="33" /><a href="midframe.html" target="mainFrame"></a></div> </body> </html> MIDDLE: -------------------------------------------------------------------------------------------------------- HTML Code: <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>untitled</title> <style type="text/css"> <!-- body { background-image: url(); } .style1 { border-width: 0px; } --> </style> <base target="_self" /> </head> <body> <div align="center"> <p> </p> <p><a target="mainFrame" href="download.html"> <img alt="" src="Images/doomsayercoverthumb.jpg" width="319" height="319" class="style1" /></a></p> <p> </p> <p> </p> </div> </body> </html> BOTTOM: -------------------------------------------------------------------------------------------------------- HTML Code: <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>untitled</title> <style type="text/css"> <!-- body { background-color: #FFFFFF; background-image: url(Images/maze%20strip%20bottom.jpg); } .style1 { font-family: Arial, Helvetica, sans-serif; color: #000000; font-size: 13px; font-weight: bold; } .style2 {font-size: 10px} .style4 {font-size: 12px} --> </style></head> <body> <div align="center" class="style1"> <p class="style2"> </p> <span class="style4">last updated 08/12/2011</span></div> </body> </html> Im designing a new site and I was kind of wondering a few things that I was hoping to get some answers to. I wasnt sure where this should be posted so if its in the wrong spot please accept my appology. So I do know I want to do alot of css and make it look very professional. 1) I remember at one time that you should make the site big enough to accomidate an 800x600 resolution. But considering that 1024x768 and bigger is pretty common place should I be scaling up to that or still stay at 800x600? Hi all im really new to html. I guess this question is really basic to the expert html ers but just need a bit of help. I want to add some text say i got a <p> tag and want to write just a sentance such as .. <p>I am learning html, it uses tags like this <a,b> which can load images etc. </p> of course a,b isnt a tag, but if i load this basic text in a web browser it would ignore the <a,b> and come up as validation error in the validator. So pretty much is there a way around of displaying <any letters or words> without the browser thinking its some sort of tag? thanks for the help! Can someone please help me? How do I move the entire image up on following index page: www.AndyG.com Note that there is a one inch gap between top of computer screen and top of image...I just want to move image way up to top... Thanks a lot! Andy Is there a way to have the iframe open with a 0 margin? for example... here, http://albertabrantes.com/peter/details.html I have a list of images, and I just point them directly to an iframe. But the iframe opens with a margin, and resizes the images... Is there a way to work around this? Thanks! I am currently undergoing construction on my website and had a quick (i hope) iframe question. I have a main page completed and a table in the center which loads the iframes. Currently, I have to create a new .html document for each iframe, which I was wondering, if I had somebody click on a link on the main page, a different iframe could load up for each link instead of a whole new .html page. edit this doesn't necessarily need to be in html, however I would prefer it to be so. Thanks Machtkampf how do i make it so the iframe NEVER scrolls.. it just extends to fit the content on the page? an example is http://xtinaweb.org/ - there's no scrollbar, you can just scroll down the page until the writing finished... It has been suggested that I Insert the form in a webpage by using an iframe: email: <IFRAME SRC="/cgi-bin/non-email-step20.pl" width="100%" height="430" SCROLLING="no" frameborder="0"></IFRAME> news: <IFRAME SRC="/cgi-bin/non-email-step21.pl" width="100%" height="400" SCROLLING="no" frameborder="0"></IFRAME> non-email step 20 and21 are perl scripts can some kind soul point me in the direction of how i inset these in a web page, or how to make a start thanks xstation hey guys cool and helpfull forum thx quick question for you gurus i have a html page with a iframe the content of the iframe is a catalogue. now if i use the include statement it changes page when you click add to cart or view order in an i frame it stay in the main page put it is only the content of the iframe that changes. but i get this ugly scroolbar from left to right top to button.. i understand the top to bottom but i want to get rid of the left to right..lol is there another way with the include?but it need to saty in the main page. thx guys I have a page with many links. What I would like to do is have the links open a page on my site with the header info from my site, and the site outside my site in the iframe. This should be simple enough, I just dont know how to do it. So, the link will need to pass a var in some way to the "template" page with the url for the site outside my site, use it in the iframe etc. Any help? Ok i have a form that i would like to post data to an iframe from and i get it to work with the iframe on the page. but once i try to post to the iframe on a different page then the form is on my iframe doesn't show anything here is a sample of what i was using to get it to work all on the same page and i am trying to get the iframe to work on property-search-mls.php Code: <form id="searchForm" name="searchForm" target="iframe" action="http://www.mlsfinder.com/oh_cbr/streetsothebysrealty/index.cfm" method="post" onSubmit="document.getElementById('iframe').src='http://www.mlsfinder.com/oh_cbr/streetsothebysrealty/index.cfm';"> <input id="action" name="action" value="newsearchsession" type="hidden"> <input id="search" name="search" value=" Search for Properties" type="submit"> <iframe name="iframe" id="iframe" width="100%" height="800"></iframe> if anyone can give me some insite on this i would be forever greatful i have spent a good part of today trying to get this to work thanks T Iv built a basic webpage, and in the center is an iframe that brings up the content that I want. However I want to include a flash control panel that is not in the iframe, but controls the navigation (in the iframe) when selected. Basically is it possible to have flash buttons controlling the content in an iframe, without the flash actually being included in the iframe. Thanx... right i have a site which is like a blog the parent page has two iframes on it: one called date and one called blog now the iframe date has different dates in the iframe blog has well the blog with anchors on the dates now i need so that wen you click on a date in iframe date it moves to that anchor in iframe blog which are two completely different pages any help appreciated INDEX (base) <html> <head> <title>site sliced</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <!-- ImageReady Preload Script (site sliced.psd) --> <script type="text/javascript"> <!-- function newImage(arg) { if (document.images) { rslt = new Image(); rslt.src = arg; return rslt; } } function changeImages() { if (document.images && (preloadFlag == true)) { for (var i=0; i<changeImages.arguments.length; i+=2) { document[changeImages.arguments[i]].src = changeImages.arguments[i+1]; } } } var preloadFlag = false; function preloadImages() { if (document.images) { workinp_03_over = newImage("images/workinp_03-over.gif"); workinp_04_over = newImage("images/workinp_04-over.gif"); workinp_05_over = newImage("images/workinp_05-over.gif"); workinp_06_over = newImage("images/workinp_06-over.gif"); preloadFlag = true; } } // --> </script> <!-- End Preload Script --> <style type="text/css"> <!-- .style1 {color: #000000} --> </style> </head> <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" background="images/background.gif" onLoad="preloadImages();"> <!-- ImageReady Slices (site sliced.psd) --> <table id="Table_01" width="800" height="601" border="0" cellpadding="0" cellspacing="0" align="center"> <tr> <td colspan="14"> <img src="images/workinp_01.gif" width="800" height="21" alt=""></td> </tr> <tr> <td colspan="4"> <img src="images/workinp_02.gif" width="93" height="79" alt=""></td> <td colspan="2"> <a href="link1.html" onmouseover="changeImages('workinp_03', 'images/workinp_03-over.gif'); return true;" onmouseout="changeImages('workinp_03', 'images/workinp_03.gif'); return true;" onmousedown="changeImages('workinp_03', 'images/workinp_03-over.gif'); return true;" onmouseup="changeImages('workinp_03', 'images/workinp_03-over.gif'); return true;"> <img name="workinp_03" src="images/workinp_03.gif" width="132" height="79" border="0" alt="link1"></a></td> <td> <a href="link2.html" onmouseover="changeImages('workinp_04', 'images/workinp_04-over.gif'); return true;" onmouseout="changeImages('workinp_04', 'images/workinp_04.gif'); return true;" onmousedown="changeImages('workinp_04', 'images/workinp_04-over.gif'); return true;" onmouseup="changeImages('workinp_04', 'images/workinp_04-over.gif'); return true;"> <img name="workinp_04" src="images/workinp_04.gif" width="138" height="79" border="0" alt="link2"></a></td> <td colspan="2"> <a href="link3.html" onmouseover="changeImages('workinp_05', 'images/workinp_05-over.gif'); return true;" onmouseout="changeImages('workinp_05', 'images/workinp_05.gif'); return true;" onmousedown="changeImages('workinp_05', 'images/workinp_05-over.gif'); return true;" onmouseup="changeImages('workinp_05', 'images/workinp_05-over.gif'); return true;"> <img name="workinp_05" src="images/workinp_05.gif" width="162" height="79" border="0" alt="link3"></a></td> <td colspan="2"> <a href="link4.html" onmouseover="changeImages('workinp_06', 'images/workinp_06-over.gif'); return true;" onmouseout="changeImages('workinp_06', 'images/workinp_06.gif'); return true;" onmousedown="changeImages('workinp_06', 'images/workinp_06-over.gif'); return true;" onmouseup="changeImages('workinp_06', 'images/workinp_06-over.gif'); return true;"> <img name="workinp_06" src="images/workinp_06.gif" width="161" height="79" border="0" alt="link4"></a></td> <td colspan="3"> <img src="images/workinp_07.gif" width="114" height="79" alt=""></td> </tr> <tr> <td> <img src="images/workinp_08.gif" width="39" height="38" alt=""></td> <td colspan="2" rowspan="2"> <img src="images/workinp_09.gif" width="45" height="340" alt=""></td> <td colspan="9"> <img src="images/workinp_10.gif" width="624" height="38" alt=""></td> <td rowspan="2"> <img src="images/workinp_11.gif" width="50" height="340" alt=""></td> <td> <img src="images/workinp_12.gif" width="42" height="38" alt=""></td> </tr> <tr> <td> <img src="images/workinp_13.gif" width="39" height="302" alt=""></td> <td colspan="5" BACKGROUND="images/workinp_14.gif" width="329" height="302"> <iframe name="IF" id="IF" src="dates.html" height="100%" width="100%" frameborder="0">your browser doesnt support iframes please update it</iframe></td> <td colspan="4" BACKGROUND="images/workinp_15.gif" width="295" height="302" valign="top" style="padding-left: 25px"> <font color="white">HI HOW ARE YOU<P> this box doesnt extend and i cant make it so dont put too much here as it looks really screwy,<P> <B>but look at the background its acctually really smoothly animated and fades so it doesnt annoy you</B></font></td> <td> <img src="images/workinp_16.gif" width="42" height="302" alt=""></td> </tr> <tr> <td colspan="14" BACKGROUND="images/workinp_17.gif" width="800" style="padding-left: 100px; padding-right: 100px"><BR> <iframe src="blog.html" name="IF2" width="100%" height="100%" frameborder="0" class="style1" id="IF2">your browser doesnt support iframes please update it</iframe></td> </tr> <tr> <td colspan="14"> <img src="images/workinp_18.gif" width="800" height="107" alt=""></td> </tr> <tr> <td colspan="14"> <img src="images/workinp_19.gif" width="800" height="22" alt=""></td> </tr> <tr> <td colspan="14" BACKGROUND="images/mid_b.gif" width="800" style="padding-left: 105px; padding-right: 105px"><font color="white">and sodoesn this one <P> its great</font></td> </tr> <tr> <td colspan="2"> <img src="images/workinp_20.gif" width="75" height="17" alt=""></td> <td colspan="3"> <img src="images/workinp_21.gif" width="46" height="17" alt=""></td> <td colspan="5" rowspan="2"> <img src="images/workinp_22.gif" width="514" height="18" alt=""></td> <td colspan="2" rowspan="2"> <img src="images/workinp_23.gif" width="73" height="18" alt=""></td> <td colspan="2" rowspan="2"> <img src="images/workinp_24.gif" width="92" height="18" alt=""></td> </tr> <tr> <td colspan="5"> <img src="images/workinp_25.gif" width="121" height="1" alt=""></td> </tr> <tr> <td> <img src="images/spacer.gif" width="39" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="36" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="9" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="9" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="28" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="104" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="138" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="50" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="112" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="110" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="51" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="22" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="50" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="42" height="1" alt=""></td> </tr> </table> <!-- End ImageReady Slices --> <br> </body> </html> DATES: <html> <head> <title>doesnt matter</title> </head> <body bgcolor="black"> click a date to go to that date <a href"blog.html#10807 target="IF2">August 10th 2007</a></center> </font></body> </html> BLOG: <html> <head> <title>doesnt matter</title> <link href="blog.css" rel="stylesheet" type="text/css"> </head> <body bgcolor="black"> <table width="100%" border="3" align="center" cellpadding="5" cellspacing="5" bordercolor="#999999"> <tr> <td class="date" width="30%"><a name="10807">10th august 2007</a></td> <td class="main" width="100%">Hi my name is Matthew Hailwood and i decided to start a blog to keep track of my life, i dont know how often i will update this however I will try my best </td> </tr> <tr class="main"> <td class="date">10th august 2007 </td> <td>this is the second post </td> </tr> <tr class="main"> <td class="date">10th august 2007 </td> <td>this is the third post </td> </tr> </table> </body> </html> |