Printable Version of Topic

Posted by: tazirishlamb Sep 16 2006, 02:56 PM

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

Posted by: Christian J Sep 17 2006, 07:55 AM

After circumventing your no-right-click script (easy ) 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.cgi?url=http://www.iol.ie/~mariah/dbrooks/delon.html
There are some serious CSS errors too: http://jigsaw.w3.org/css-validator/validator?uri=http://www.iol.ie/~mariah/dbrooks/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:

Posted by: tazirishlamb Sep 17 2006, 08:00 PM

QUOTE(Christian J @ Sep 17 2006, 07:55 AM)

After circumventing your no-right-click script (easy ) 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.cgi?url=http://www.iol.ie/~mariah/dbrooks/delon.html
There are some serious CSS errors too: http://jigsaw.w3.org/css-validator/validator?uri=http://www.iol.ie/~mariah/dbrooks/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.