The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> iframe position
tazirishlamb
post 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 wink.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Sep 17 2006, 07:55 AM
Post #2


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
tazirishlamb
post Sep 17 2006, 08:00 PM
Post #3





Group: Members
Posts: 2
Joined: 16-September 06
Member No.: 149



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 29th March 2024 - 12:49 AM