Not signed in (Sign In)

Categories

Vanilla 1.1.4 is a product of Lussumo. More Information: Documentation, Community Support.

Help keep Vanilla free:
Welcome Guest!
Want to take part in these discussions? If you have an account, sign in now.
If you don't have an account, apply for one now.

Random: Horizontal & Vertical Centering of Div's

Bottom of Page

1 to 17 of 17

  1.  
    •  
      CommentAuthornathan
    • CommentTimeOct 4th 2005 edited
     # 1
    I need to know if this is possible for a div to be horizontally and vertically centered on a page, WITHOUT know the width and height of the page before hand.

    I know it is possible with CCS, BUT, it only works in Safari.

    Does anyone know of a JS way to do this? I would really appreciate your help.

    Thanks heaps.
    •  
      CommentAuthornathan
    • CommentTimeOct 4th 2005
     # 2
    Oh. BTW, this is for the login/ signup page for my new vanilla theme. I am not sure if it will be publically available (it is for work), but I will try.
    • CommentAuthordknowles
    • CommentTimeOct 4th 2005
     # 3
    horizontal:


    .divClassName {
    margin-left: auto;
    margin-right: auto;
    }


    vertical;

    much more tricky. i haven't found a good way of doing it. i'm sure you can do it in javascript, but i'm not too handy with javascript.
    •  
      CommentAuthornathan
    • CommentTimeOct 4th 2005
     # 4
    thanks.

    I got that one just before, not that way though. SoI will use this one.

    I really need the vertical! I did fins a few CSS hacks, but as I said, it only works in Safari, and that just won't do.

    Anyone for a JS version.
    •  
      CommentAuthornathan
    • CommentTimeOct 4th 2005 edited
     # 5
    I found this [1] which lets you horizontally AND vertically center and image tag, BUT only if you know the width of the div it is on.

    I am not sure if this could help anyone!

    [1] http://www.brunildo.org/test/img_center.html
    •  
      CommentAuthorgiginger
    • CommentTimeOct 4th 2005
     # 6
    The way I've got an element centered is using this:

    #horizon {
    position: absolute;
    top: 50%;
    left: 0px;
    width: 100%;
    margin-top: -50px;
    min-width: 330px;
    }

    Then putting the image in the centre. Admittedly, my friend did it for me. Have a look at the source of the front page of my site

    http://www.bambambambambam.co.uk to see how it works.
    •  
      CommentAuthornathan
    • CommentTimeOct 5th 2005
     # 7
    Thanks giginger.

    I can test this myself, but do you know what browsers this does, does not work in?
    •  
      CommentAuthorKosmo
    • CommentTimeOct 5th 2005 edited
     # 8
    In CSS there is no unified way to absolute center objects, browsers like IE doesn't recognize the vertical positioning of an element, IIRC.

    Propably the easiest way to do that is with JS, or possibly with DHTML, I saw it done once, but it was alot of doohikeys.

    But you might want to test something like this


    position:absolute;
    margin:-100px 0px 0px -200px;
    top: 50%;
    left: 50%;
    •  
      CommentAuthornathan
    • CommentTimeOct 5th 2005
     # 9
    Kosmo, I just checked/ tested the code submitted by giginger, and it working in FF, Safari and Camino on the mac, and ff and ie on windows.

    Thanks for that giginger. I will probably use this method.
    •  
      CommentAuthorgiginger
    • CommentTimeOct 5th 2005
     # 10
    I could only vouch for FF and IE becuase I don't have a Mac or Linux.

    Thanks should really go to the user epohs who's here sometimes. He's the person who told me :)

    Glad it worked though.
  11.  # 11
    that's a really clever piece of css, so simple as well!
    •  
      CommentAuthorlech
    • CommentTimeOct 5th 2005
     # 12
    I do believe this will only work in html 4.0 transitional and below, otherwise you're asking for a headache if you try to throw this one at xhtml 1.0 strict.
    •  
      CommentAuthorgiginger
    • CommentTimeOct 5th 2005
     # 13
    My page is XHTML Transitional and it works on that. I can't say for strict though.
    •  
      CommentAuthornathan
    • CommentTimeOct 5th 2005
     # 14
    I don't care about Script for this project. So for the moment, I will still use that piece of code.
    • CommentAuthordknowles
    • CommentTimeOct 5th 2005
     # 15
    oh, right! that's how you do it. technically, the top should be -(image height / 2)

    the auto-margins are the de-facto way to do horizontal centering, from what i've gathered. i think ie prefers the text-align:center, though.
    •  
      CommentAuthorKosmo
    • CommentTimeOct 6th 2005 edited
     # 16
    Well, what I have experienced, IE works much better with the top: 50%; left: 50%; than with the auto shit, which is the right way to do it when W3C is concerned.

    And about XHTML strict, I don't think that you are allowed to use ANY descriptive information on the tags themselfs, i.e. <body bgcolor="xxx"> vs. <body>
  17.  # 17
    yeah i have to say i didn't think xhtml strict would be concerend with what you place in your stylesheet.

1 to 17 of 17

  1.  
Add your comments
    Username Password
  • Format comments as
 
Back to Discussions Top of Page