Drop in notifier

[Liza Z]

http://www.dynamicdrive.com/dynamicindex17/notifier.htm


I got this new and very usefull script working fine, but there is one question left.

How to center the panel since I set the width 80%? I tried e.g. 'position: center;' or 'center: 0;' ,but that does not work.
Below the part of the script, as I think it matters.

.notify{ /* main notifier container */
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-perspective: 1500px;
-webkit-perspective-origin: 50% 100%;
perspective: 1500px;
perspective-origin: 50% 100%;
width: 100%; /* width of notifier container */
height: 230px; /* height of notifier container */
position: absolute;
top: 0;
left: 0;
background: rgba(0,0,0,.8);
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
-webkit-transition: all .5s ease-in;
transition: all .5s ease-in;
visibility: hidden;
}

Thank you, Alice in Wonderland

[traq]

Normally, the correct way to center a block element is with margin: 0 auto. However, in this case, you'll need to position it manually since it is absolutely positioned:

    width: 80%;
    left: 10%;  /* (100% - width) / 2 */

You could also leave the width off, and set both left and right instead:

    left: 10%;
    right: 10%;

[Liza Z]

Nice, it works! Thank you!

[traq]

You're very welcome.

If your question has been answered, please mark your thread "resolved":

• On your original post (post #1), click [edit], then click [go advanced].
• In the "thread prefix" box, select "Resolved".
• Click [save changes].