Stupid DIV question time

**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/c...olutepositions, 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

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.

Code:

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

Then, add this to your CSS:

Code:

#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

Originally Posted by vacatia

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

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:

Code:

<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

Originally Posted by Medyman

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.

Code:

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

Then, add this to your CSS:

Code:

#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

Originally Posted by Medyman

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

Originally Posted by vacatia

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.

Thread: Stupid DIV question time

Thread Tools

Search Thread

Stupid DIV question time

Bookmarks

Bookmarks

Posting Permissions