GD Star Rating
loading...
loading...
Идёт img, img, img, img, div, img, img.
Хочу, чтобы div располагался над предыдущим img, причём его центр совпадал с центром этого img.
Идёт img, img, img, img, div, img, img.
Хочу, чтобы div располагался над предыдущим img, причём его центр совпадал с центром этого img.
Появление дива при наведении мышки на иконку сделал через сиблинг-селекторы.
Но как вытащить ширину иконки? Или вообще центрировать?
Конечно, можно сделать через дополнительные обёртывающие дивы или ещё как-то подобным образом, а то и вообще динамически задавать 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