Page 1 of 2 12 LastLast
Results 1 to 10 of 16

Thread: Stupid DIV question time

  1. #1
    Join Date
    Oct 2006
    Posts
    41
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default Stupid DIV question time

    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

  2. #2
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,366
    Thanks
    31
    Thanked 141 Times in 136 Posts
    Blog Entries
    32

    Default

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

  3. #3
    Join Date
    Oct 2006
    Posts
    41
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    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.

  4. #4
    Join Date
    Mar 2007
    Location
    Currently: New York/Philadelphia
    Posts
    2,735
    Thanks
    3
    Thanked 519 Times in 507 Posts

    Default

    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.

  5. #5
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,366
    Thanks
    31
    Thanked 141 Times in 136 Posts
    Blog Entries
    32

    Default

    Quote Originally Posted by vacatia View Post
    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.

  6. #6
    Join Date
    Mar 2007
    Location
    Currently: New York/Philadelphia
    Posts
    2,735
    Thanks
    3
    Thanked 519 Times in 507 Posts

    Default

    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.

  7. #7
    Join Date
    Oct 2006
    Posts
    41
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by Medyman View Post
    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..

  8. #8
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,366
    Thanks
    31
    Thanked 141 Times in 136 Posts
    Blog Entries
    32

    Default

    Quote Originally Posted by Medyman View Post
    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.

  9. #9
    Join Date
    Oct 2006
    Posts
    41
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    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??

  10. #10
    Join Date
    Mar 2007
    Location
    Currently: New York/Philadelphia
    Posts
    2,735
    Thanks
    3
    Thanked 519 Times in 507 Posts

    Default

    Quote Originally Posted by vacatia View Post
    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.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •