Dnevnik eklektika - Piše Dragan Babić

CSS gallery layout

Efekat tabele

Efektom tabele smatram sledeće: slike su centrirane na stranici (koliko god da ih je u redu), centrirane vertikalno u svojim “ćelijama”, tabele se veoma lako snalaze sa različitim dimanzijama slika, itd. Ono što sam ja do sada uspeo da uradim je da napravim nešto veoma slično za potrebe jednog projekta, ali naravno stvar nikako nije univerzalna i nije je moguće koristiti u svakom mogučem scenariju. (Mada vrlo lako uz malo prepravki.)

Postavka

Prvo i prvo, polazište je semantički korektan markup, dakle koristimo neuređenu listu za element koji će držati naše slike, jer galerija u suštini jeste lista slika. Znači odlučismo se za ul, sada da postavimo malo konstanti za našu galeriju.
Prva stvar koju sam ja znao da će da bude konstantna jesu dimenzije slika. Odabrao sam dimenzije 75×75. Druga stvar koju sam znao jeste da ću koristiti fluidan layout. Dakle nema govora o fiksnim širinama i pixel perfectionu—procenti brate. Znajući to, i koristeći neke od standardnih svojih metoda od ranije, uvek sam pravio kompromise, tipa na 1024×768 ću imati tri reda i tri kolone, a na 1280×1024 ću imati četiri kolone i tri reda, i ružnu marginu sa desne strane uzrokovanu floatovima. To mi je malo ružno bilo, i bacih se na posao. Krećemo.

Markup

Uzmimo za primer da imamo po četiri reda i četiri kolone u galeriji, dakle šesnaest fotografija. Za primer ću naravno koristiti jednu fotografiju ponovljenu šesnaest puta (u ovom slučaju Freddie iz Madballa, jbga, utisci od sinoć), takođe slike će biti linkovane do većih verzija, koje u ovom primeru ne postoje. Markup izgleda ovako:

<ul class="gallery">
  <li><a href="#" title="Klik za veću sliku"><img src="putanja/do/slike/freddie_c.jpg" width="75" height="75" alt="Freddie Cricien" /></a></li>
  <li><a href="#" title="Klik za veću sliku"><img src="putanja/do/slike/freddie_c.jpg" width="75" height="75" alt="Freddie Cricien" /></a></li>
  .
  .
  .
  Šesnaest puta ovo isto
</ul>

Prilično dosadno i repetitivno, ali vidite o čemu se radi.

CSS za galeriju

Cela fora ove galerije je u njenom CSS-u, ovo je moj omiljeni deo, pa hajde da krenemo.

.gallery{
  margin:0; padding:0;
  overflow:hidden; /* Clears the floats */
  width:100%; /* IE and older Opera fix for clearing, they need a dimension */
  list-style:none;
}
  .gallery li{
    float:left;
    width:23.5%; /* This is for IE, other browsers may use 24% */
    margin:0 1% 10px 0; padding:0;
    height:83px; /* Height of img (75) + 2x 3px padding + 2x 1px border = 83px */
    position:relative; /* This is the key */
  }
    .gallery a,
    .gallery img{
      display:block;
    }
    a img{ border:none; } /* A small fix */
    .gallery a:link,
    .gallery a:visited,
    .gallery a:focus,
    .gallery a:hover,
    .gallery a:active{
      padding:3px;
      background:#eeefef;
      width:75px; height:75px;
      border:1px solid #eeefef; /* We blend the border with the bg, as if it isn't there */
      position:absolute; top:50%; left:50%; 
      margin:-41px 0 0 -41px; /* Ooooh, now I get it, we centered it both vertically and horizontally using absolute positioning */
    }
    .gallery a:hover{
      border-color:#dfdfdf;
    }

Ok, to nam je CSS potreban za galeriju, sada možete pogledati i primer koji sam spremio, kao što vidite, source je kompletno iskomentarisan da bi se lakđe snašli u svemu, iako je stvar prilično jednostavna, osim dela sa apsolutnim pozicioniranjem. U suštni uzeli smo element i dali mu position:relative;, pretpostavljate, to je li element. To smo uradili da bismo unutar njega mogli da pozicioniramo apsolutno njegove elemente potomke. Trik sa negativnim marginama je takođe već poznat, apsolutno pozicioniramo element (naš a koji drži sliku) tako da mu gornji levi ćošak bude u centru “kontejner” elementa (li u ovom slučaju), kasnije ga negativnim marginama “izvučemo” na željenu poziciju, a vrednosti negativnih margina su polovine dimenzija samog apsolutno pozicioniranog elementa. Nadam se da shvatate, veoma je jednostavno ali zamršeno. Dakle da ne dužim, pogledajte primer pa pitajte ako nešto ne radi ili nije jasno.

• « EXIT06 majice
• Alt tekst na slikama »

Komentari na ovaj unos 1

1. maratz kaže 11/08/06 11:18 PM

   Uf, ovo je staro mjesec dana, ali je dobro! Često koristim sličnu metodu za fleksibilne boxove.

Komentariši unos “CSS gallery layout”

Ukoliko se odlučite na smeli korak komentarisanja, Vaše ime će biti linkovano sa Vašim uri-jem ukoliko ste ga uneli. Vaša email adresa je neophodna, ali je diskrecija zagarantovana i neće biti prosleđena trećem licu. Spammeri stop.

Tekst komentara možete formatirati uz pomoć textile-a. Sav HTML će biti odstranjen.
Obratite pažnju na pravopis i po mogućnosti koristite naša slova.

Ime:

Email:

http://

Komentar:

Zapamti info?

Zadržavam pravo da sankcionišem, uklonim, izmenim offtopic komentare, kao i one koje nemaju veze sa unosom pod kojim su objavljeni. Sa druge strane podržavam i ohrabrujem otvaranja konstruktivnih i otvorenih diskusija putem komentara. Unapred hvala što se držite teme.