|
HTML - Streching Iframes
Hi, does anybody know if there is a way to strech an Iframe to fit the whole of a page? When I try there is still always a gap at each side. And also is there a way to make the main window scroll bar act as the Iframes scroll bar?
Thanks Jonny. Similar TutorialsThe following table should strech out to 100% of the height of the page but it doesn't. If I remove the doctype it works fine, but somehow that doesn't seem the right solution.... Also, Dreamweaver is red underlining the piece of code I underlined and made red... I don't see the problem there but dreamweaver seems to think there is one... Can anyone help me out? 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=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" >
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<th height="20" bgcolor="#990033" scope="col"> </th>
<th height="20" scope="col"> </th>
<th height="20" scope="col"> </th>
</tr>
<tr>
<td> </td>
<td> </td>
<td bgcolor="#CC00FF"> </td>
</tr>
<tr>
<td> </td>
<td bgcolor="#339999"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td bgcolor="#0066CC"> </td>
</tr>
<tr>
<td height="20"> </td>
<td height="20"> </td>
<td height="20" bgcolor="#FF9900"> </td>
</tr>
</table>
</body>
</html>
I am currently working on a web site. and i have got a few problem's with it so far. with the image's streching. i want to make it so a 1px width image can stretch along with the web site when information is type in to the news ill give you a link to a image showing what i mean and a link to a copy of the web site since ilm not worried about people having it. Ilm great with 2d art.. and i suck with html. but i am learning slowly if anyone could help me with this problem i would he very great full! if it needs any work done on the frame's i can do that if it would help. i have attached files below! =] edit: and here is a image on how it looks without text in the middle =] so u understand what i am getting on to more. =] First Hi. I am new to this forum and quite newbie in HTML...I looked around the web, but info can be messy sometimes and I remain stucked...so here am I hoping I will solve this. Thanks to you in advance :-) SO : The problem is recurrent and simple : I HAVE A PSD BACKGROUND THAT I WANT TO STRECH ALL ALONG MY HTML PAGE...BUT WHATEVER I DO IT DOES NOT WORK , it repeats but does not strech. I am working with D8. Somebody could guide on this ? I have a table on the top of my page and it has a logo background image...but when i test the code i see that there are white spaces on the topside of website also right side and left side... for example on this website htmlforum.com logo and the blue area are streched to the above right and left side..there are no whitespaces... how am i going to do this? thank you Good Morning, I am placing an iframe on my site, this is working well but I would like to have the website page represented in the iframe to fill my frame 100% as viewed by the viewer.. Currently I have a horizontal scroll bar on the bottom of my frame.. I would like to not need this but to be able to see the full width of that site in my iframe. Is there a way to achieve this? Thank You David I'm using frames now and I really don't like it. Can you change it to iframes? The problem is, at the top row, when some one clicks a link button it takes you to the link but only keeps in it on the top page. Here's the frameset notepad: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html> <head> <title>PokeCosmo -The future of pokemon</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <frameset rows="20%,80%"> <frame img border="0" src="column.html"> <frameset cols="20%,80%"> <frame src="framerow.html"> <frame src="column6.html"> </frameset> <noframes> <p>This frameset document contains:</p> <ul> <li><a href="#">Row_1 contents</a></li> <li><a href="#">Row_2 column_1 contents</a></li> <li><a href="#">Row_2 column_2 contents</a></li> </ul> </noframes> </frameset> <div id="footer"> <div>PokйCosmo.com © 2007. All rights reserved.</div> The second column: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "" > <html lang="en"> <head> <title>PokCosmo</title> <base href="http://www.pokecosmo.com/"> <meta name="keywords" content="pokemon, online pokemon, pokemon articles, netbattle tutorials, pokemon projects, pokemon forums, pokemon community, pokemon pokedex, battle competitor, netbattle, pokemon netbattle, pokemon art, pokemon fanart, pokemon diamond and pearl,free, pokemon ruby and saphire, pokemon emerald, pokemon ruby, pokemon saphire, pokemon cheat codes, pokemon hacks."> <meta name="robots" content="PokйCosmo Front Page 4.0"> <link rel="stylesheet" media="all" type="text/css" href="default.css"> <link rel="alternate stylesheet" type="text/css" media="all" title="style1" href="style1.css"> <link rel="alternate stylesheet" type="text/css" media="all" title="style2" href="style2.css"> <style type='text/css'> body { background-image : url('!--Post link here--!'); } </style> <script src="styleswitch.js" type="text/javascript"> </script> <body bgcolor="black"> <head> <style type="text/css"> h1 {color: silver} </style> </head> <body> <img align="top" src="http://img340.imageshack.us/img340/3342/diamondandpearlcs3.png"><h1> Pokemon Diamond and Pearl- In stores Now!!! <img align="left" src="http://img249.imageshack.us/img249/953/diamondyr4.jpg"> <img align="right" src="http://img522.imageshack.us/img522/4228/pearlrd5.jpg"> <div>PokйCosmo.com © 2007. All rights reserved.</div> <a align="bottom" href="http://www.pokecosmo.com">Home</a> | <a href="http://www.pokecosmo.com/forums">Forums</a> | <a href="netbattle">Pokemon Netbattle</a> | <a href="pokemonol>Online RPG</a> | <a href="pokedex">PokeDex</a> | <a href="contact">Contact Us</a> | <a href="affiliates">Affiliates</a>| <a href="copyright">Copyright</a>|<a href="content">Content rating</a> </div> <!--Affiliation partners=pokeelite2000,psypokes.com--> The sucky first column: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "" > <html lang="en"> <head> <title>PokCosmo</title> <base href="http://www.pokecosmo.com/"> <meta name="keywords" content="pokemon, online pokemon, pokemon articles, netbattle tutorials, pokemon projects, pokemon forums, pokemon community, pokemon pokedex, battle competitor, netbattle, pokemon netbattle, pokemon art, pokemon fanart, pokemon diamond and pearl,free, pokemon ruby and saphire, pokemon emerald, pokemon ruby, pokemon saphire, pokemon cheat codes, pokemon hacks."> <meta name="robots" content="PokйCosmo Front Page 4.0"> <link rel="stylesheet" media="all" type="text/css" href="default.css"> <link rel="alternate stylesheet" type="text/css" media="all" title="style1" href="style1.css"> <link rel="alternate stylesheet" type="text/css" media="all" title="style2" href="style2.css"> <style type='text/css'> body { background-image : url('http://img294.imageshack.us/img294/7408/siteiz8'); } </style> <script src="styleswitch.js" type="text/javascript"> </script> <body bgcolor="gray" text="red"> <div id="left_side"> <div id="left_side_menus"> <img src="http://img238.imageshack.us/img238/3926/sitefv0.png"> <ul> <li><a href="contact">Contact</a></li> <li><a href="history">History</a></li> <li><a href="main">Main</a></li> </ul> <img src="http://img265.imageshack.us/img265/2431/projectsxy3.png"> <ul> <li><a href="pokemononline">POL RPG</a></li> <li><a href="netbattle">Competitor</a></li> <li><a href="graphics">Graphic Projects</a></li> </ul> <img src="http://img299.imageshack.us/img299/6435/downloadswk7.png"> <ul> <li><a href="downloadrpg">POL RPG</a></li> <li><a href="downloadnetbattle">Netbattle</a></li> </ul> <img src="http://img293.imageshack.us/img293/395/communityuo0.png"> <ul> <li><a href="forum/Login.php">Login</a></li> <li><a href="forum/register.php">Free Registration</a></li> <li><a href="forum/showthread.php?p=thread.php">Forum Rules</a></li> <li><a href="forum/reportabuse.php">Report Abuse</a></li> </ul> The crappy row: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html> <head> <title>A simple two rows, two columns frameset document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body bgcolor="black" <a href="www.pokecosmo.com"><img align="left"src="http://img152.imageshack.us/img152/5646/pokecosmosett2.png"></a> <a align="right" href="www.pokecosmo.com/pokegames"><img border="0" src="http://img523.imageshack.us/img523/7470/pokemongamesfz9.gif"></a> <a href="www.pokecosmo.com/projects"><img border="0"src="http://img511.imageshack.us/img511/6365/projectsjv5.gif"></a> <a href="www.pokecosmo.com/pokedex"><img border="0"src="http://img525.imageshack.us/img525/1631/pokedexqc0.gif"></a> <a href="www.pokecosmo.com/netbattle"><img border="0"src="http://img525.imageshack.us/img525/2083/netbattlemp1.gif"></a> <a href="www.pokecosmo.com/forums"><img border="0"src="http://img153.imageshack.us/img153/3989/forumsgc0.gif"></a> and if you could, for the second column could you change the text(expect for the heading) orange and much much smaller? Hello, I am creating HTML sites for various accommodations. They all have listings and availability calenders on a directory as is show he http://www.walestouristsonline.co.uk...ity.asp?id=103 I would like to be able to somehow create something along the lines of an iframe that just incorporate just the calendar part of the page (not the entire page) in the site I am making. Anyone any idea how this can be done? Thanks. Is there a way to make an iframe load all of a page, and make that its height? I don't want a scroll bar, but I would like it so the user can read the whole page in the frame. Is this possible? Thanks. instead of doing frames i've put all my contents into an Iframe with 3 links underneth. Problem is, when you click a link it goes onto a different page, how do i make the link'ed contents appear in the iframe? I hope i make sense! hi all... I am working with iframes on a website I am designing. My question is this... If users scroll all the way to the bottom of the page and click a link, how do you restore the index page all the way to the top, while loading the requested page within the iframe? Hi, I have a webpage which a friend of mine designed a long time ago. I'm not an HTML expert but I know the base things, and the problem is that my site don't use iframes, instead there are tables. I have many pages and the navigation links are on every single page. It's really a pain in the neck to change all pages to modify a navigation link. This is how the HTMl looks: Code: <body> <table width="800" border="0" cellpadding="0" cellspacing="0" class="main" align="center"> <tr><td colspan="2">Head image there</td></tr> <tr><td class="left"> <!--START OF NAVIGATION--> Navigation links are here <!--END OF NAVIGATION--> <td class="content"> <!--START OF CONTENT--> CONTENT HERE <!--END OF CONTENT--> </center></td></tr> <tr><td colspan="2" class="footer"> <!--START OF FOOTER--> This is the footer <!--END OF FOOTER--> </td></tr></table> </body> </html> A pictu Now my question would be that is it possible to put the navigation in a frame but keep the whole site layout the same? I mean, I would like to keep the scrolling the same - Have only 1 scrollbar and when scrolling, scroll the whole page, the navigation and the main content too. Thank you very much for any help! This is a bit complicated but I'll try to explain it as best as I can. I am trying to create a site which will contain information on a fairly large number of topics. In an effort to avoid creating a large number of pages to contain each topic I would like, if possible, to use one page with an iframe and load the topics into the iframe. These topics will come from external pages. The iframe would look similar to this : <iframe id="topic1" style="background-color:#ffffff" height="1000" width="970px" marginwidth="0" marginheight="0" frameborder="0" scrolling="yes" src="http://someothersite.com/externalpage/"></iframe> Since you can't use variables in html the problem, of course, is how to be able to change the src=" " in the iframe in order to be able to change topics (load a different external page). I am looking for suggestions on how this might be done if it is indeed possible. Any help would be very much appreciated. Thanks Hello! I'm trying to get iFrames to work in my HTML for my Twitch streaming profile. Here is the coding for the HTML. HTML Code:
<html>
<head>
<title>Twitch Info Html</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (Twitch Info Html.psd) -->
<table id="Table_01" width="630" height="724" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3">
<img src="http://runaru.webs.com/images/Twitch-Info-Html_01.png" width="630" height="71" alt=""></td>
</tr>
<tr>
<td rowspan="6">
<img src="http://runaru.webs.com/images/Twitch-Info-Html_02.png" width="12" height="653" alt=""></td>
<td>
<img src="http://runaru.webs.com/images/Twitch-Info-Html_03.png" width="605" height="175" alt=""></td>
<td rowspan="6">
<img src="http://runaru.webs.com/images/Twitch-Info-Html_04.png" width="13" height="653" alt=""></td>
</tr>
<tr>
<td>
<img src="http://runaru.webs.com/images/Twitch-Info-Html_05.png" width="605" height="75" alt=""></td>
</tr>
<tr>
<td>
<img src="http://runaru.webs.com/images/Twitch-Info-Html_06.png" width="605" height="165" alt=""></td>
</tr>
<tr>
<td>
<img src="http://runaru.webs.com/images/Twitch-Info-Html_07.png" width="605" height="77" alt=""></td>
</tr>
<tr>
<td>
<img src="http://runaru.webs.com/images/Twitch-Info-Html_08.png" width="605" height="143" alt=""></td>
</tr>
<tr>
<td>
<img src="http://runaru.webs.com/images/Twitch-Info-Html_09.png" width="605" height="18" alt=""></td>
</tr>
</table>
<!-- End Save for Web Slices -->
<!-- --><script type="text/javascript" src="http://static.websimages.com/static/global/js/webs/usersites/escort.js"></script><script type="text/javascript">if(typeof(urchinTracker)=='function'){_uacct="UA-230305-2";_udn="none";_uff=false;urchinTracker();}</script></body>
</html>
I was wondering if anyone could tell me how I can get text over the boxes, so that the text somewhat overlays the image, and doesn't leave a white box. Can you make me 3 frames? 1. On the left side[Want it to be 20% of the site's width] which will have the general links. 2. One on the right side[80% of the width] 3. One on the top[20% of the height] They can be totally blank, I'll enter the content myself. Thank you. Hi, this is my first post here. I uploaded my webpage http://inferno.comxa.com to the server of 000webhost.com When I tried to view them through various browsers, I found that the height attribute of the iframe tag was not responding in any browser except Chrome (12.0). I used the following browsers for checking: IE 8, Firefox 5.0, Opera 11, Chrome 12.0 This is my code Code: <body> <iframe src = "top-right.html" height = "23%" width = "15%"></iframe> <iframe src = "top.html" height = "23%" width = "83%"></iframe><br> <iframe src = "topics.html" height = "77%" width = "15%"></iframe> <iframe src = "home.html" height = "77%" width = "83%" name = "main"></iframe> </body> This is what I was able to see However when I ran a similar code on the editor of w3schools.com, it came out fine in all browsers. This is what I see in w3schools editor What is happening ? why such anomaly ? Help is appreciated. I also tried to replace the attributes of the iframe tag with CSS, but i found the same thing. Looks fine with Chrome but the height was not being registered with any other browser. This is my exact html code Code: <!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="default.css" />
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
</head>
<body style="height:100%;background-color:black;" >
<iframe src="" style="height:25%; width:15%;"></iframe>
<iframe src="" style="height:25%; width:83%;"></iframe><br>
<iframe src="" style="height:75%; width:15%;"></iframe>
<iframe src="" style="height:75%; width:83%;" name = "main"></iframe>
</body>
</html>
and this is my stylesheet Code: *{background-color:black;color:white;}
html{background-color:black;color:white;}
h1{font-size:250%;text-align:center;color:yellow;background-color:black;}
h2{font-size:175%;text-align:left;background-color:black;color:white;}
body{background-color:black;color:white;font-size:120%;}
p:first-letter{font-size:150%;color:red;background-color:black;}
a:link{color:blue;background-color:black;}
a:visited{color:blue;background-color:black;}
a:hover{color:yellow;background-color:black;}
a:active{color:white;background-color:black;}
this is what I saw in IE8 http://html.net/forums/download/file.php?id=55 By the way, in IE8 i get a white space in the frames whereas in Firefox/Chrome/Opera , it comes out black. Anything with CSS compatibility? does anyone know an IE compatible way to disable x-scrolling in iframes? i made a style that had no x-scroll and applied it to the iframe, but that only worked in mozilla. help would be appreciated -james Here... I don't know how to explain this, but I'm having a problem with IFrames. Check out the link: http://www.freewebs.com/noeylani94/index.htm I want all three of them lined up horizontally Can iframes be used inside flash applications embeded on webpages so that when a button is clicked on a flash app, it activates an iframe on the actual webpage. Is that possible? Thanks. Hi, I have a dynamic table which is updated on a form submission. I am trying to update the table without a page refresh so that the form doesn't reset itself back to its default settings thus avoiding the user constantly having to change the fields each time they enter a record. I was thinking of using an iFrame as this looks like a good and relatively easy way to achieve this. Can someone please tell me how I can place a table within an iFrame and refresh just the Iframe contents on the form submission. I hope someone can please help with the code. Thanks Simon Okay, here's the situation. 1) The client uses a catalog service that he likes and wants to keep, but hates the way their pages look. 2) Their Layouts aren't really customizable so I plop their info into another page using an iframe. This page is hosted on a different server than the content. 3) Annoyingly, iframes don't stretch to fit their contents, so if I set the height to accomdate all possible pages, I'm left with a silly amount of space at the bottom of most pages. I can't add code to the interior pages. I've looked around, but nothing seems to work. Any ideas? |
|||||||