Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Эмуляция cellspacing для галереии

Автор: KonstRuctor 20.10.2009, 10:29

Привет!
Идея сделать красивую галерею стара как сам html. Каждый решает задачу как может, используя разные хитрости и приемы. Сегодня я хочу попробовать реализовать мою задумку кроссбраузерно, на xhtml и css.
Что я хочу получить?
1) Три колонки с фотографиями, каждая фотография помещена в бокс.
2) Три бокса в ряду одинаковы по высоте, имеют градиент от черного к серому.
3) Внутри каждого бокса фота и текст выровнены по центру (гор. и верт.).
4) Резина при изменении окна браузера.
5) Между боксами 10px.
Задача элементарная: делаем таблицу, указываем cellspacing и необходимые атрибуты для <td>.
Но хотелось бы сделать верстку на css.
Вот мой код:

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru-RU">
<head>
    <title>Галерея</title>
</head>
<body>
<table class="floats">
<tr>
<td class="gal3">
         <p class="postdate">14  октября  2009</p>
         <p><img src="/gallery/tmb/PkJ20091014010909.jpg" alt="Яблочная тема" /></p>
         <p><strong>Яблочная тема</strong></p>
         <p>Автор</p>
</td>
<td class="gal3">
         <p class="postdate">10  октября  2009</p>
         <p><img src="/gallery/tmb/qji20091014010511.jpg" alt="Мостик" /></p>
         <p><strong>Мостик</strong></p>
         <p>Автор</p>
</td>
<td class="gal3">
         <p class="postdate">03  октября  2009</p>
         <p><img src="/gallery/tmb/CQJ20091004182404.jpg" alt="Название" /></p>
         <p><strong>Название</strong></p>
         <p>Автор</p>
</td>
</tr>
</table>
</body>
</html>

И стили

Код


.floats {
  width: 100%;
  margin: 0 auto;
   border: 1px solid #313232;
   border-spacing: 10px;
  border-collapse: separate;
}
.floats td{
  vertical-align: middle;
  padding: 5px;
  background-color: #222;
  background-image: url(/img/dark_polos.gif);
  background-position: top left;
  background-repeat: repeat-x;
  border: 1px solid #000;
}
.floats img { border: none; padding: 3px 0 3px 0; }
.floats td.gal3 { width:33%; }
.floats td p { text-align: center; margin: 0; padding: 0; color: #C6C7C8; }
.floats td p.fostdate { font-size: 0.8em; }

Где dark_polos.gif -- наш градиент.
В современных браузерах все выглядит красиво, но в IE6 и в IE8 в режиме совместимости красивые расстояния между боксами исчезают. Как добиться этой самой красоты везде, пока не знаю.
Какие у кого мысли?

Автор: FortMax 21.10.2009, 01:06

через стилевое свойство margin: для td smile

Автор: youri 21.10.2009, 01:41

http://www.google.com.ua/search?client=opera&rls=uk&q=ie+border-spacing&sourceid=opera&ie=utf-8&oe=utf-8
или div'ами переделать

Автор: FortMax 21.10.2009, 02:22

youri, http://www.htmlbook.ru/css/border-spacing.html сказано, то IE такое не поддерживает !?

Автор: youri 21.10.2009, 03:08

а ты возьми и погугли ;)