HTML - Frames, Iframes...what's The Alternative?

I'm working on an application where the user will be able to build a page made up of several unrelated blocks of information. Since I'd like to generate some ad revenue from these pages, I'm concerned the disjointed nature of the information will tend to confuse ad networks (e.g. AdSense), leading to sub-optimal ads, fewer click-throughs, and less money.

It would be very easy for me to create each block of information as a separate page ("sub-page"), containing its own ad code, and then pull them (and their ads) all together in the user-created pages using frames or iframes. Based on my (limited) understanding of how the ad networks work, it seems this would enable better-targeted ads based on each of these sub-pages. If I'm right, the only problem is the frames and their associated headaches.

1. Am I making too much of the ad relevance issue?

2. Is there a non-frame solution that will achieve the same results?

3. Are the benefits of frames worth the problems?

Thanks.

Involute

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?

Hi, I have a problem with my fileserver which might take a long time to fix, it works randomly, so I was wondering if there was a way to supply TWO SRCs in ONE HTML string, both serving as ALTERNATES.

This is what I mean. Will this work? I tried to see if it works, and it does NOT work. How can I make ALT SRC work.

<img src="URL1/johnhall.jpg" alt src="URL2/johnhall.jpg">

Once again, what I mean is...if URL1 fails for some reason, then URL2 loads johnhall.jpg....that means the website reader does not face any interruptions. How to make this work

Thank you in advance for any advice.

Hello guys, ew to this forum and relatively new to the world of infinite coding! I have a small dilemma, in that my funky 'competition' boxes, when put onto my page, mess up all the other styling.

I have come to the conclusion that using <div> tags was a bad idea. I have a main CSS file called master.css controlling most of the syling, however the bulk of the text and content parts are made using div tags.

Being really difficult to explain, I'll post a link:
http://www.area51clan.seemeplayme.net/ben/test2.html

The code for this:
Quote:
<form action="competition.php" method="post" target="_blank">
<div><img src="images/competition.jpg"></div>

<div id="linkinput" style="background-image:url(images/competition2.jpg); background-repeat: no-repeat; width:180px; height:30px">
<input type="text" style="background-color: transparent; border: solid 0px #FFFFFF;" size="180" maxlength="150" name ="Forename" align="center"/>

<img src="images/competition6.jpg" align="center"></div>

<div id="linkinput" style="background-image:url(images/competition3.jpg); background-repeat: no-repeat; width:180px; height:30px">
<input type="text" style="background-color: transparent; border: solid 0px #FFFFFF;" size="180" maxlength="150" name ="Surname" align="center"/>

<img src="images/competition7.jpg" align="center"></div>

<div id="linkinput" style="background-image:url(images/competition4.jpg); background-repeat: no-repeat; width:180px; height:30px">
<input type="text" style="background-color: transparent; border: solid 0px #FFFFFF;" size="180" maxlength="150" name ="Email" align="center"/>

<img src="images/competition8.jpg" align="center"></div>

<div id="linkinput" style="background-image:url(images/competition5.jpg); background-repeat: no-repeat; width:180px; height:30px">
<input type="text" style="background-color: transparent; border: solid 0px #FFFFFF;" size="180" maxlength="150" name ="Answer" align="center"/>

<img src="images/competition10.jpg" align="center"></div><br /><br />
<input type="submit" value="Submit">
</form>

This is what I want, on this page: [note that the lighter coloured parts are fields which do feed into a database and work.]
http://www.area51clan.seemeplayme.net/ben/home.html
The little box on the right side with 'ABC' in it is where I want it. Alt > View source [in IE] will show you the HTML.

I wasnt sure if you needed the CSS, as Im not very good with that and it isnt my code, so here it is:

