VPF::Эмуляция cellspacing для галереии - Форум программистов

KonstRuctor

Дата 20.10.2009, 10:29 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 245
Регистрация: 31.3.2006
Где: Россия, Санкт-Пет ербург

Репутация: нет
Всего: нет

Привет!
Идея сделать красивую галерею стара как сам 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 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 485
Регистрация: 2.10.2006
Где: Россия, г. Бироби джан ЕАО

Репутация: 3
Всего: 5

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

--------------------

youri

Дата 21.10.2009, 01:41 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 740
Регистрация: 17.4.2004

Репутация: 5
Всего: 16

http://www.google.com.ua/search?client=ope...-8&oe=utf-8
или div'ами переделать

--------------------

С кем разговаривает Microsoft

FortMax

Дата 21.10.2009, 02:22 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 485
Регистрация: 2.10.2006
Где: Россия, г. Бироби джан ЕАО

Репутация: 3
Всего: 5

youri, тут сказано, то IE такое не поддерживает !?

--------------------

youri

Дата 21.10.2009, 03:08 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 740
Регистрация: 17.4.2004

Репутация: 5
Всего: 16

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

--------------------

С кем разговаривает Microsoft

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »