Help - Search - Members - Calendar
Full Version: iframe position
HTMLHelp Forums > Web Authoring > Cascading Style Sheets
tazirishlamb
is there anything i can add to the html of my page to make the iframe float in the same position no matter what the screen resolution
example:

http://www.iol.ie/~mariah/dbrooks/delon.html


if i resize the page the iframe stays in the same position while the background moves about

hopefully its something simple

thanks

any help would be greaty appreciated!

taz wink.gif
Christian J
After circumventing your no-right-click script (easy tongue.gif ) I noticed that your page has no Doctype, the lack of which trigs various legacy behavior in different browsers. So first of all add a Doctype: http://htmlhelp.com/faq/html/basics.html#doctype

Next, fix the HTML errors: http://www.htmlhelp.com/cgi-bin/validate.c...ooks/delon.html
There are some serious CSS errors too: http://jigsaw.w3.org/css-validator/validat...ooks/delon.html
BTW, I recommend that you don't use inline styles. It's more practical to add all CSS in an embedded or external style sheet.

After correcting the above, you must position the IFRAME using the same reference as the background image. Currently the background image is centered horizontally and vertically, to make something similar for the IFRAME you might try:

CODE
html, body {
margin: 0;
padding: 0;
height: 100%;
}

body {
color: #000;
background: #B9DDE0 url(backg3.jpg) no-repeat center;
}

/* Some px values below will have to be adjusted, but leave the 50% as is. */
iframe {
height: 350px;
width: 300px;
position: absolute;
top: 50%;
margin-top: -175px;
left: 50%;
margin-left: 80px;
}


You don't need the DIV around the IFRAME.

Since you use frames you should make sure there's a link in each frame to the main page with the navigation menu, otherwise people will be lost when they arrive on orphaned frame pages from search engines.
tazirishlamb
QUOTE(Christian J @ Sep 17 2006, 07:55 AM) *

After circumventing your no-right-click script (easy tongue.gif ) I noticed that your page has no Doctype, the lack of which trigs various legacy behavior in different browsers. So first of all add a Doctype: http://htmlhelp.com/faq/html/basics.html#doctype

Next, fix the HTML errors: http://www.htmlhelp.com/cgi-bin/validate.c...ooks/delon.html
There are some serious CSS errors too: http://jigsaw.w3.org/css-validator/validat...ooks/delon.html
BTW, I recommend that you don't use inline styles. It's more practical to add all CSS in an embedded or external style sheet.

After correcting the above, you must position the IFRAME using the same reference as the background image. Currently the background image is centered horizontally and vertically, to make something similar for the IFRAME you might try:

CODE
html, body {
margin: 0;
padding: 0;
height: 100%;
}

body {
color: #000;
background: #B9DDE0 url(backg3.jpg) no-repeat center;
}

/* Some px values below will have to be adjusted, but leave the 50% as is. */
iframe {
height: 350px;
width: 300px;
position: absolute;
top: 50%;
margin-top: -175px;
left: 50%;
margin-left: 80px;
}


You don't need the DIV around the IFRAME.

Since you use frames you should make sure there's a link in each frame to the main page with the navigation menu, otherwise people will be lost when they arrive on orphaned frame pages from search engines.


Hey thanks alot for the help,
good idea to put a likn into each page of the iframe, incae it is found in a search engine, but te thing is im completely lost about these validators as im totally novice at web design, i have absolutely no idea how to recode the page to mkae the iframe stay in the same position no matter what screen size.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2020 Invision Power Services, Inc.