www.webdeveloper.com
Results 1 to 9 of 9

Thread: dynamic div layer in center of screen

  1. #1
    Join Date
    Sep 2005
    Location
    California
    Posts
    25

    dynamic div layer in center of screen

    I'm not exactly sure if this is the right forum to be posting this in, and I'm not exactly sure how to explain exactly what I want to do.

    What I am trying to do is to make a DIV layer appear in the center of the users screen, and gray out everything behind it. Similar to what face book does when you add, poke, etc a friend.

    I am just asking how, in CSS, to lay it out. The coding aspect of making the div appear is easy. A shove in the right direction would be helpful. I can find more examples if you are unclear as to what I am asking.

    ~ROSEBLOOD

  2. #2
    Join Date
    Dec 2008
    Posts
    69
    Try this...
    HTML Code:
    <div id="example">Stuff</div>
    CSS:
    Code:
    div#example{
    	width:500px;
    	height:500px;
    	position:fixed;
    	top:50&#37;;
    	left:50%;
    	margin: -250px 0 0 -250px;
    	background:#000;
    	opacity:0.3;
    	filter:alpha(opacity=30);
    }
    Edit: Doesn't seem to work in IE... *grr*
    Last edited by Hen Asraf; 12-22-2008 at 03:05 AM.

  3. #3
    Join Date
    Sep 2005
    Location
    California
    Posts
    25
    Unfortunately that doesn't work. You can't do math in CSS

    ~ROSEBLOOD

    Edit: Nevermind, you changed your code.

  4. #4
    Join Date
    Dec 2008
    Posts
    69
    Still doesn't work in IE D= only Firefox.

  5. #5
    Join Date
    Sep 2005
    Location
    California
    Posts
    25
    Using your code here is what I did:
    Code:
    #wrapper {
    position: absolute;
    height: 100&#37;;
    width: 100%;
    margin: 0;
    opacity: .6;
    filter: alpha(opacity=60);
    background-color: #505153;
    z-index: 500;
    }
    #info {
    position: fixed;
    height: 500px;
    width: 500px;
    top: 50%;
    left: 50%;
    margin: -250px 0 0 -250px;
    background-color: blue;
    opacity: 1;
    filter: alpha(opacity=100);
    z-index: 600;
    }
    and here are my DIV's
    Code:
    <div id="wrapper">
    <div id="info">
    </div>
    </div>
    Now my problem is that the #info is not solid. Even though I told it to be. Any ideas? In IE, everything is solid....

    ~ROSEBLOOD

    EDIT: I've tested mine in Chrome, Firefox, Opera, and Safari and IE8.
    Last edited by ROSEBLOOD; 12-22-2008 at 03:31 AM.

  6. #6
    Join Date
    Sep 2005
    Location
    California
    Posts
    25
    For whatever reason, IE8 need to have quotes around its filter setting...
    Code:
    filter: "alpha(opacity=60)";
    Now it looks just like every other browser, everything is transparent.

    ~ROSEBLOOD

  7. #7
    Join Date
    Sep 2005
    Location
    California
    Posts
    25
    Thanks for your help Hen.

    It's been fixed, I just had to move #info outside of #wrapper in my html.

    ~ROSEBLOOD

  8. #8
    Join Date
    Feb 2006
    Posts
    198
    it is much easier to use a library such as jQuery or script.aculo.us for this kind of work, why re-invent the wheel and deal with cross-browser headaches?

  9. #9
    Join Date
    Jan 2008
    Posts
    66
    What you are trying to create is called a modal window btw. Learn something today

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles