Email conversation
| From | John Kaye Quingua |
|---|
| To | Me |
|---|
| Subject | trouble with <div> positioning |
|---|
| Date | 25 April 2004 14:30 |
|---|
hi there. i'm having trouble positioning my <div> tag on a different screen
resolution. the <div> tag contains an <iframe> tag inside it. the website i've
developed was created in 1024x768 screen resolution, although when this site is
viewed in a greater screen resolution, the <div> tag is offset to what it was
positioned. the <div> layout was positioned in an external CSS.
div.layout
{
position: absolute;
left: 33%;
top: 20%;
width: 600px;
height: 80%;
z-index: 1;
}
my website is xxx.xxxxxxxxxx.xxx/xxxxxxxxxxxx. the content of the website (e.g.
<iframe> tag in the <div> tag) looks proportionally placed when viewing under
1024x768 resolution, higher or lower than that causes the <div> to offset it's
place.
basically i want the viewers to see the content, no matter what resolution, the
same as i view the content under 1024x768 resolution. is that possible? i
visited your website and found the same problem as the other developing was
having, i copied the code from the message, but this doesn't work. any ideas?
i've used fireworks to create the buttons and background layout of the page,
then i used the <div> and <iframe> to put the content of the website. the best
way i could solve this is say that the website is best viewed under 1024x768
resolution, but i don't want it to work like that.
is there a solution? thanks.
| From | Me |
|---|
| To | John Kaye Quingua |
|---|
| Subject | Re: trouble with <div> positioning |
|---|
| Date | 25 April 2004 19:53 |
|---|
John,
Your problem is that you are aligning the div.layout relative to the
browser window assuming the percentage of its size related to the window
width remains constant. Of course, this is not possible, as when the window
size changes, the div.layout size does not change.
What you need to do is to place div.layout relative to the centre of the
window (after all, that is what the align="center" is doing to your table,
and you want the div to line up with the table).
To achieve this, use left: 50%; then use a negative margin-left to offset
it the desired amount so that it correctly lines up with the table.
Something like this should work:
left: 50%; margin-left: -200px;
(that example is not perfect, but you should be able to get the idea of
what I mean)
As for the top position, the problem is similar, you need to offset it
using pixel amounts, not percentages (the height of the table does not
change if the size of the window changes) - something like:
left: 100px;
Please note that your table is set to 800 px wide. This will cause problems
at 800 x 600 resolution because the screen may be 800 px wide but the
available space inside the browser window is not. It still needs space for
the scrollbar and body paddings - this last problem can be avoided using:
html, body { padding: 0; margin: 0; }
Incidentally, you have a sligtly odd style specified in your stylesheer:
body { background-color: transparent; }
this has no effect in Internet Explorer, as it ignores the style and shows
its bgcolor attribute instead, but other browsers accept the style and show
their default background colour - usually white.
And yes, I agree that the 'best viewed with/at' is not a good way to
start. As an opera user, I always find those messages very offensive, my
browser makes your site look beautiful (and so do mozilla/safari ...), so
why tell me to upgrade? Especially as IE is not available for all platforms
... but that's your choice.
hope this helps
Mark 'Tarquin' Wilton-Jones - author of http://www.howtocreate.co.uk/
| From | John Kaye Quingua |
|---|
| To | Me |
|---|
| Subject | Re: trouble with <div> positioning |
|---|
| Date | 25 April 2004 20:59 |
|---|
hi there. thanks for your reply to my question, i do appreciate your effort and
patience reading my email and answering to it. thanks.