Здравствуйте, прошу помощи в доработке кода. Нашла красивую галерею ПРИМЕР Она мне очень нужна, так как приходится обходиться этим. Мне нужно, чтобы слева можно было добавлять бесконечное число фото. Я думаю, что это можно осуществить с помощью контейнера со скроллингом. Мои эксперименты с <div class="scroll"> не увенчались успехом Помогите, пожалуйста!
Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Фотогалерея с помощью CSS</title> <style type="text/css"> body{ margin:0; padding:50px; text-align:center; font-family:Arial, Helvetica, sans-serif; color:#FFF; background:#000; } a img{border:none;} #gallery1{ width:663px; height:400px; overflow:hidden; position:relative; z-index:1; margin:0 auto 100px auto; } #tabs1{ list-style:none; padding:0; margin:0; width:130px; height:400px; float:left; } #tabs1 li{ padding:0; margin:0; float:left; } #tabs1 li a img{ display:block; width:120px; height:90px; } #tabs1 li a{ display:block; border:5px solid #999; width:120px; height:90px; } #tabs1 li a:hover{border:5px solid #fff;} #tabs1 li a img.fullPic, #gallery1 div{ position:absolute; z-index:1; left:130px; top:0; width:533px; height:400px; } #tabs1 li a:hover img.fullPic{z-index:3;} #gallery1 div{ z-index:2; background:#242424; } </style> </head> <body> <h1>Галерея №1. Переключение картинок на hover.<br /> Почему-то не работает в ие6 =(</h1> <div id="gallery1"> <ul id="tabs1"> <li><a href="#"><img src="images/pic1s.jpg" alt="" /><img src="images/pic1.jpg" class="fullPic" alt="" /></a></li> <li><a href="#"><img src="images/pic2s.jpg" alt="" /><img src="images/pic2.jpg" class="fullPic" alt="" /></a></li> <li><a href="#"><img src="images/pic3s.jpg" alt="" /><img src="images/pic3.jpg" class="fullPic" alt="" /></a></li> <li><a href="#"><img src="images/pic4s.jpg" alt="" /><img src="images/pic4.jpg" class="fullPic" alt="" /></a></li> </ul> <div></div> </div> </body> </html>
Теги: заказ скриптов
Отредактировано Slavna (2012-09-14 05:43:16)