Obrázková plovoucí galerie

Podívejme se na výsledek v prohlížeči.

Obal (#wrapper) i galerie (.gallery) mají nastavenou šířku v procentech. Šířka galerie se tak přizpůsobuje šířce okna prohlížeče – v našem případě zaujímá vždy 70 %. Nemusíme tedy používat horizontální posuvník (krom extrémně malé šířky okna, kdy je okno prohlížeče užší než šířka jednoho obrázku). Zkuste měnit šířku okna prohlížeče, abyste viděli, jak se galerie chová.

CSS

html {height: 100%; font-size: 62.5%;}

body {
   height: 100%;
   text-align: center;
   font: 1.2em Verdana, Arial, Helvetica, sans-serif;
   margin: 0; padding: 0;
   }

.cleaner {
   clear: both;
   height: 0;
   font-size: 0;
   visibility: hidden;
   }

a:link, a:visited {color: #245893;}
a:hover {text-decoration: none;}


#wrapper {
   width: 70%;
   margin: 50px auto 0 auto;
   text-align: left;
   }


/* =============== Galerie =============== */
.gallery {
   width: 100%;
   padding: 10px 0;
   margin: 0 auto;
   }

.gallery .photo {
   float: left;
   width: 210px;
   margin: 0 0 16px 5px;
   display: inline; /* display: inline; opravuje Double Margin Float Bug v IE 6 a nižších verzích */
}

.gallery .photo img {display: block; margin: 10px auto 0 auto; text-align: center;}
.gallery .photo p {margin: 6px 0 10px 15px;}

.gallery .photo a img {border: 3px solid #AAA;}
.gallery .photo a:hover img {border: 3px solid #707070;}

Třídě .gallery je nutné explicitně nastavit šířku. Pokud bychom chtěli galerii nastavit barevné pozadí a šířky by nebyla definována, dělalo by to neplechu v IE. Explicitně je třeba také definovat i a:hover (můžeme mu nastavit libovolnou vlastnost), jinak nám v IE 6 a nižší verzi nebude nefungovat změna barvy rámečku při najetí na obrázek myší (.gallery .photo a:hover img).

XHTML

<div id="wrapper">

   <div class="gallery">
      <div class="photo">
         <a href="#"><img src="image.jpg" alt="" width="180" height="120" /></a>
         <p><a href="#">Foto 1</a></p>
      </div>

      <div class="photo">
         <a href="#"><img src="image.jpg" alt="" width="180" height="120" /></a>
         <p><a href="#">Foto 2</a></p>
      </div>

      <div class="photo">
         <a href="#"><img src="image.jpg" alt="" width="180" height="120" /></a>
         <p><a href="#">Foto 3</a></p>
      </div>
<!-- ============================================================== -->

      <div class="photo">
         <a href="#"><img src="image.jpg" alt="" width="180" height="120" /></a>
         <p><a href="#">Foto 4</a></p>
      </div>

      <div class="photo">
         <a href="#"><img src="image.jpg" alt="" width="180" height="120" /></a>
         <p><a href="#">Foto 5</a></p>
      </div>

      <div class="photo">
         <a href="#"><img src="image.jpg" alt="" width="180" height="120" /></a>
         <p><a href="#">Foto 6</a></p>
      </div>
<!-- ============================================================== -->

   <div class="cleaner">&nbsp;</div>
   </div>

</div>

Testováno v prohlížečích IE 5.5+, Firefox, Opera, Safari, Google Chrome.


Stáhnout uvedené řešení ↓ (ZIP, staženo 4827×)

TOPlist
Další layouty