1. Набираем команду codeby webinar. Набираем команду для организации и проведения вебинаров. Подробнее ...

    Скрыть объявление
  2. Требуются разработчики и тестеры для проекта codebyOS. Требования для участия в проекте: Знание принципов работы ОС на базе Linux; Знание Bash; Крайне желательное знание CPP, Python, Lua; Навыки системного администрирования. Подробнее ...

    Скрыть объявление
  3. Получи 30.000 рублей. Для получения денег необходимо принять участие в конкурсе авторов codeby. С условиями и призами можно ознакомиться на этой странице ...

    Внимание! Регистрация авторов на конкурс закрыта.

    Скрыть объявление

Вёрстка превьюшек

Тема в разделе "Web - программирование", создана пользователем pivkos, 27 июл 2009.

  1. pivkos

    pivkos Гость

    Репутация:
    0
    Здравствуйте!

    Верстаю свою галерейку, застопорился на выводе превьюшек.

    Вот код:
    Код:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <style type="text/css">
    #gallery .photo_div{ display: inline; }
    .photo_div { 
    width:82px;
    height:97px;
    margin-left:5px;margin-right:5px;margin-bottom:10px;
    border:1px solid #d8dcea; 
    text-align: center; font: verdana, arial, sans-serif;
    }
    .photo_div img {
    border: 5px solid #fff;
    border-width: 5px 5px 20px;
    }
    .photo_div a:hover img {
    border: 5px solid #3e3e3e;
    border-width: 5px 5px 20px;
    color: #fff;
    }
    .photo_div a:hover {
    color: #fff;
    }
    </style>	
    </head>
    <body>
    <div id="gallery">
    <div class="photo_div">
    <a href="g3314.jpg" title="Картинка">
    <img src="mini_g3314.jpg" width="72" height="72" alt="" />
    </a>
    </div>
    <div class="photo_div">
    <a href="g3314.jpg" title="Картинка">
    <img src="mini_g3314.jpg" width="72" height="72" alt="" />
    </a>
    </div>
    </div>	
    </body>
    </html>
    Вот тут можно посмотреть на страницу: пример

    В ИЕ(я тестировал на ИЕ6, других под рукой нет) выскакивает пара лишних пикселей, которые я никак не могу убрать.

    В ФФ рамочка целиком косячит, но если убрать #gallery .photo_div{ display: inline; }, то рамочка отображается так, как нужно, но превьюшки стоят вертикально, а нужно, чтобы они стояли горизонтально.

    Пожалуйста, подскажите, как исправить вёрстку и сделать, чтобы всё это красиво работало во всех браузерах?
    Заранее огромное спасибо!
     
  2. nws

    nws Гость

    Репутация:
    0
Загрузка...

Поделиться этой страницей