GD Star Rating
loading...

 

Идёт img, img, img, img, div, img, img.
Хочу, чтобы div располагался над предыдущим img, причём его центр совпадал с центром этого img.

Tagged with →  

23 Responses to Центрирование резинового div’а по горизонтали относительно ниже расположенного img

  1. AmtSport:

    Появление дива при наведении мышки на иконку сделал через сиблинг-селекторы.
    Но как вытащить ширину иконки? Или вообще центрировать?
    Конечно, можно сделать через дополнительные обёртывающие дивы или ещё как-то подобным образом, а то и вообще динамически задавать margin-left через js, но… хочется в css.

    размер 340x257, 41.28 kb

  2. RScSport:

    Зачем тебе ширина иконки? К всплывашке пишешь left: 50% и отрицательный margin-left, равный половине ширины всплывашки. Если у тебя все ширины не более трёх цифр по одной стороне, то ширину всплывашки можно зафиксировать без особых потерь.

  3. RScSport:

    А вообще не понял почему у тебя на одном уровне идут иконки и всплывашка. Логичнее сделать обёртку в relative, в неё иконку и всплывашку. Про позиционирование в таком случае выше написал.

    Можно вообще всплывашку в самый конец кода, при клике на иконку через js позиционируем с помощью top/left от body.

  4. AmtSport:

    left 50%!!!!!!! Блять, я тупой 🙂
    А ширина всплывашки мне неизвестна.

  5. AmtSport:

    на одном уровне, чтобы поменьше элементов было. Я предпочитаю красивый и сложный цсс, чем куча непонятных обёрток 🙂
    Понятно, что через обёртку можно, и через js. Сейчас через js сделано. Хочется максимально простой хтмл.

  6. AmtSport:

    На самом деле есть ещё вариант не центрировать, а выравнивать по левому краю иконки. Тогда margin-left будет совершенно банальным: -32px;

  7. AmtSport:

    но уже хочется вообще принципиально узнать – возможно ли центрировать или нет.

  8. RScSport:

    Какой смысл делать меньше элементов, приобретая больше геморроя? Отвыкай.

  9. AmtSport:

    left: 50% или -50% берут ширину родительской плашки с кнопками, и не работают.

    Ширину плашки зафиксировать нельзя, так как, например, в разных браузерах и шрифтах она разная получается.
    Даже если фиксировать в “em”, то потом всё равно надо половину ширины картинки (16px) прибавлять. Разве css умеет складывать ширины, выраженные в em и px?

  10. RScSport:

    http://jsfiddle.net/Ss4q2/
    Попахивает маразмом, но можно и так. Красненькая рамкой я показал для чего нужен popup-wrap, так яснее видно как это работает.

  11. RScSport:

    Да, добавь в пару лишних букв в одну из строк с размером и обнови. Центровка останется без изменения CSS.

  12. RScSport:

    Моё решение корректно, если обернуть плашку и иконку, см. комментарий ниже. Само собой, в твоём варианте это не сработает. Если уж ты хочешь фанатично оставить свою структуру кода, то не ломай голову и воткни туда яваскрпт.

  13. RScSport:

    Кстати, делать иконки картинками на твоём скрине — моветон.

  14. Lamam:

    оборачиваешь всплывашку в невидимый див с фиксированной достаточно большой шириной. Говоришь этому диву что он лефт -50%, как выше писали и что у него внутри все по центру должно быть, профит!

  15. AmtSport:

    ну понятно, то есть без обёртки никак

  16. AmtSport:

    это не геморрой, если знать решение на предыдущем опыте 🙂

  17. AmtSport:

    а как лучше? дивами с бэкграундом?

  18. AmtSport:

    ну то есть по-любому с обёрткой 🙂
    Понятно. С обёрткой решение очевидное, как и с js.
    Я хотел именно сиблинг-селекторы использовать или что-то типа.
    Меня интересует именно техническая мощь css для вот таких извращений.

  19. RScSport:

    Вырезаешь иконочки, пихаешь их в один спрайт. Потом вставляешь в 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;}

  20. RScSport:

    К тому же, при таком подходе, у тебя все иконки являются элементами, в которые можно что-то ещё написать. Вот тебе и одна обёртка уже сама собой появилась.

  21. AmtSport:

    а, как в jquery ui 🙂 понял.
    Да, можно подумать над этим.

  22. Drablack:

    зачем жквери? все на чистом css отлично работает

  23. AmtSport:

    в jquery ui именно описанным способом реализованы иконки для кнопок. На чистом css

Добавить комментарий