Member Avatar for welshbaloney

Hello,
I have a simple page that consists of an image, some map hotspots, and an iframe that displays content when the hotspots are clicked:

<div id="wrapper">
<img src="blah.gif" />
...
some <area...target="iFrame"> tags
...
<iframe id="iFrame" src="home.htm">No iframe support!</iframe>
</div>

With the wrapper naturally aligning to the top/left of the browser window, the iFrame is aligned correctly in relation to this.

However, I want to center the image on the web page. When I align="center" the wrapper div, the iFrame stays where it is - misaligned.

When the browser page is adjusted and the wrapper div centers in the new browser window, how can I ensure that the iFrame position adjusts to maintain its position relative to the wrapper?

Thanks

  • 2 Contributors
  • 4 Replies
  • 119 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by welshbaloney

Recommended Answers

All 4 Replies

Member Avatar for JonathanD

you could try inline CSS for the iframe like GoogleAds

Member Avatar for welshbaloney

Thanks for replying JonathanD,
I'm not sure what you're referring to. Can you offer an example?

Thanks
Tony.

Member Avatar for JonathanD

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><style>a:link,a:visited,a:hover,a:active{color:#0000ff;cursor:pointer;}body,table,div,ul,li{font-size:10px;margin:0px;padding:0px}body{background-color:transparent;font-family:arial,sans-serif;height:100%}#aus{height:250px;width:300px}#ads{left:2px;position:absolute;top:2px;width:296px}#ads ul{list-style:none;}#ads ul li{clear:both;float:left;height:116px;overflow:hidden;width:296px}.ad{margin:0px 2px}.adt{font-size:13px;font-weight:bold;line-height:14px;}.adb{color:#000000;display:block;font-size:13px;line-height:14px;}.adu{color:#009900;font-size:10px;line-height:12px;overflow:hidden;white-space:nowrap}.adus{cursor:pointer;}.adc{width:100%;height:116px;table-layout:fixed;overflow:hidden}#abgi{left:220px;position:absolute;top:233px}#aubg{background-color:#ffffff;border:0px solid #ffffff;display:none;height:250px;width:300px}.bg{background-color:#ffffff;border-color:#ffffff;border-style:solid;border-width:0px;height:18px;position:absolute;width:18px}#tlc{background-color:#ffffff;border-left-width:0px;border-top-width:0px;left:0px;top:0px}#trc{background-color:#ffffff;border-right-width:0px;border-top-width:0px;left:282px;top:0px}#blc{background-color:#ffffff;border-bottom-width:0px;border-left-width:0px;left:0px;top:232px}#brc{background-color:#ffffff;border-bottom-width:0px;border-right-width:0px;left:282px;top:232px}#bgtf{border-top-width:0px;left:18px;top:0px;width:264px}#bgbf{border-bottom-width:0px;left:18px;top:232px;width:264px}#bgcf{border-left-width:0px;border-right-width:0px;height:214px;left:0px;top:18px;width:300px}</

something like that, inline CSS might work.

Member Avatar for welshbaloney

Ah...so you mean explicitly putting the CSS into the file rather than external in a .css file.
I'll give that a try. Thanks for helping.

Tony.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.