Home   FORUM   Toplista   HTML   CSS   JavaScript   PHP   DIZAJN   SEO   Mapa
KONTAKT
izuzetan[at]gmail.com






TOP LISTA SAJTOVA

CSS LAYER

Možemo definisati poziciju (položaj) svakog HTML elemenata u prostoru na različite načine uz pomoć CSS -a. Sad ću dati spisak atributa koji definišu odredjene načine pozicioniranja elemenata:

Bottom, left, right i top

Do sad smo bottom, left, right i top koristili kao vrednosti nekih atributa ali oni se mogu koristiti i kao atributi. Oni se kao atributi koriste uglavnom nakon atributa koje ćemo ovde u nastavku razmatrati. Ali najpre ću dati sliku na kojom ću pokušati da objasnim atribute left, right, bottom i top:

CSS objašnjenje pojmova pozicija

Mislim da je slika jasna i da ne treba neko posebno objašnjenje. Vrednosti za bottom, top, right i left mogu biti u procentima (u odnosu na veličinu elementa), dužinskim jedinicama (pikseli, milimetri i ostale CSS jedinice mere), i auto što je i po defaultu.

Position

Position atribut definiše poziciju elementa na osnovu jedne od sledećih vrednosti:

  • static - to je pozicija po defaultu, kad i ne koristimo position atribut
  • absolute - Pomoću ove vrednosti odredjujemo tačan položaj elementa u odnosu na "body" površinu, bez obzira na položaj bilo kog drugog elementa.

Nakon atributa position: absolute slede atributi bottom, top, left, ili right koji će definisati tačku ili oblast gde će biti apsolutan položaj elementa. Evo na primer definišimo da nam neki tekst bude u apsolutnom nekom položaju:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head>
<style type="text/css">
#abs {
   position: absolute;
   left: 165px;
   top: 60px;
}
</style></head><body>
<h3 id="abs">Ovo je kao naslov tog nekog poduga&#269;kog teksta</h3>
<p>Ovo je neki podugacak tekst</p>
</body></html>

CSS layer

Kao što vidite mi smo dali apsolutnu poziciju naslova pomoću "kordinata" u left i top atributima, tako da on ne stoji iznad teksta već ispod njega, iako bi na osnovu HTML koda trebao da stoji iznad teksta.

Fixed

Fixed fiksira položaj nekog objekta na ekranu tako da bez obzira da li mi pokrećemo scrollbar -ove (ako ih ima), tekst i dalje stoji u istom položaju ekrana. Evo primera i sve će biti jasnije:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head>
<style type="text/css">
#ku {
   position: fixed;
   left: 845px;
   top: 52px
}
</style>
</head><body>
<p id="ku">Fiksiran tekst</p>
<p>Internet Explorer 7 (ili noviji) podržava ovaj atribut, ali uz !DOCTYPE specifikaciju</p>
<p>Neki tekst</p><p>Neki tekst</p><p>Neki tekst</p><p>Neki tekst</p><p>Neki tekst</p>
<p>Neki tekst</p><p>Neki tekst</p><p>Neki tekst</p><p>Neki tekst</p><p>Neki tekst</p>
<p>Neki tekst</p><p>Neki tekst</p><p>Neki tekst</p><p>Neki tekst</p><p>Neki tekst</p>
<p>Neki tekst</p><p>Neki tekst</p><p>Neki tekst</p><p>Neki tekst</p><p>Neki tekst</p>
<p>Neki tekst</p><p>Neki tekst</p><p>Neki tekst</p><p>Neki tekst</p><p>Neki tekst</p>
</body></html>

Pogledajte u brauzeru kako radi ovaj kod. Znači iskopirajte ga u neki fajl sa ekstenzijom htm. i taj fajl otvorite brauzerom (po mogućstvu neki noviji brauzer). Primetićete da i ako klizačem idete naniže jedan tekst će uvek biti fiksiran na ekranu i neće se pomerati.

Relative

Relative je atribut kojim definišemo položaj elementa u odnosu na normalan položaj koji bi taj element imao kad ne bi primenili taj CSS atribut "realative". Možda je ovako napisano malo nejasno, ali primer će svima biti jasan:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head>
<title>Relative</title>
</head>
<body>
<p>Obican tekst</p>
<p style="position: relative; left: -100px; top: 10px">Tekst kojeg pomeramo relativno</p>
</body></html>

       
Obican tekst

Tekst koji pomeramo relativno

Oni sa novijim brauzerima primećuju kako je tekst u odnosu na normalan položaj koji bi imao zbog HTML koda pomeren prilično u levo. Znači poenta je u tome da se pozicija nova odredjuje u odnosu na poziciju koju bi element imao na osnovu HTML koda.

Z-index

Moguće je da ako na odredjeni način upotrebimo atribute relative ili absolute može doći do preklapanja elemenata. E sad na primer preklope se neki tekst i neka slika, onda mi pomoću argumenta z-index možemo odrediti koja od ta dva elementa će biti iznad, ili ispod, odnosno koji će u delu preklapanja biti vidljiv a koji ne. Evo primera:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head>
<style type="text/css">
#ispod {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
}
#iznad {
  position: absolute;
  left: 110px;
  top: 0px;
  z-index: 1;
}
</style>
</head><body>
<p>Ovaj tekst na osnovu HTML koda treba da se pojavljuje ispod slike</p>
<img src="pozadina.gif" id="ispod">
<img src="pozadina.gif" id="iznad">
</body></html>

Z-index CSS

Primetićete da je tekst ispisan na slici u jednom delu vidljiv a u drugom nije u zavisnosti od vrednosti z-index: -1 - vidljiv, a kad je 1 nije vidljiv. Znači u tome je poenta. z-index odredjuje koji element će biti ispred a koji iza ukoliko se medjusobno preklapaju. Takodje z-index jedino i uvek ide u kombinaciji sa atributima absolute, fixed i relative, i to nakon njih u CSS kodu. E sad postoje tu još neke varijacije kad se preklapaju više elemenata jer onda se koriste i brojevi veći od 1 (naravno i u negativnom i u pozitivnom smeru), kako bi smo tačno definisali koji objekti su ispred kojih.

Clip

Clip atribut prikazuje samo onaj deo elementa koji želimo da bude vidljiv. Znači na primer ako imamo neku sliku možemo definisati pomoću ovog atributa da se vidi samo neki deo slike (na primer prva četvrtina slike) a ne i cela slika. Vrednosti ovog atributa su auto - što je i po defaultu, kad i nema atributa clip, i rect(top, right, bottom, left) - kad tačno definišemo oblast unutar elementa koji želimo da bude vidljiv. Evo primera:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head>
<style type="text/css">
  img {
    position: absolute;
    clip: rect(0px, 300px, 150px, 0px);
  }
</style>
</head><body>
<img src="boksmod.gif" width=580 height=300>
</body></html>

I ovaj primer prebacite u neki fajl (u kome se nalazi i slika bilokojaslika.gif) i otvorite brauzerom. Primetićete da slika nije prikazana u celosti već samo njena gornja leva četvrtina.

Copyright © 2010 BUbaj. Powered By bubaj.com
CSS    CSS osnove    CSS stil    CSS box model    CSS display