abc HTML5 i CSS TUTORIAL

Primjeri: 2.3. Kreirati galeriju slika - Parametar FLOAT: LEFT /IMAGE GALLERY/
Primjeri /EXAMPLES/

Primjer 3. Kreirati galeriju slika - Parametar FLOAT: LEFT /IMAGE GALLERY/
Opis: div.gallery { - parametri za kontejner koji će sadržavati sliku i opis slike.
float: left; /* lijevo poravnanje */

<!DOCTYPE html>
<html>
<head><title>Galerija slika - Parametar FLOAT: LEFT /IMAGE GALLERY/</title>
<style>
div.gallery {
  margin: 5px; /* margine oko kontejnera */
  border: 1px solid #ccc; /* boja bordera */
  float: left; /* lijevo poravnanje */
  width: 150px; /* sirina konteinera */
  height: 150px; /* visina konteinera */
}
div.gallery:hover {
/* kad je pokazivac iznad slike*/   border: 1px solid #333; /* boja bordera kad je pokazivac iznad slike*/
}
div.gallery img { /* dimenzije za slike unutar gallery kad se koristi img */
  width: 100%; /* sirina slike ce biti kao konteiner div.galery 150px */
  height: 100px; /* slike ce biti 150px x 100px */
}
div.opis { /* dio konteiner za opis */
  padding: 15px; /* pomjeren od osatlih elemenata */
  text-align: center; /* centriran tekst */
}
.clearfix:after { /* kraj galerije i otvaranje konteira */
  content: "";
  display: table;
  clear: both;
}
</style>
</head>

<body>
<h2>Galerija</h2>
<hr>
<div class="gallery">
  <a target="_blank" href="lenonardo.png" width="600" height="400">
    <img src="lenonardo.png" alt="Leonardo">
  </a>
<div class="opis">Leonardno da Vinči</div>
</div>

<div class="gallery">
  <a target="_blank" href="mikelandjelo.png">
    <img src="mikelandjelo.png" alt="Forest" width="600" height="400">
  </a>
  <div class="opis">Mikelandjelo</div>
</div>

<div class="gallery">
  <a target="_blank" href="rafaelo.png">
    <img src="rafaelo.png" alt="rafaelo" width="600" height="400">
  </a>
  <div class="opis">Rafaelo</div>
</div>

<div class="gallery">
  <a target="_blank" href="donatelo.png">
    <img src="donatelo.png" alt="Mountains" width="600" height="400">
  </a>
  <div class="opis">Donatelo</div>
</div>

<div class="clearfix"></div>
<p>Tekst poslije galerije.</p>
</body>
</html>

Galerija

Leonardo
Leonardno da Vinči
Forest
Mikelandjelo
rafaelo
Rafaelo
Mountains
Donatelo

Tekst poslije galerije.

Spisak .css fajlova /CSS FILES LIST/

Prozor na dnu stranice je namjenje za provjeru koda:
- kopirajte kod (edit, copy, paste ili CTRL+C, CTRL+V ili DRAG&DROP metodom), editovanje je moguće u prozoru

Index