Дизайн сайтов Евгения Бахвалова

Сделано проектов 80

Простая фотогалерея на div-ах

28 Июнь 2008


Hello, world!

Открываю, наконец, собственный блоГ, а не какой-нибудь буржуйский ЖЖ. Перед вами сайтик, созданный за полдня, 12 часов 50 минут. Основное время при этом ушло на превьюшки для веб-дизайнов, рисунок сайта, верстка же xhtml заняла от силы минут 40. Хвала дивам. И вордпрессу тожу за простоту.

Единственное — не нашлось быстро плагина фотогалереи к вордпрессу :(, что для портфолио необходимо. Поэтому попробовала создать минимумом дивов простой стандарт галереи так, чтобы, ествественно, новые изображения помещались в начало галереи, а не в конец, как пришлось бы сделать при ручной верстке таблицами.

Код такой:

<style>
#gallery {width:100%; float:left; }
#gallery div {float:left; padding: 5px; width: 270px; height: 250px; } */Нужная ширина, высота ячейки с картинкой и текстом под ней, можно в процентах
#gallery img {width: 240px; height: 200px; } */Нужная ширина, высота превьюшек, если нужно сделать их одинаковыми
</style>
<div id=»gallery»>
<div><a href=»имя картинки.jpg» target=»_blank»><img src=»имя картинки.jpg» alt=»" /></a> <br /> Подпись к картинке </div>
<div><a href=»имя картинки.jpg» target=»_blank»><img src=»имя картинки.jpg» alt=»" /></a> <br /> Подпись к картинке </div>
<div><a href=»имя картинки.jpg» target=»_blank»><img src=»имя картинки.jpg» alt=»" /></a> <br /> Подпись к картинке </div>
</div>

Вот и все. Достоинства такого решения простые:

1) мало кода,

2) картинки с подписями добавляются вверху без разрушения всей структуры;

3) при сужении экрана картинки выстраиваются в соотвествии с шириной этого экрана, что мне и требовалось.

Наверх



Комментарии на “Простая фотогалерея на div-ах”

  1. Павел пишет:

    Увлекательно. Подпишусь на РСС. А сколько времени ушло на написание статьи?

  2. enyamur пишет:

    Павел, в отличие от создания сайтика, просто секунды)))))).

  3. Иван пишет:

    Я так понимаю, в самом последнем абзаце как раз таки вся соль и изложена ;)

  4. Filin пишет:

    Интересно, а комментарии которые не нравятся автору здесь стирают? :)

  5. enyamur пишет:

    Нет, Filin, а что — были прецеденты?

Оставить комментарий

Создание web-сайтов
Дизайн сайтов
Евгения Беарт
web-дизайнер, разработчик