SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Member zymic's Avatar
    Join Date
    Feb 2005
    Posts
    0
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Help Needed (centering an object h&v)

    Hello,

    I need to know how to do something similar to the light box script (but just one part of it).

    When you click a link, a box appears horizontally and vertically centered on the screen, above all the content (z-index) and then the transparency of the screen changing.

    http://www.huddletogether.com/projects/lightbox/

    I do not need all the extras like light box has, just a simple click and a box appears centered on the screen like said.

    How would I go about this?

    Thanks

  2. #2
    SitePoint Addict
    Join Date
    Mar 2005
    Location
    Toronto
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What you need is a simply centering hack like this:
    xhtml:
    Code:
    <div id="center">
    </div>
    css:
    Code:
    #center{
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -half of the div's width;
    margin-top: -half of the div's height;
    }
    In this script, the left and top 50% is easy to understand, because it's aimed at locating the center of the page. However, this way the left-top corner would start from the center of the page, making it misaligned again. So the fix to that is to set a margin for both left and top of that div the value of half the negative height and width to set the center of the page located exactly the center of the div to create a perfectly centered div.

  3. #3
    SitePoint Member zymic's Avatar
    Join Date
    Feb 2005
    Posts
    0
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks, i'll give it a go.


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
  •