margin auto и position absolute vs. width

Тема в разделе "Веб-дизайн", создана пользователем Albert22, 23 сен 2009.

Статус темы:
Закрыта.
Модераторы: zek24
  1. Albert22

    Albert22

    Регистр.:
    30 мар 2008
    Сообщения:
    270
    Симпатии:
    10
    Привет
    Делаю лайтбокс — всплывающий слой с диалоговым окном.
    Он закреплён position:fixed, и должен располагаться по центру.
    В идеале это достигается через margin: Npx auto;
    Но когда я указываю для блока ширину, он смещается в левый верхний угол.
    Когда width убираю становится по центру.
    Как его расширить и выровнять по центру одновременно?
    Можно конечно с помощью left:N%; но это бред, согласитесь.
     
  2. mdss

    mdss ♖♘♗♕♔♗♘♖

    Moderator
    Регистр.:
    20 фев 2007
    Сообщения:
    1.140
    Симпатии:
    671
    почему же бред если все станет ровно по центру пиксель в пиксель?
     
  3. Albert22

    Albert22

    Регистр.:
    30 мар 2008
    Сообщения:
    270
    Симпатии:
    10
    Вы про left:50%;?
     
  4. mdss

    mdss ♖♘♗♕♔♗♘♖

    Moderator
    Регистр.:
    20 фев 2007
    Сообщения:
    1.140
    Симпатии:
    671
    да, и сверху и снизу устанавливается
     
  5. Albert22

    Albert22

    Регистр.:
    30 мар 2008
    Сообщения:
    270
    Симпатии:
    10
    Само собой прежде чем делать я глянул как это реализовано у ВКонтакта
    Там было да, left:50%;
    Я поставил и... (см. вложение)
     

    Вложения:

  6. mdss

    mdss ♖♘♗♕♔♗♘♖

    Moderator
    Регистр.:
    20 фев 2007
    Сообщения:
    1.140
    Симпатии:
    671
    ну блин. Подумать тоже немножечко надо. 50% будет левый край. Чтобы получилось ровно по центру юзаем отрицательные поля ровно в половину ширины слоя. Т.е. у тебя получится
    PHP:
    position:fixed;
    top:50%;
    left:50%;
    margin:-100px 0 0 -200px
    }
    Вот и все
     
    Albert22 нравится это.
  7. Albert22

    Albert22

    Регистр.:
    30 мар 2008
    Сообщения:
    270
    Симпатии:
    10
    Слушай, таки да
    А я не допёр, не тот видать уже
    Спасибо!

    P.S. Всё таки интересно каким образом вконтакты без отрицательного маргина выровняли.
    Выдача «Показать стиль элемента»:
    Код:
    .popup_box_container (линия 1388)
    {
    position: absolute;
    left: 50%;
    z-index: 1002;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    }
    .message_box (линия 1396)
    {
    background-color: transparent;
    background-image: url(./../images/transpx2.png);
    background-repeat: repeat;
    background-attachment: scroll;
    background-position: 0pt 0pt;
    }
    Эт я не к тому чтобы ты искал, просто к слову...
     
  8. mdss

    mdss ♖♘♗♕♔♗♘♖

    Moderator
    Регистр.:
    20 фев 2007
    Сообщения:
    1.140
    Симпатии:
    671
    а где у них увеличение фото после клика? Возможно у них js юзается какой-нибудь
     
  9. Albert22

    Albert22

    Регистр.:
    30 мар 2008
    Сообщения:
    270
    Симпатии:
    10
    Не не, там в настройках->изменение имени, всплывающее уведомление о том что мол внесите залог. Я на нём экспериметировал.
     
  10. Slaviq

    Slaviq Создатель

    Регистр.:
    19 сен 2007
    Сообщения:
    37
    Симпатии:
    1
    а как быть с такой ситуацией
    <img src="srch-shin.png" border="0" align="left" alt="" width="50" height="50" style="margin:-15px -15px -15px 0px">
    поверх (картинка внутри) таблицы
    в Опере в мазиле все нормально, поверх таблицы картинка
    а в эксплорере - нифига! обрезает и все!
     
Статус темы:
Закрыта.