Нонче тут

Сейчас 21 гостей онлайн

Поиск

Поиск от Nigma

2


Поиск от Яндекс

Счётчики

Яндекс.Метрика

Проверка тиц

ВКонтакте

Я собираюсь взять за основу галерею изображений Hoverbox и слегка её заузить... Загрузите архив с галереей и найдите файл hoverbox.css. (файл с хаком для IE не трогаем)
Отредактированная версия CSS для галереи изображений
Code
*
{
  border: 0;
  margin: 0;
  padding: 0;
}

/* Базовое оформление HTML, не принципиально важно
----------------------------------------------------------------------*/

a
{
  text-decoration: none;
}

body
{
  background: #fff;
  color: #777;
  padding: 50px;
}

#page {
  position: relative;
}

#images {
  float: left;
  width: 400px;
}

#details {
  color: #000;
}

h1
{
  background: inherit;
  border-bottom: 1px dashed #ccc;
  color: #933;
  font: 17px Georgia, serif;
  margin: 0 0 10px;
  padding: 0 0 5px;
  text-align: center;
}

#footer
{
  clear: both;
  font: 10px Verdana, sans-serif;
  padding: 10px 0;
  text-align: center;
}

p a
{
  background: inherit;
  color: #777;
}

p a:hover
{
  background: inherit;
  color: #000;
}

/* Код Hoverbox
----------------------------------------------------------------------*/

.hoverbox
{
  width: 375px;
  cursor: default;
  list-style: none;
}

.hoverbox a
{
  cursor: default;
}

.hoverbox a .preview
{
  display: none;
}

.hoverbox a:hover .preview
{
  display: block;
  position: absolute;
  top: -33px;
  left: -45px;
  z-index: 1;
}

.hoverbox img
{
  background: #fff;
  border-color: #aaa #ccc #ddd #bbb;
  border-style: solid;
  border-width: 1px;
  color: inherit;
  padding: 2px;
  vertical-align: top;
  width: 100px;
  height: 75px;
}

.hoverbox li
{
  background: #eee;
  border-color: #ddd #bbb #aaa #ccc;
  border-style: solid;
  border-width: 1px;
  color: inherit;
  display: inline;
  float: left;
  margin: 3px;
  padding: 5px;
  position: relative;
}

.hoverbox .preview
{
  border-color: #000;
  width: 200px;
  height: 150px;
}


Отредактированное HTML-содержимое страницы галереи изображений
Code
  

<!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="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Hoverbox Image Gallery<title>
<link rel="stylesheet" href='css/hoverbox.css' type="text/css"  
  media="screen, projection" />

   
</head>
<body>
<h1>Hoverbox Image Gallery</h1>

<div id="page">

<div id="images">
<ul class="hoverbox">
<li>
<img src="/img/photo01.jpg" alt="description" /><img src="/img/photo01.jpg"  
  alt="description" class="preview" />
</li>
<li>
<img src="/img/photo02.jpg" alt="description" /><img src="/img/photo02.jpg"  
  alt="description" class="preview" />
</li>
<li>
<img src="/img/photo03.jpg" alt="description" /><img src="/img/photo03.jpg"  
  alt="description" class="preview" />
</li>
<li>
<img src="/img/photo04.jpg" alt="description" /><img src="/img/photo04.jpg"  
  alt="description" class="preview" />
</li>
<li>
<img src="/img/photo05.jpg" alt="description" /><img src="/img/photo05.jpg"  
  alt="description" class="preview" />
</li>
<li>
<img src="/img/photo06.jpg" alt="description" /><img src="/img/photo06.jpg"  
  alt="description" class="preview" />
</li>
<li>
<img src="/img/photo07.jpg" alt="description" /><img src="/img/photo07.jpg"  
  alt="description" class="preview" />
</li>
<li>
<img src="/img/photo08.jpg" alt="description" /><img src="/img/photo08.jpg"  
  alt="description" class="preview" />
</li>
<li>
<img src="/img/photo09.jpg" alt="description" /><img src="/img/photo09.jpg"  
  alt="description" class="preview" />
</li>
<li>
<img src="/img/photo10.jpg" alt="description" /><img src="/img/photo10.jpg"  
  alt="description" class="preview" />
</li>
<li>
<img src="/img/photo11.jpg" alt="description" /><img src="/img/photo11.jpg"  
  alt="description" class="preview" />
</li>
<li>
<img src="/img/photo12.jpg" alt="description" /><img src="/img/photo12.jpg"  
  alt="description" class="preview" />
</li>
<li>
<img src="/img/photo13.jpg" alt="description" /><img src="/img/photo13.jpg"  
  alt="description" class="preview" />
</li>
<li>
<img src="/img/photo14.jpg" alt="description" /><img src="/img/photo14.jpg"  
  alt="description" class="preview" />
</li>
<li>
<img src="/img/photo15.jpg" alt="description" /><img src="/img/photo15.jpg"  
  alt="description" class="preview" />
</li>
<li>
<img src="/img/photo16.jpg" alt="description" /><img src="/img/photo16.jpg"  
  alt="description" class="preview" />
</li>
<li>
<img src="/img/photo17.jpg" alt="description" /><img src="/img/photo17.jpg"  
  alt="description" class="preview" />
</li>
<li>
<img src="/img/photo18.jpg" alt="description" /><img src="/img/photo18.jpg"  
  alt="description" class="preview" />
</li>
<li>
<img src="/img/photo19.jpg" alt="description" /><img src="/img/photo19.jpg"  
  alt="description" class="preview" />
</li>
<li>
<img src="/img/photo20.jpg" alt="description" /><img src="/img/photo20.jpg"  
  alt="description" class="preview" />
</li>
</ul>
</div>
<br id="footer">
<p> <a href="/http://validator.w3.org/check/referer">XHTML</a>  
<a href="/http://jigsaw.w3.org/css-validator/check/referer">CSS</a>  
<a href="/http://www.contentquality.com/mynewtester/cynthia.exe?
Url1=http://host.sonspring.com/hoverbox/">508</a>
  | Hoverbox by <a href="/http://sonspring.com/">Nathan Smith</a>. |  
Read the <a href="/http://sonspring.com/journal/hoverbox-image-gallery">Tutorial</a>
.</p>
</div>

</body>
</html>


получаем

Уважаемые гости сайта! Теперь Вы можете ознакомиться с новостями сайта в социальных сетях.
Новости сайта публикуются в Facebook, ВКонтакте, Blogspot и Мой мир и Twitter .
Что бы перейти к аккаунтам просто кликните на иконках социальных сетей.