Results 1 to 4 of 4

Thread: Drop in notifier

  1. #1
    Join Date
    Dec 2013
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Drop in notifier

    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.



    Code:
    .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

  2. #2
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,643
    Thanks
    63
    Thanked 516 Times in 502 Posts
    Blog Entries
    5

    Default

    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:
    Code:
        width: 80%;
        left: 10%;  /* (100% - width) / 2 */
    You could also leave the width off, and set both left and right instead:
    Code:
        left: 10%;
        right: 10%;

  3. #3
    Join Date
    Dec 2013
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Nice, it works! Thank you!

  4. #4
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,643
    Thanks
    63
    Thanked 516 Times in 502 Posts
    Blog Entries
    5

    Default

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

Similar Threads

  1. Replies: 3
    Last Post: 10-22-2010, 05:04 PM
  2. Anylink drop down menu - Demo #3 (sub menus drop to the right of anchor):
    By pjdcreative in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 06-17-2010, 02:54 AM
  3. Replies: 1
    Last Post: 05-04-2009, 02:38 PM
  4. AnyLink JS Drop Down Menu-drop down positioning problem g
    By BobMinkin in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 03-27-2009, 02:47 PM
  5. Chrome Drop Down Menu Script - 2nd level drop downs?
    By mdbiker in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 10-27-2006, 02:44 PM

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
  •