View Full Version : How to place an image over an iframe?

09-01-2007, 01:46 PM
Ok, ive got a site, and a part of the site is used using a site builder which leaves an ugly banner at the top, its plain white, and my site has a black bg so you can see my dilemma.

The site builder part dosent allow custom CSS, so i cannot block the image out that way.

So is there any way to place an image over the top of the page in the iframe from the page containing the iframe?

The COC of the site builder didnt mention this so i emailed the webmaster, he says if i can block out the image go for it, as long as i dont block out the link back to his site, which is placed at the bottom.

If there any other information you need please tell me.

09-01-2007, 02:17 PM
Can you use CSS Styling in the form of tags? I.e. <ELEMENT STYLE="CSS CODES HERE">

If So,

You could, I suppose, absolutely position a DIV Layer over the top of the iframe.

<div style="background: #000000; position:absolute; left: 0px; top: 0px; width:100%; height:20%;"></div>

That stretches all the way along the page, and the height is 20% of the page. You should get the height of the iframe from the source code and use that as the height of the DIV Layer.


09-01-2007, 02:30 PM
To tell you the truth I really dont know that much about CSS. Im good with HTML, and am currently using CSS in my design, i pulled the css pre-made and apart from messing around with the colors/borders etc i cant do much. I have attached the CSS, here is the HTML.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="default.css" rel="stylesheet" type="text/css" />
<div id="header">
<div id="logo">

<div id="menu">
<li class="active"><a href="#" title="">Homepage</a></li>

<li><a href="#" title="">F.A.Q</a></li>

<li><a href="#" title="">F.A.Q</a></li>
<li><a href="#" title="">About Us</a></li>
<li><a href="#" title="">Invest</a></li>
<li><a href="#" title="">Contact</a></li>

<div id="wrapper">
<div id="content">

<iframe src="shirts.html" width="900" height="1100" frameborder="no" > </iframe>
<div style="clear: both;">&nbsp;</div>
<div id="footer">
<p id="legal">Copyright &copy; 2007 Web Shirt Designs. All Rights Reserved.</p>
<p id="links"><a href="#">Privacy Policy</a> | <a href="#">Terms of Use</a></p>

09-02-2007, 12:53 AM
Why not use a site builder that creates the page the way you want in the first place. That would be much easier than using one that inserts things you don't want that you need to hide.

If using their site builder is part of the conditions for using the hosting then anything it puts there is probably required to be there as part of the conditions as well and so trying to hide it would be a breach of their conditions.

09-02-2007, 12:43 PM
The site builder is an image gallery maker, i could of done this myself in html, but it is much easier to do it this way.

As i said i emailed the webmaster and he said it was fine, just as long as i kept the "powerd by" and "create your own".

The bit im trying to cover up is essentially a blue bar with my name on it. Im not breaking any Tos here, im sure of that, so thanks for your concern, but no thanks.