Quote:
body{
background: url(images/bg2.jpg);
margin: 0px;
padding: 0px;
text-align: center;
}
td{
vertical-align: top;
text-align: left;
}
#div-table{
margin-left: auto;
margin-right: auto;
width: 1000px;
}
.table{
width: 1000px;
}
.left-side{
background: url(images/left-ex2.jpg) repeat-y;
width: 110px;
}
.right-side{
background: url(images/right-ex2.jpg) repeat-y;
width: 110px;
}
.top{
background: url(images/ate-fat2.jpg) no-repeat;
width: 779px;
height: 36px;
}
.foot{
background: url(images/foot2.jpg) no-repeat;
width: 779px;
height: 43px;
}
.head{
background: url(images/head.jpg) no-repeat;
width: 779px;
height: 125px;
}
.left-content-t{
background: #FFFFFF;
width: 569px;
}
.right-content-t{
background: #FFFFFF url(images/nav-bg-right2.jpg) repeat-y;
width: 210px;
}
.content-header{
background: url(images/content-head2.jpg) no-repeat;
width: 569px;
height: 47px;
}
.c-head-div{
margin-left: 25px;
margin-top: 22px;
margin-right: 25px;
font-size: 10px;
font-family: Verdana;
}
.c-head-div a:link{
text-decoration: none;
color: #1C1C19;
}
.c-head-div a:hover{
text-decoration: underline;
font-weight: bold;
color: #2C4D00;
}
.c-head-div a:visited{
text-decoration: none;
color: #1C1C19;
}
.c-head-div a:active{
text-decoration: none;
color: #1C1C19;
}
.content{
background: #1C1C19 url(images/content-bg2.jpg) no-repeat;
width: 568px;
height: 487px;
border-left: 1px solid #3D3D31;
}
.content-div{
margin-left: 22px;
margin-right: 22px;
margin-top: 3px;
font-family: Verdana;
color: #999999;
font-size: 10px;
}
.nav-top{
background: url(images/nav-topb.jpg) no-repeat;
width: 210px;
height: 34px;
}
.nav-text{
margin-left: 12px;
margin-right: 17px;
margin-top: 10px;
font-family: Verdana;
color: #999999;
font-size: 10px;
}
.nav-div{
margin-left: 12px;
margin-right: 15px;
margin-top: 9px;
font-size: 10px;
font-family: Verdana;
}
.nav-bg{
background: url(images/nav-bg2.jpg) no-repeat;
height: 89px;
}
/* Nav Linsk */
.home{
width: 81px;
height: 31px;
}
.roster{
width: 82px;
height: 31px;
}
.forums{
width: 87px;
height: 31px;
}
.join{
width: 80px;
height: 31px;
}
.servers{
width: 91px;
height: 31px;
}
.info{
width: 118px;
height: 31px;
}
.dl{
width: 120px;
height: 31px;
}
.irc{
width: 120px;
height: 31px;
}
So, is there an alternative to using div tags, do I put the code in the CSS or is there something else? Sorry to be such a bore guys, but ive been trying this for ages and it just doesnt want to work...Ignore the content too - this is for my ICT coursework.

Thanks again guys, and sorry for the huge post!

TracNav

Hi - so I'm a bit of a noob to all this html business, but have done a bit of C at uni. Basically I'm embarking on a little home project trying to create a notepad web app- that way i can have it in my bookmarks, as an app on my iphone, as a webclip on my mac's dashboard etc. I'm hosting it from my dropbox, got that bit sorted.
I thought I had it sorted when i found contenteditable, but alas no ios support, so I was wondering if anyone new of an alternative, basically all i want is a text box thats editable, a save and a refresh button.

Any help greatly appreciated,
Thanks,
Geoff.

I'm adding some ad sense code into my second side bar of my blog. However i have a large widget image which i have placed in my first (left) side panel and it's taking over both panels.

I'm un-able to add a widget into the second (right) side pannel as it overrights the code for the right side pannel for 'archives' and 'blogroll', which is fine. But i'm wanting to place some adsense code under my large image in the right side, but the ad sense code over rights the image!

So, i need to add a bunch of paragraphs to make it shift down lower, i'm using close to 30 <p<&nbsp;</p> so i can get the adsense code low enough to not cover over the left panels large image.

So i'm wondering, is there a smarter, or better way of getting this code down lower? I know i could use CSS and a margin, but i'm not really sure how to make that change. Is there a HTML way of doing this, or is the large amount of spaces i've put in ok?

Thanks!

www.nikkisblogspot.com if my description was a bit confusing.

PS. Whats with IE? My widgets are all over the shop and some aren't even showing??

I have a website build with frames. I have a section called "News" that I want to be able to put the most updated news in, similar to a blog. I want a blog style interface, that way I don't have to edit the HTML of the page every time I want to add a new piece of news. I do not want an SQL based blog however. I've looked into some PHP based blogs, but it "looks" too much like another website loading inside this frame (which I know it IS, but I don't want to give that appearance).

My website is *White* so is there a solution to adding new news in a blog style format without an entire blog inside the frame? I just want to be able to easily add new news to an HTML page without actually going in an editing the HTML.

How do other websites deal with adding news to a news page so that a client could easily edit their own news? Thanks!

Hello, I have an image that I want to make "float" above a small green bar, so that it sticks out above it. I have been able to achieve the effect with the <layer> tag, but the problem is that it only displays correctly in Firefox and not in IE. Also, I want to avoid the layer tag since it is not universally supported.

Here is an example with the layers: http://dqnmusic.googlepages.com/indexenlayer.html

Here is what it looks like when I try to avoid layers:
http://dqnmusic.googlepages.com/indexen.html

Is there away around the layer tag that can still achieve the effect I want?

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.

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!

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.

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?

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

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