iframe position |
iframe position |
tazirishlamb |
Sep 16 2006, 02:56 PM
Post
#1
|
Group: Members Posts: 2 Joined: 16-September 06 Member No.: 149 |
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 |
Christian J |
Sep 17 2006, 07:55 AM
Post
#2
|
. Group: WDG Moderators Posts: 9,722 Joined: 10-August 06 Member No.: 7 |
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.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 |
Sep 17 2006, 08:00 PM
Post
#3
|
Group: Members Posts: 2 Joined: 16-September 06 Member No.: 149 |
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.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. |
Lo-Fi Version | Time is now: 26th September 2024 - 07:53 AM |