#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2004
    Posts
    31
    Rep Power
    15

    Question Centering an overlay popup div


    Thank you for stopping by!

    I'd like some guidance about a problem that has to do with CSS (and a bit of JavaScript I guess) and trying to position an overlaying DIV.

    The problem description is quite simple;
    When I click an image on the "main" area, a div gets, with a little help from javascripting, its display property set to "block". This surely and safely makes the div's content appear as it should and all is fine.
    I now have a headache from trying to figure out how I could position this div. I know what I'd like to do but I can't quite figure out how to get it right.

    I'd like to have the popup-div center itself on the page, regardless of the size of contents inside it.
    The content mostly consists of text of varied amounts and next to no images or other media content.

    If you got any ideas about this or got a link to a website that's similar to what I'm trying to accomplish or any input at all, feel free to make a comment! It's much appreciated!

    Here's what the popup CSS looks like atm:
    Code:
    div.PopUp {
    	width: 550px;
    	border: dashed silver 1px;
    	display: none;
    	position: absolute;
    	left: 150px;
    	top: 50px;
    	background-color: black;
    	text-align: justify;
    	font-size: 10pt;
    	color: black;
    }

    Regards
    DrLaban
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    Check this out: http://forums.devshed.com/javascript...nk-343356.html

    You can use the offsetWidth and offsetHeight properties of the element to find its dimensions.
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo