| | |
Expanding Iframes/divs background
Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Thread Solved |
•
•
Join Date: Jul 2009
Posts: 4
Reputation:
Solved Threads: 0
I have a website which uses an iframe to load up the homepage content, this iframe is located within a DIV which I have tried to add a background to, however the background only spans the length of the content (written words, not the iframe length) and then the background of the DIV changes to the proper site background.
I'm kinda new at all this so I'm not sure if its even right xD
if you don't understand me the link is: http://www.habbonowfm.com/risingfm/index.html
I'm kinda new at all this so I'm not sure if its even right xD
if you don't understand me the link is: http://www.habbonowfm.com/risingfm/index.html
HTML and CSS Syntax (Toggle Plain Text)
#rightcolumn { float: left; background-repeat: repeat-y; margin: 0px 0px 0px 0px; padding: 5px; width: 520px; background-image: url(images/mainbackground.png); } <div id="rightcolumn"> <p><iframe name="main" id="main" src="home.html" width="510" frameborder="0" allowtransparency="yes" scrolling="no" target="main" height="427" ></iframe> </p> </div>
Last edited by Tekmaven; Jul 2nd, 2009 at 9:15 pm. Reason: Code Tags
If I were you, I'd skip the whole iframe thing and either use
<ol>
<li>Static Pages</li>
<li>ServerSide Includes</li>
<li>PHP Includes</li>
<li>Javascript / JQuery Tabs</li>.
</ol>
However, in regards to your question, where is the content problem?
Using an iframe as a block element, it is like an flash object, and it loads an entirely different page, not just text, so you'd have to style that other page with the background.
Still, try using a jquery tabs option, which allows google to index the page and allows you to keep all the content on the page.
<ol>
<li>Static Pages</li>
<li>ServerSide Includes</li>
<li>PHP Includes</li>
<li>Javascript / JQuery Tabs</li>.
</ol>
However, in regards to your question, where is the content problem?
Using an iframe as a block element, it is like an flash object, and it loads an entirely different page, not just text, so you'd have to style that other page with the background.
Still, try using a jquery tabs option, which allows google to index the page and allows you to keep all the content on the page.
•
•
Join Date: Jul 2009
Posts: 4
Reputation:
Solved Threads: 0
The iframe is set to transparent so the background of the DIV "rightcolumn" will be able to be seen, however the background only shows underneath the text, instead of filling the whole thing.
Alternatively, I could use expanding iframes, which also expand the DIV, although I'm unsure on how to go about this.
Alternatively, I could use expanding iframes, which also expand the DIV, although I'm unsure on how to go about this.
To answer your question, just add a background to the #wrapper div.
Make the bg image the size of the two columns, combining the images, for the effect you with to achieve (to leave a little of the page bg at the top, try adding a little margin at the top.
Hope that Helps!
<FAKE SIGNATURE>
Make the bg image the size of the two columns, combining the images, for the effect you with to achieve (to leave a little of the page bg at the top, try adding a little margin at the top.
Hope that Helps!
<FAKE SIGNATURE>
Last edited by peter_budo; Jul 6th, 2009 at 10:55 am. Reason: Keep It On The Site - Do not manually post "fake" signatures in your posts. Instead, you may create a sitewide signature within the user control panel.
•
•
Join Date: Jul 2009
Posts: 4
Reputation:
Solved Threads: 0
That does help, thanks very much. I've now fixed my little problem, but where you stated to use a margin.
I type in
margin-top:15px;
into the #wrapper but still get the background appearing above the site.
EDIT:The other little problem was on the #header, and not the #wrapper. I have now solved this
Thanks very much for all your help, these tips will be remembered.
I type in
margin-top:15px;
into the #wrapper but still get the background appearing above the site.
EDIT:The other little problem was on the #header, and not the #wrapper. I have now solved this

Thanks very much for all your help, these tips will be remembered.
Last edited by Chubbymouse; Jul 5th, 2009 at 6:59 am.
![]() |
Similar Threads
- How to make CSS opacity setting work in IE7 ? (JavaScript / DHTML / AJAX)
- Body Background Issue (HTML and CSS)
- div repeat background problem (HTML and CSS)
- PHP / CSS incompatibility? (PHP)
- Layout Problems (HTML and CSS)
- BUG in Internet Explorer. Please help find a solution! (HTML and CSS)
- Rounded Tabs (HTML and CSS)
- tutoring for CSS ? (HTML and CSS)
- web design: tables versus divs (HTML and CSS)
Other Threads in the HTML and CSS Forum
- Previous Thread: Please help with Browser Compatibility Gallery Script!!!!!PLEASE
- Next Thread: How do websites handle user entered text?
| Thread Tools | Search this Thread |
appointments asp background backgroundcolor beta browser bug calendar cart cgi code codeinjection corporateidentity css design development displayimageinsteadofflash dreamweaver emailmarketing epilepsy explorer firefox flash form format google griefers hackers hitcounter hover html ide ie7 ie8 iframe image images internet internetexplorer intranet iphone javascript jpeg layout macbook maps marketshare microsoft mozilla multimedia navigationbars news offshoreoutsourcingcompany opacity opera optimization perl pnginie6 positioning problem scroll seo shopping studio swf swf. textcolor timecolor titletags url urlseparatedwords visual visualization web webdevelopment webform website windows7 xml xsl





