Добрый день.
Помогите пожалуйста решить проблему. Есть главная страничка по адресу roof-store.su/.
На этой страничке большой слайдер, а у него белая овальная картинка, которая служит фоном для точек переключателей(посередине-внизу слайдера).
Во всех браузерах точки переключатели по центру этой картинки, а в опере и точки влево съехали и нижний контент постоянно дёргается. Код для этой картинки
#slider-image { position: absolute; top: 600px; left: 620px; z-index: 100; }
Как можно это решить?
Кромешный ад. Почитайте статью https://clubs.ya.ru/ui/replies.xml?item_no=159
В Chrome та же проблема, что и в Opera. Вот как чинится.
Вы бы лучше спросили у автора, зачем он в блок запихал картинку. А вы ему отвечаете, что эту картинку нужно центрировать. Остается только взяться за голову.
P.S. после этого останется выравнять буллеты (точки для переключения слайдов), т.к. они неправильно отцентрованы
[almac] большое спасибо!
Хотя в опере по прежнему контент дёргается. Я так понимаю это из-за обёртывания в div?
Чтобы не дергалось, надо убрать верхний отступ у заголовка:
В старых браузерах типа IE6 этот код не сработает, но в новых (и в IE8) все ок
P.S. на будущее — верстать лучше немного по другому: все должно быть просто и понятно, то есть минимальным количеством кода нужно обходиться. Для центровки применяется 3 способа:
1. text-align: center
2. margin: 0 auto
3. position: absolute/relative/fixed; left: 50%; margin-left: -50px (сдвигаем влево ровно наполовину от ширины блока, в данном случае за всю ширину блока возьмем 100px)
3ий способ — это костыль, который используется в крайних случаях
Абсолют там совершенно не причем.
Проблема на самом деле в том что изначально неправильно зделано и попытки напихать костылей тут не особо помогут, да можно застайлить, но суть в том что это можно было реализовать гораздо меньшим кодом, если интересует как, то постучись в личку объясню.
Вообще то чтобы абсолютное позиционирование сработало правильно, нужно чтобы родительский слой имел параметр:
В данно случае у тега
нужно добавить клас или прописать в атрибут style. И потом позиционировать как душе угодно.
убери вобще блок .slider-image
а бг повесь на .carousel-indicators
и падингами раздвинь
ну и заокругли css3
так и обертка белая на кнопках будет и тянуться он будет
+ у тебя там ширина не правильная на обртках самой галереи
Как раз в нём и проблема. Принципиально сдела через встроенную в Оперу проверку кода и придал хеадеру стиль
И вот эта овальная подложка для кружочков уехала ровно на 650 пикселей вправо, как и написано в стилях у автора.
Не знаю кто как изучал вёрстку, но элементарные вещи про абсолютное позиционирование нужно знать. Если не задать position:relative; у родительского блок, то отчёт позиции будет не от родительского блока, а от края рабочей области экрана, а не блока в котором находится слой который мы хотим спозиционировать.
Елементарные вещи я знаю, И фору дам в верстке любому.
суть в том чтобы зделать правильно, а не напихать костылей и пытаться застайлить.
это не смушает в css?
.row {
margin-left: -20px;
}
Абсолютно бесполезное св-во для галереи
особенно сразу после него идет это
[class*=»span»] {
float: left;
margin-left: 20px;
min-height: 1px;
}
на .carousel нету ширины ( а должна быть )
но есть специалисты котрые все фискят
position: relative;
( я знаю про то что как оно позиционируеться и относительно чего)
Да, background-image намного лучше решение. Всем спасибо. А про ширину если можно поподробнее.
Это не лучшее решение, потому что не кроссбраузерно:
https://caniuse.com/#search=background-image
Я имел ввиду просто background #FFF. Перепутал.
Сам блок я бы центрировал банально с помощью относительного позиционирования, если ширина фикса, то конкретными значениями в пикселях, если резина, то высчитал с помощью JS. Доты можно фиксировать сделав значения display:inlane каждому, а значения родителя text-align:center..