Добрый день.
Помогите пожалуйста решить проблему. Есть главная страничка по адресу roof-store.su/.
На этой страничке большой слайдер, а у него белая овальная картинка, которая служит фоном для точек переключателей(посередине-внизу слайдера).
Во всех браузерах точки переключатели по центру этой картинки, а в опере и точки влево съехали и нижний контент постоянно дёргается. Код для этой картинки

#slider-image {
position: absolute;
top: 600px;
left: 620px;
z-index: 100;
}

Как можно это решить?

Оценить:|
  
Комментировать
Раздел: Помощь    
Просмотров: 1675
Комментариев (17)
  1. kukushka
    02.10.2013 в 21:21

    Кромешный ад. Почитайте статью https://clubs.ya.ru/ui/replies.xml?item_no=159

  2. almac
    02.10.2013 в 21:22

    В Chrome та же проблема, что и в Opera. Вот как чинится.

    #slider-image {
    width: 1024px;
    text-align: center;
    position: absolute;
    top: 600px;
    left: auto;
    z-index: 100;
    }
    • kukushka
      02.10.2013 в 21:25

      Вы бы лучше спросили у автора, зачем он в блок запихал картинку. А вы ему отвечаете, что эту картинку нужно центрировать. Остается только взяться за голову.

    • almac
      02.10.2013 в 21:26

      P.S. после этого останется выравнять буллеты (точки для переключения слайдов), т.к. они неправильно отцентрованы

  3. Falcon
    02.10.2013 в 21:32

    [almac] большое спасибо!

  4. Falcon
    02.10.2013 в 21:35

    Хотя в опере по прежнему контент дёргается. Я так понимаю это из-за обёртывания в div?

    • almac
      02.10.2013 в 21:56

      Чтобы не дергалось, надо убрать верхний отступ у заголовка:

      #content > *:first-child {
          margin-top: 0;
      }

      В старых браузерах типа IE6 этот код не сработает, но в новых (и в IE8) все ок

      • almac
        02.10.2013 в 22:01

        P.S. на будущее — верстать лучше немного по другому: все должно быть просто и понятно, то есть минимальным количеством кода нужно обходиться. Для центровки применяется 3 способа:
        1. text-align: center
        2. margin: 0 auto
        3. position: absolute/relative/fixed; left: 50%; margin-left: -50px (сдвигаем влево ровно наполовину от ширины блока, в данном случае за всю ширину блока возьмем 100px)

        3ий способ — это костыль, который используется в крайних случаях

  5. Шимченко Александр [parazitexe]
    02.10.2013 в 21:40

    Абсолют там совершенно не причем.
    Проблема на самом деле в том что изначально неправильно зделано и попытки напихать костылей тут не особо помогут, да можно застайлить, но суть в том что это можно было реализовать гораздо меньшим кодом, если интересует как, то постучись в личку объясню.

  6. AlexNGerman
    AlexNGerman
    02.10.2013 в 21:43

    Вообще то чтобы абсолютное позиционирование сработало правильно, нужно чтобы родительский слой имел параметр:

    position:relative;

    В данно случае у тега

    нужно добавить клас или прописать в атрибут style. И потом позиционировать как душе угодно.

  7. Шимченко Александр [parazitexe]
    02.10.2013 в 21:48

    убери вобще блок .slider-image
    а бг повесь на .carousel-indicators
    и падингами раздвинь
    ну и заокругли css3
    так и обертка белая на кнопках будет и тянуться он будет
    + у тебя там ширина не правильная на обртках самой галереи

    • AlexNGerman
      AlexNGerman
      02.10.2013 в 22:14

      Как раз в нём и проблема. Принципиально сдела через встроенную в Оперу проверку кода и придал хеадеру стиль

      position:relative; 

      И вот эта овальная подложка для кружочков уехала ровно на 650 пикселей вправо, как и написано в стилях у автора.
      Не знаю кто как изучал вёрстку, но элементарные вещи про абсолютное позиционирование нужно знать. Если не задать position:relative; у родительского блок, то отчёт позиции будет не от родительского блока, а от края рабочей области экрана, а не блока в котором находится слой который мы хотим спозиционировать.

      • Шимченко Александр [parazitexe]
        02.10.2013 в 22:26

        Елементарные вещи я знаю, И фору дам в верстке любому.
        суть в том чтобы зделать правильно, а не напихать костылей и пытаться застайлить.
        это не смушает в css?
        .row {
        margin-left: -20px;
        }
        Абсолютно бесполезное св-во для галереи
        особенно сразу после него идет это
        [class*=»span»] {
        float: left;
        margin-left: 20px;
        min-height: 1px;
        }
        на .carousel нету ширины ( а должна быть )

        но есть специалисты котрые все фискят
        position: relative;

        ( я знаю про то что как оно позиционируеться и относительно чего)

        1056_Screenshot_1jpg

  8. Falcon
    02.10.2013 в 21:58

    Да, background-image намного лучше решение. Всем спасибо. А про ширину если можно поподробнее.

  9. Falcon
    02.10.2013 в 22:07

    Я имел ввиду просто background #FFF. Перепутал.

  10. dimka
    Dimka Klusevich [dimka]
    03.10.2013 в 08:54

    Сам блок я бы центрировал банально с помощью относительного позиционирования, если ширина фикса, то конкретными значениями в пикселях, если резина, то высчитал с помощью JS. Доты можно фиксировать сделав значения display:inlane каждому, а значения родителя text-align:center..

Оставить комментарий