abc HTML5 TUTORIAL - Kreiranje galerija slika /DIV i FLOAT/

abc HTML5 i CSS TUTORIAL

Kreiranje galerija slika /DIV i FLOAT/ - Interni CSS

Slika 1. Korištenje atributa - Interni CSS /INTERNAL CSS/

Promjena parametara unutar grupe naredbi /DIV/
Sintaksa:

HEAD dio : <style> div { background-color: Naziv_boje | #kod_boje; } </style>
BODY dio: <div> <TAG>Sadržaj</TAG> </div>

Oznake:
TAG - p | h1 | h2 | h3 | h4 | h5 | h6 | BODY | DIV - TAG može da primi jednu od navedenih vrijednosti
p paragraf /PARAGRAPH/
h1 | h2 | h3 | h4 | h5 | h6 - zaglalje teksta /HEADINGS/
DIV - Tekst u cijeloj DIV sekciji DIV - interni css /INTERNAL CSS/

Opis
Atribut - prikazan u ovom dokumentu:
font-family: Ime fonta;
font-size:Vrijednost_mjerna_jedinica;
color:Ime_boje|kod_boje; - Popis kodova i naziva boja je u dodatku.
background-color:Ime_boje|kod_boje; - Popis kodova i naziva boja je u dodatku.

Slika 2. Keirana galerija sa div i float

Primjer 1: Prikazati 4 slike kao galeriju slika.
Opis rješenja: Koristi se TAG div:
- "galerija" grupisanje slika;
- "opis" za opis ispod slike.
Radi lakšeg razumijevanja je razdvojen kod za svaku sliku.
Properies nisu definisani da bi vidjeli da se slike prikazuju jedna ispod druge!

HTML kod

Ispis na ekranu

<!DOCTYPE html>
<html>
<head><title>Numerisana lista</title>
<style>
</style>
</head>
<body>
<h2>Galerija</h2>
<hr>
<div class="galerija">
  <a target="_blank" href="zorg_logo.gif">
  <img src="zorg_logo.gif" alt="zorg_logo"></a>
  <div class="opis">Znanje.org</div>
</div>

<div class="galerija">
  <a target="_blank" href="eNovinelogo.gif">
  <img src="eNovinelogo.gif" alt="eNovinelogo"></a>
  <div class="opis">eNovinelogo</div>
</div>

<div class="galerija">
  <a target="_blank" href="baner1.gif">
  <img src="baner1.gif" alt="baner1"></a>
  <div class="opis">baner1</div>
</div>

<div class="galerija">
  <a target="_blank" href="baner2.gif">
  <img src="baner2.gif" alt="baner2"></a>
  <div class="opis">baner1</div>
</div>
</body></html>

Galerija

Znanje.org

eNovinelogo

baner1

baner1

Projevara HTML koda: Iskopirati kod iz tabele i izvesti na dnu stranice

Primjer 2: Prikazati 4 slike kao galeriju slika (horizontalno uređenje).
Opis rješenja: Koristi se TAG div i float:
- float: left; lijevo poravnanje elemenata TAG-a div, te su slike horizontalno jedna do druge.

HTML kod

Ispis na ekranu

<!DOCTYPE html>
<html>
<head><title>Numerisana lista</title>
<style>
div.galerija {

  float: left; /* lijevo poravnanje */

} </style>
</head>
<body>
<h2>Galerija</h2>
<hr>
<div class="galerija">
  <a target="_blank" href="zorg_logo.gif">
  <img src="zorg_logo.gif" alt="zorg_logo"></a>
  <div class="opis">Znanje.org</div>
</div>

<div class="galerija">
  <a target="_blank" href="eNovinelogo.gif">
  <img src="eNovinelogo.gif" alt="eNovinelogo"></a>
  <div class="opis">eNovinelogo</div>
</div>

<div class="galerija">
  <a target="_blank" href="baner1.gif">
  <img src="baner1.gif" alt="baner1"></a>
  <div class="opis">baner1</div>
</div>

<div class="galerija">
  <a target="_blank" href="baner2.gif">
  <img src="baner2.gif" alt="baner2"></a>
  <div class="opis">baner1</div>
</div>
</body></html>

Galerija

Znanje.org

eNovinelogo

baner1

Projevara HTML koda: Iskopirati kod iz tabele i izvesti na dnu stranice

Primjer 3: Prikazati 4 slike kao galeriju slika (horizontalno uređenje).
Opis rješenja: Koristi se TAG
div.galerija {:
- height: auto; visina kontejnera.
div.opis {; dio za opis
- text-align: center; centriraj tekst
Za prelazak teksta u novi red poslije galerije
<div class="clearfix"></div>
<p>Tekst poslije galerije.</p>

HTML kod

Ispis na ekranu

div.opis { /* dio za opis */
text-align: center; /* centriraj tekst */
}

</style>
</head>
<body>
<h2>Galerija</h2>
<hr>
<div class="galerija">
  <a target="_blank" href="zorg_logo.gif">
  <img src="zorg_logo.gif" alt="zorg_logo"></a>
  <div class="opis">Znanje.org</div>
</div>

<div class="galerija">
  <a target="_blank" href="eNovinelogo.gif">
  <img src="eNovinelogo.gif" alt="eNovinelogo"></a>
  <div class="opis">eNovinelogo</div>
</div>

<div class="galerija">
  <a target="_blank" href="baner1.gif">
  <img src="baner1.gif" alt="baner1"></a>
  <div class="opis">baner1</div>
</div>

<div class="galerija">
  <a target="_blank" href="baner2.gif">
  <img src="baner2.gif" alt="baner2"></a>
  <div class="opis">baner1</div>
</div>
<p>Tekst poslije galerije.</p>
</body></html>

Galerija

Znanje.org

eNovinelogo

baner1

Tekst poslije galerije.

Projevara HTML koda: Iskopirati kod iz tabele i izvesti na dnu stranice

Primjer 4: Prikazati 4 slike kao galeriju slika (horizontalno uređenje).
Opis rješenja: Koristi se TAG
div.galerija {:
- margin: 5px; margine oko elemenata u galeriji
div.opis {; dio za opis
- padding: 15px; pomjerenje teksta unutar kontejnera centriraj tekst.
div.galerija:hover kad je pokazivac iznad slike mijenja se boja bordera
- border: 1px solid #333; /* boja bordera kad je pokazivac iznad slike*/
.clearfix:after { /* kraj galerije i prelaska u novi red
content: "";
display: table;
clear: both;

HTML kod

Ispis na ekranu

<!DOCTYPE html>
<html>
<head><title>Numerisana lista</title>
<style>
div.galerija {
  float: left; /* lijevo poravnanje */
  border: 1px solid #888; /* boja bordera */
  width: 145px; /* sirina kontejnera */
  height: auto; /* visina kontejnera */

  margin: 5px; /* margine oko kontejnera */

}
div.opis { /* dio za opis */
  text-align: center; /* centriraj tekst */

  padding: 15px; /* pomjerenje teksta unutar kontejnera */
}
div.galerija:hover { /* kad je pokazivac iznad slike*/
  border: 1px solid #333; /* boja bordera kad je pokazivac iznad slike*/ }
.clearfix:after { /* kraj galerije i prelaska u novi red*/
  content: "";
  display: table;
  clear: both;
}

Galerija

Znanje.org

eNovinelogo

baner1

Tekst poslije galerije.

N a p o m e n a:Može se koristiti i kod za ispis teksta u novom redu poslije uređene galerije (float: left...):
<div style="clear: left;">
</div>

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