Расположение крестика

Тема в разделе "Верстка", создана пользователем casinolot, 28 сен 2012.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Статус темы:
Закрыта.
Модераторы: ultra
  1. casinolot

    casinolot

    Регистр.:
    22 окт 2010
    Сообщения:
    548
    Симпатии:
    84
    Добрый день
    Рисую галерею
    <ul>
    <li><p><img></p><li>
    <li><p><img></p><li>
    <li><p><img></p><li>
    </ul>

    к li применяю max-width, max-heigth.

    нужно вставить блок с крестиком чтобы он был вверху и справа картинки, что посоветуете
     
    lilit нравится это.
  2. Delfi

    Delfi Создатель

    Регистр.:
    16 июн 2011
    Сообщения:
    44
    Симпатии:
    11
    Хотелось бы видеть схематическое объяснение задачи.

    Крестик является функциональным? Только он или вся картинка?
    Можно воспользоваться псевдоклассом after

    ul li img {
    position: relative;
    }

    ul li img:after {
    position: absolute;
    right: 2px;
    top: 2px;
    display: block;
    content: 'x'
    }

    Вместо content: 'x', можно сделать content: ' ' и поставить бэкграунд крестика, не забыв тогда указать размер блока с помощью width и height

    Если все же крестик - это отдельная кнопка, то тут решения два
    1. либо делать такую структуру <li><p><img><span class="cross"></span></p></li>, что не совсем "семантично", да и с навешиванием событий будут бОльшие затраты, чем на один элемент.
    2. с помощью js написать небольшой скриптик, который просчитывает положение и размещает крестик на нужное положение.
     
    lilit нравится это.
  3. sarhov

    sarhov Создатель

    Заблокирован
    Регистр.:
    25 окт 2011
    Сообщения:
    12
    Симпатии:
    4
    я так понимаю это крест для чего то нужен ::after не пригоден в этом случае, и по принципу как описал Псевдоним, можно просто лишний <a>, <span> или <div> поставить..примерно так http://jsfiddle.net/WGPhG/36/
     
    lilit нравится это.
Статус темы:
Закрыта.