Stupid DIV question time [Archive] - Dynamic Drive Forums

vacatia

04-23-2008, 07:37 PM

Hi there,

Hoping someone can help me quickly, I have a page with 1 iframe in it, I positioned all the images around the iframe using the divs, but now due to people's computers being on different resolutions I failed to remember that while it was centered on my computer on other people's it definitely is not. How can I centre it for everyone?

Here's the site so far:

http://www.thesketchersons.com/lisa/mainnew2.htm

molendijk

04-23-2008, 09:34 PM

See http://www.alistapart.com/articles/conflictingabsolutepositions, which offers a way for precisely positioning elements.
---
Arie Molendijk.

vacatia

04-23-2008, 09:56 PM

Thanks for that link, I'm a bit dense though and I'm having trouble figuring out how to work that into the code I already have :confused: Also I have an iframe inside these fixed images which is confusing me even more.

Medyman

04-23-2008, 10:19 PM

Whoa....that's a lot of absolute positioning. You can get yourself in real trouble with that, as you've found out. But it's easy enough to fix.

Surround your entire page in another div, let's call it container for illustration purposes.

<div id="container">
... everything between the <body></body> tags goes here
</div>

Then, add this to your CSS:

#container {
margin:0 auto;
position:relative;
width: 800px; // width of your design
}

You'll need to redo all of you absolute positioning, though. Because you want it to be positioned in relation to the centered div, not the browser. The absolute positioning relative to the container div will be the same in all browsers.

molendijk

04-23-2008, 10:26 PM

Thanks for that link, I'm a bit dense though and I'm having trouble figuring out how to work that into the code I already have :confused: Also I have an iframe inside these fixed images which is confusing me even more.
I'll give you an example that may serve as an illustration of what you can do with the technique explained in the link that I gave you. Suppose you want (i) a centered div that has a distance of 50 px from the edge of the window; (ii) another centered div that has distance '90'; (iii) a third div containing an iframe with distance='190'. The you can write:
<div style="position:absolute; top:50px; bottom:50px; left:50px; right:50px; border:1px solid red; _height:expression(document.body.clientHeight-2*50);_width:expression(document.body.clientWidth-2*
50);">a div</div>
<div style="position:absolute; top:90px; bottom:90px; left:90px; right:90px; border:1px dashed red; _height:expression(document.body.clientHeight-2*90); _width:expression(document.body.clientWidth-2*90);">another div</div>
<div style="position:absolute; top:190px; bottom:190px; left:190px; right:190px; border:1px dotted black; _height:expression(document.body.clientHeight-2*190); _width:expression(document.body.clientWidth-2*190);"><iframe src="http://www.google.com" style="width:100%;height:100%"></iframe></div>
The underscored parts are needed for Internet Explorer. You might want to put them in conditional comments. If you don't know what that means, just leave things as they are.
---
Arie Molendijk.

Medyman

04-23-2008, 10:29 PM

Arie...interesting technique. But, why muck around with javascript and it's inherent accessibility issues when you can easily accomplish this via simple CSS?

You're probably over complicating things here.

vacatia

04-23-2008, 10:47 PM

Whoa....that's a lot of absolute positioning. You can get yourself in real trouble with that, as you've found out. But it's easy enough to fix.

Surround your entire page in another div, let's call it container for illustration purposes.

<div id="container">
... everything between the <body></body> tags goes here
</div>

Then, add this to your CSS:

#container {
margin:0 auto;
position:relative;
width: 800px; // width of your design
}

You'll need to redo all of you absolute positioning, though. Because you want it to be positioned in relation to the centered div, not the browser. The absolute positioning relative to the container div will be the same in all browsers.
Thanks for your help! Now since I'm completely useless I used what you gave me and it just seemed to stick a window in the middle of my image and screw up the iframe. I'm not even sure how to reposition the images now because they look the same still..

molendijk

04-23-2008, 10:53 PM

Arie...interesting technique. But, why muck around with javascript and it's inherent accessibility issues when you can easily accomplish this via simple CSS?

You're probably over complicating things here.
Medyman, you are absolutely right here. But it is so easy to get the right position and the right dimensions of elements (divs etc.) if you use the alistapart-technique! And really, it's not complicating things.

Of course, it all depends on what you want. If you have a site for which you absolutely need javascript (for certain things), then you can use what I indicated (since you need javascript anyway). If not, you should go your way.

(Note: the javascript is only needed for IE<7; if it were not for IE5 and IE6, we could do without the IE-expressions).
---
Arie.

vacatia

04-23-2008, 11:37 PM

Ok I think I'm scrapping this because it's frying my brain. I did an alternate version that includes a popup window.

Now I have new problems.

a)firefox it doesn't popup in the centre and the popup apparently appears white? I had my friend with firefox try it out but I'm not near him so I can't see exactly what he means.

http://www.thesketchersons.com/lisa/indexgrill.htm

This is the page that generates the popup, that works fine for me and is centered but apparently not for firefox, how do I fix that??

Medyman

04-24-2008, 12:31 AM

This is the page that generates the popup, that works fine for me and is centered but apparently not for firefox, how do I fix that??

The same way as I mentioned before. Your page will simply not work with those absolute positions intact.

My not work I mean render the same across all browsers and resolutions.

vacatia

04-24-2008, 01:38 AM

Does anyone use firefox here who can tell me exactly what they see when they click on the popup link? I was told by a couple people it worked afterall

Medyman

04-24-2008, 02:42 AM

Yes, it does work now. I'm guessing since you set the exact width of the popup.

But might I add, that the popup window route isn't an advisable route to go. In the era of popup blockers galore, there will probably be a fair share of users who will never be able to see your page unless they manually override the popup blocker.

Firefox didn't block it for me. But IE 7 did -- well, more specifically the Google toolbar for IE 7 did.

vacatia

04-24-2008, 02:47 AM

Thanks for helping me out--I'm hoping people will catch on that the site is a popup site and to just let it go!

Medyman

04-24-2008, 03:03 AM

Thanks for helping me out--I'm hoping people will catch on that the site is a popup site and to just let it go!

Only time will tell I suppose but that might be a bit too optimistic on your part. In the end though, it all depends on your goal for your website. If it's supposed to have viable commercial results -- i.e. raise publicity, garner sales, etc... then I would rethink it.

If it's just for a casual online presence, it might not be worth it to you.

If you're making this site for someone else (i.e. a client), then you should 100% change it.

vacatia

04-24-2008, 03:07 AM

I just had serious confusion with the two options given above, as stated previously I wasn't quite sure how to incorporate the codes you listed above (and when I tried it didn't quite work out)

Medyman

04-24-2008, 02:35 PM

I just had serious confusion with the two options given above, as stated previously I wasn't quite sure how to incorporate the codes you listed above (and when I tried it didn't quite work out)

You would have had to undo all of the absolute positioning you have now.