За последние 24 часа нас посетили 20007 программистов и 1694 робота. Сейчас ищут 1690 программистов ...

Ссылка вокруг картинки

Тема в разделе "HTML и CSS", создана пользователем Валерия, 9 апр 2009.

  1. Валерия

    Валерия Активный пользователь

    С нами с:
    14 ноя 2007
    Сообщения:
    50
    Симпатии:
    0
    В общем, получилась такая штука: при использовании конструкции типа
    HTML:
    1. <div class="icoset"><a href="#"><img src="/media/ico/do.jpg" alt="" class="ico"></a>[...картинки с ссылкой повторяются несколько раз]</div>
    ссылка отваливается от картинки, вместо того, чтобы совпадать с ней, и появляется под картинкой на некотором расстоянии, или же под картинкой, но по высоте с картинкой не совпадает.
    [css]div.icoset{
    width: 90%;
    display: block;
    height: auto;
    text-align: center;
    }
    img.ico{
    margin: 30px;
    padding: 10px;
    border: 4px double #fff;
    background: #000;
    }[/css]

    Ну и еще вопрос в эту же тему, почему картинки из дива иногда выпадают ? Если можно, ссылку, где толково описано поведение элементов при display: block и float.
     
  2. S.t.A.M.

    S.t.A.M. Активный пользователь

    С нами с:
    10 сен 2007
    Сообщения:
    1.041
    Симпатии:
    0
    Не совсем понятно, что Вы имеете ввиду...
    Мне кажется что речь об этом:
     
  3. Валерия

    Валерия Активный пользователь

    С нами с:
    14 ноя 2007
    Сообщения:
    50
    Симпатии:
    0
    Ну вообще-то нет. Вот поэтому:
    Сейчас скрин сделаю и выложу.
    http://13xx.ru/files/7394_pic.jpg Скриншот из оперы, со включеным стилем контур. Пунктир вокруг картинки - контур картинки с падингом. Жирная красная черта внизу обводит невидимую ссылку. Ссылка дублирует ссылку на картинке. Т.е. получается 2 зоны на 1 ссылку.
     
  4. Валерия

    Валерия Активный пользователь

    С нами с:
    14 ноя 2007
    Сообщения:
    50
    Симпатии:
    0
    В принципе, меня устроил вариант
    [css]
    div.icoset{
    border: 1px solid red;
    clear: both;
    }
    div.icoset a{
    margin: 30px;
    border: 0px solid #00ff00;
    display: block;
    width: 150px;
    float: left;
    height: auto;
    padding: 0;
    }
    div.icoset a img.ico{
    padding: 5px;
    border: 4px double #fff;
    background: #000;
    }[/css]
    Нормально ли будет оставить так ?