SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Aug 2002
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    vertically and horizontally centering a div

    hi

    i need to align a div element that contains an image, image map and nested divs centrally on a page.

    when a user clicks on one of the hotspots on the image map (which is a map of the world) a div is shown with details of this destination.

    the ideal situation (visually) is achieved with

    background-image: url(images/planet_earth.gif);
    background-position: 50% 50%;
    background-repeat: no-repeat;

    but this does not allow me to have my hotspots or nested divs appear in the correct place.

    http://www.3dom.co.za/planet/default.shtml

    the world map, and the destination boxes which appear, should always move to the center of the page.

    this will make my site visible on resolutions of 800x600 and up and maintain my design at all times, in standards compliant browsers.

    since i am still testing the only div that appears correctly placed is london and the links off london do not work yet.

    any help would be much appreciated. once this nut is cracked my site will be finished technically and my code available for all to steal.

    ciao

    web mc

  2. #2
    SitePoint Member
    Join Date
    Aug 2002
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    solution: javascript?

    after 24 posts with no replies it would seem to me that no-one knows an answer!

    one possible solution i have come up with is placing the div using javascript calculations.

    screen.width + div.width / 2 = left edge of element

    screen.height + div.height / 2 = top edge of element

    this would then give my the top and left values needed in my css.

    i would then also have to do onresize=location.reload to make sure it all works out.

    any feedback on the viability if this technique would be appreciated.

    m a r t i n

  3. #3
    SitePoint Enthusiast welded's Avatar
    Join Date
    Jun 2001
    Location
    vancouver.bc.ca
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you can ALMOST do it with
    top: 50%;
    left: 50%;
    position: relative;
    but not quite. it moves the top left corner to the 50% point, not the center. i'm sure there must be a way to do it, this is what css is for, but i know for sure that you could use tables.

    <table width="100%" height="100%">
    <tr><td align="center" valign="middle">

    blah blah blah

    </td></tr>
    </table>
    it's amazing what velocity can do
    when human beings are in season

  4. #4
    SitePoint Evangelist
    Join Date
    Jul 2001
    Location
    UK
    Posts
    407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If the width was a percentage, like 50%, then left:25% would work etc, but I think it'll be a fixed width.

  5. #5
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    #parent {
    left: 50%;
    top: 50%;
    width: 460px; 
    height: 520px;
    margin-left: -230px;
    margin-top: -260px;
    }
    The left and top should be set to 50%.

    The margin-left and margin-top should be set to -half (negative half) of the width and height respectively.

    It's only a workaround, but it will do the trick until W3C get their poop together and give the green light to 'horizontal-align'.


    Works in IE5.1(Mac)/Moz/NN6+/Opera5+

    Haven't tested it in IE5/6 PC, but if it works in Gecko, then it should work in any browser that supports standards.


    Anywho...
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  6. #6
    SitePoint Member
    Join Date
    Aug 2002
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    yep!

    the negative margins work a treat!

    http://www.3dom.co.za/planet/800x600.shtml

    drag and resize the window and voila see the div move and see its nested elements follow!

    cheers for da help!


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
  •