Načrtovanje in razvoj spletnih aplikacij
Nazaj
Naprej

15: Pozicioniranje

Spoznali bomo
  • Kako s CSS pozicioniramo elemente
  • Statično pozicioniranje elementov
  • Relativno pozicioniranje elementov
  • Absolutno pozicioniranje elementov

Izdelaj spletne strani, ki jih prikazujejo spodnje slike in jih poimenuj:

  • 15vaja-css-priimek-ime.html
  • 15vaja1-css-priimek-ime.html
  • 15vaja2-css-priimek-ime.html
  • 15vaja3-css-priimek-ime.html
  • 15vaja4-css-priimek-ime.html
  • 15vaja5-css-priimek-ime.html

Strani naj bodo izdelane v HTML5 in s CSS. Pazi na pravilno uporabo oznak in obliko zapisa kode.

CSS kodo vstavi v glavo spletnih strani v oznako style.


1. stran - Statično pozicioniranje

Oblikovne lastnosti 1. strani
  • z div elementi sestavi spodnjo stran
  • div-1a, div-1b in div-1c so znotraj div-1
  • div-1 ima nastavljeno statično pozicioniranje
  • vključi generirano besedilo Lorem Ipsum
Slika spletne strani v brskalniku
Slika 15.vaje: Statično pozicioniranje

2. stran - Relativno pozicioniranje

Oblikovne lastnosti 2. strani
  • z div elementi sestavi spodnjo stran
  • div-1a, div-1b in div-1c so znotraj div-1
  • div-1b ima relativno pozicioniranje in je zgoraj odmaknjen za 20 pik, na levi pa za -40 pik
  • vključi generirano besedilo Lorem Ipsum
Slika spletne strani v brskalniku
Slika 15.vaje: Relativno pozicioniranje

3. stran - Absolutno pozicioniranje

Oblikovne lastnosti 3. strani
  • z div elementi sestavi spodnjo stran
  • div-1a, div-1b in div-1c so znotraj div-1
  • div-1b ima absolutno pozicioniranje in je poravnan zgoraj desno, širina je 300 pik
  • vključi generirano besedilo Lorem Ipsum
Slika spletne strani v brskalniku
Slika 15.vaje: Absolutno pozicioniranje

4. stran - Relativno in absolutno pozicioniranje

Oblikovne lastnosti 4. strani
  • z div elementi sestavi spodnjo stran
  • div-1a, div-1b in div-1c so znotraj div-1
  • div-1 ima relativno pozicioniranje
  • div-1b ima absolutno pozicioniranje in je poravnan zgoraj desno, širina je 300 pik
  • vključi generirano besedilo Lorem Ipsum
Slika spletne strani v brskalniku
Slika 15.vaje: Relativno in absolutno pozicioniranje

5. stran - 3. stolpci in absolutno pozicioniranje

Oblikovne lastnosti 5. strani
  • z div elementi sestavi spodnjo stran
  • div-1a, div-1b in div-1c so znotraj div-1
  • div-1 ima relativno pozicioniranje
  • div-1a ima absolutno pozicioniranje in je poravnan zgoraj levo, širina je 25 odstotkov
  • div-1b ima absolutno pozicioniranje in je poravnan zgoraj, levo je odmaknjen za 25 odstotkov, širina je 25 odstotkov
  • div-1c ima absolutno pozicioniranje in je poravnan zgoraj, levo je odmaknjen za 50 odstotkov, širina je 25 odstotkov
  • vključi generirano besedilo Lorem Ipsum
Slika spletne strani v brskalniku
Slika 15.vaje: 3 stolpci in absolutno pozicioniranje

6. stran - 3. stolpci in absolutno pozicioniranje z višino

Oblikovne lastnosti 6. strani
  • z div elementi sestavi spodnjo stran
  • div-1a, div-1b in div-1c so znotraj div-1
  • div-1 ima relativno pozicioniranje in višino 400 pik
  • div-1a ima absolutno pozicioniranje in je poravnan zgoraj levo, širina je 25 odstotkov
  • div-1b ima absolutno pozicioniranje in je poravnan zgoraj, levo je odmaknjen za 25 odstotkov, širina je 25 odstotkov
  • div-1c ima absolutno pozicioniranje in je poravnan zgoraj, levo je odmaknjen za 50 odstotkov, širina je 25 odstotkov
  • vključi generirano besedilo Lorem Ipsum
Slika spletne strani v brskalniku
Slika 15.vaje: 3 stolpci in absolutno pozicioniranje z višino
Nazaj
Naprej