How to centre this complex site (and playing with CSS animation =)

Discussion in 'Web Design and Development' started by haravikk, Apr 2, 2009.

  1. haravikk macrumors 65816

    Joined:
    May 1, 2005
    #1
    So I've been wanting to re-design my website for a while, so instead of doing university work like I should be, I started playing around with a new take on my site, which has always been circular:
    http://haravikk.com/

    For those of you running Safari Beta 4, you'll notice a few neat animation/transition effects.

    Now, if someone could help me figure out how in the heck I get that site centred without it falling to bits, I'll be rocking :D
     
  2. torndownunit macrumors regular

    Joined:
    Jan 4, 2009
    #2
    I think that's a really neat design.

    I don't have the expertise the others in the forum have, but wouldn't you just put that whole thing inside a wrapper, and set the right and left margins to 'auto' to get that entire thing centered? That shouldn't affect anything else.
     
  3. haravikk thread starter macrumors 65816

    Joined:
    May 1, 2005
    #3
    Thanks!

    Alas, if only it were that simple. The box with the image(s) in it doesn't have a specific width, so that trick won't work :(
     
  4. torndownunit macrumors regular

    Joined:
    Jan 4, 2009
    #4
    Could the wrapper be made large enough to take whatever the maximum width of the box with the images could be into account?
     
  5. haravikk thread starter macrumors 65816

    Joined:
    May 1, 2005
    #5
    The box size is dependant on the height of the image which is always 100% of the viewable area, with a maximum height of 1300 pixels (the image is 1300 x 1300). There's no way in CSS that I can find to say "make the width the same as the height", and 100% for width of course means 100% of the view-area which isn't right. And I don't want to specify a pixel size as the aim is to have the page scale to almost any-size.

    I wish CSS had more useful sizing/positioning commands, as it stand they're actually pretty limited, and of course many of the most useful ones are inconsistent across certain well known browsers...bah!

    I could use javascript, but I'm hoping to make the site a "graceful" javascript site, where it will work pretty much the same without javascript by loading pages separately; currently when you click things it loads a new page with the new content created via PHP, however ideally when you click, javascript will interpret the command instead, and display the result instantly on the same-page.
     
  6. torndownunit macrumors regular

    Joined:
    Jan 4, 2009
    #6
    There are some people who are really skilled with CSS on the forum. Hopefully one of them will jump in. I am sure there is some kind of solution, I am just not good enough to know it lol.
     
  7. haravikk thread starter macrumors 65816

    Joined:
    May 1, 2005
    #7
    So far I've resorted to cheating; I've used absolute positioning to nudge my layout in 25% from the left, which in most screens will position it roughly on-centre, I then use javascript to put it bang-on for browsers that have it enabled.

    The page has been all AJAXified now, it still has no real content, but it's nice, also uses javascript to approximate the glowing H animation on Firefox/Camino (but not on Chrome, which has horrible .png opacity issues at the moment). I've even got some preliminary support for a different theme for mobiles, which of course uses CSS animation for iPhones, though currently there may be some issues, and I only have iPhoney for testing compatibility, and I'm not convinced it's a fully accurate representation of an iPhone's browser.

    If someone does know how I could go about actually centring the site with CSS though, then I'd still very much appreciate it, as I don't like even the fraction-of-a-second error it currently has :D
     

Share This Page