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].