GD Star Rating
loading...
loading...
Идёт img, img, img, img, div, img, img.
Хочу, чтобы div располагался над предыдущим img, причём его центр совпадал с центром этого img.
23 Responses to Центрирование резинового div’а по горизонтали относительно ниже расположенного img
Добавить комментарий Отменить ответ
Новости IT
- В 2015 году Kodak планируют запустить собственную линейку смартфонов на базе Android
- Xiaomi стали третьим крупнейшим производителем смартфонов в мире
- Во время конференции Google I/O поисковой гигант может продемонстрировать приставку Android TV
- Intel не выпустят процессоры следующего поколения Broadwell до начала 2015 года
- Google хотят унифицировать дизайн мобильных приложений с помощью новой программы “Quantum Paper”
- 18 июня Amazon могут представить свой первый 3D смартфон
- Transcend анонсировали дополнительные карты памяти JetDrive Lite для MacBook Air и Retina MacBook Pro
- Samsung считают, что судебные иски Apple должны быть нацелены не на их компанию, а на Google
- Epson представили второе поколение своих умных очков на базе ОС Android – Moverio BT-200
- Lenovo выпустили свои первые 279-долларовые Chromebook, ориентированные на потребительский рынок
Последние опубликованные
- Насколько реально вернуть домен уведенный сквоттером?
- Как у Вас дела обстоят с документацией, её структурированием и хранением?
- Градации web-разработчика в Украине,
- строки по baseline
- новая или вторая видеокарта ?
- psd макет для wordpress
- Помогите с SSL
- Как мне постить с приложения в Действия?
- сколько может стоить подобный ?
- Online консультант
- трехмерная модель челюсти
- box-shadow и Opera
- Request limit exceeded (64), referer:
- Парни, а чем вы вдски админите?
- Выбор роутера
Последние прочитанные
Появление дива при наведении мышки на иконку сделал через сиблинг-селекторы.
Но как вытащить ширину иконки? Или вообще центрировать?
Конечно, можно сделать через дополнительные обёртывающие дивы или ещё как-то подобным образом, а то и вообще динамически задавать margin-left через js, но… хочется в css.
Зачем тебе ширина иконки? К всплывашке пишешь left: 50% и отрицательный margin-left, равный половине ширины всплывашки. Если у тебя все ширины не более трёх цифр по одной стороне, то ширину всплывашки можно зафиксировать без особых потерь.
А вообще не понял почему у тебя на одном уровне идут иконки и всплывашка. Логичнее сделать обёртку в relative, в неё иконку и всплывашку. Про позиционирование в таком случае выше написал.
Можно вообще всплывашку в самый конец кода, при клике на иконку через js позиционируем с помощью top/left от body.
left 50%!!!!!!! Блять, я тупой 🙂
А ширина всплывашки мне неизвестна.
на одном уровне, чтобы поменьше элементов было. Я предпочитаю красивый и сложный цсс, чем куча непонятных обёрток 🙂
Понятно, что через обёртку можно, и через js. Сейчас через js сделано. Хочется максимально простой хтмл.
На самом деле есть ещё вариант не центрировать, а выравнивать по левому краю иконки. Тогда margin-left будет совершенно банальным: -32px;
но уже хочется вообще принципиально узнать – возможно ли центрировать или нет.
Какой смысл делать меньше элементов, приобретая больше геморроя? Отвыкай.
left: 50% или -50% берут ширину родительской плашки с кнопками, и не работают.
Ширину плашки зафиксировать нельзя, так как, например, в разных браузерах и шрифтах она разная получается.
Даже если фиксировать в “em”, то потом всё равно надо половину ширины картинки (16px) прибавлять. Разве css умеет складывать ширины, выраженные в em и px?
Попахивает маразмом, но можно и так. Красненькая рамкой я показал для чего нужен popup-wrap, так яснее видно как это работает.
Да, добавь в пару лишних букв в одну из строк с размером и обнови. Центровка останется без изменения CSS.
Моё решение корректно, если обернуть плашку и иконку, см. комментарий ниже. Само собой, в твоём варианте это не сработает. Если уж ты хочешь фанатично оставить свою структуру кода, то не ломай голову и воткни туда яваскрпт.
Кстати, делать иконки картинками на твоём скрине — моветон.
оборачиваешь всплывашку в невидимый див с фиксированной достаточно большой шириной. Говоришь этому диву что он лефт -50%, как выше писали и что у него внутри все по центру должно быть, профит!
ну понятно, то есть без обёртки никак
это не геморрой, если знать решение на предыдущем опыте 🙂
а как лучше? дивами с бэкграундом?
ну то есть по-любому с обёрткой 🙂
Понятно. С обёрткой решение очевидное, как и с js.
Я хотел именно сиблинг-селекторы использовать или что-то типа.
Меня интересует именно техническая мощь css для вот таких извращений.
Вырезаешь иконочки, пихаешь их в один спрайт. Потом вставляешь в html как тебе удобно (ссылками, например). К каждой ссылке добавляешь класс, который её идентифицирует как конкретную иконку. В CSS прописываешь каждой ссылке background-image с твоим спрайтом, позиционируешь спрайт для каждой отдельной ссылки через background-position. Профит, меньше запросов на сервер..wrap a {width: 24px; height: 24px; display: inline-block; background-image: url(sprite.png);}.wrap a.first {background-position: 0px 0px;}.wrap a.second {background-position: 0px -24px;}
…
К тому же, при таком подходе, у тебя все иконки являются элементами, в которые можно что-то ещё написать. Вот тебе и одна обёртка уже сама собой появилась.
а, как в jquery ui 🙂 понял.
Да, можно подумать над этим.
зачем жквери? все на чистом css отлично работает
в jquery ui именно описанным способом реализованы иконки для кнопок. На чистом css