Pozicioniranja , HTML/CSS Pitanja

1

Pozicioniranja , HTML/CSS Pitanja

offline
  • Dario V.
  • Pridružio: 10 Jan 2012
  • Poruke: 975

Zdravo svima,

Imam probleme oko pozicioniranje, tacnije znam ja odraditi ono sto mi treba, ali mi fakticki nije razjasnjeno u glavi razlike neke.

Pitanje 1.
Kada uzmem da podesim poziciju div-a, ima vise opcija:

1. ima top, left , right, botom
2. margin-left, margin-top
3. padding-left, padding-top

Koja je razlika izmedju ta 3?

2. Nikako mi nije jasno ono position, ima ih vise, kontam neke, ali kada koristite : relative, absolute, initial inherit i ostale...

MIslim citao sam po netu za to, ali mi i dalje nije razjasnjeno skroz Sad , skrpim ja sajt nekako, ali ostaje nejasnoca u glavi oko tih stvari?



Registruj se da bi učestvovao u diskusiji. Registrovanim korisnicima se NE prikazuju reklame unutar poruka.
offline
  • Programer
  • Pridružio: 23 Maj 2012
  • Poruke: 4575

Napisano: 21 Jan 2015 20:43

Fiksirana pozicija se određuje u okviru prozora pretraživača i to od njega zavisi. Npr:

.neki_div {    position: fixed;    top: 45px;    right: 12px; }

Ovo top znači koliko će element biti odmaknut od gornje ivice pretraživača (kada to kažem mislim samo na onaj deo koji prikazuje web stranicu, ne na ceo pretraživač kao program), a ovo right koliko od desne ivice. Jasno ti je onda verovatno kako funkcionišu left i bottom atributi.

Relativna pozicija je pozicioniranje u odnosu na ono koje bi bilo kada bi samo dodao taj element na stranicu. Recimo imaš jedan paragraf i odmah posle njega dodaš drugi, bez ikakvih dodatnih stilova. E, u odnosu na poziciju u kojoj bi taj novi paragraf tada stajao možeš da ga repozicioniraš.

Da ti bude lakše da shvatiš, recimo:

<style> .sectext {    position: relative;    left: -20px; } </style> <p>Neki tekst</p><br/> <p class="sectext">Neki drugi tekst</p>

Bez ovog stila on bi stajao odmah ispod ovog prvog paragrafa, ali će sa ovim stilom biti povučen na levo (postići će se efekat uvlačenja teksta) za 20 piksela. Suprotan efekat postižeš tako što ukloniš ovaj minus, nema potrebe za right atributom. Isto je i za top.

Apsolutna je dosta slična relativnoj, samo što se u ovom slučaju mogu definisati sva četiri atributa dok se u gornjem koriste pozitivni i negativni brojevi.

Inherit je atribut koji se koristi ako želiš da se neka stavka izuzme iz pravila koji si postavio u stilu. Recimo:

div {    border: 1px solid #000000; } .izuzetak div {    border: inherit; }

Znači svi div elementi izuzev ovog sa klasom .izuzetak će imati crne ivice oko sebe.

Dopuna: 21 Jan 2015 20:54

Što se tiče margin atributa, zamisli da je to neka vrsta zida koji se stvara oko određenog elementa. Kada postaviš da margin-bottom bude 10px i odmah posle njega postaviš neki drugi element, taj drugi element se neće pripiti uz ovaj prvi već će biti 10px ispod njega. Vidiš ovo:



E sad, zamisli da postoji drugi zid , ali ovog puta sa unutrašnje strane koji ne dozvoljava elementima da se pripiju uz samu ivice. To je padding.

Dopuna: 21 Jan 2015 21:16





Kada staviš samo margin ili samo padding on će na sve četiri strane (top, right, left, bottom) primeniti atribut.



offline
  • m4rk0  Male
  • Administrator
  • Administrator tech foruma
  • Marko Vasić
  • Gladijator - Maximus Decimus Meridius
  • Pridružio: 14 Jan 2005
  • Poruke: 15766
  • Gde živiš: Majur (Colosseum)

Treba napomenuti da margin i padding moze da se primenjuje na block elemente, dok ce kod inline elemenata biti ignorisan top i bottom margin.

Po mom misljenju najbolji komentar sa stackoverflow u vezi sa margin i padding, koji u sustini i ja primenjujem:

Citat:By default I use margin everywhere, except when I have a border or background and want to increase the space inside that visible box.

offline
  • Dario V.
  • Pridružio: 10 Jan 2012
  • Poruke: 975

Hvala vam, znam prevesti to, ali ne kontam ovo "except when I have a border or background and want to increase the space inside that visible box."
Na primjeru bi najbolje skontao hm ... ne kontam mislim kaze izuzev kada ima granicu ili pozadinu i zeli da poveca prostor unutar tog vidljivog boxa

offline
  • m4rk0  Male
  • Administrator
  • Administrator tech foruma
  • Marko Vasić
  • Gladijator - Maximus Decimus Meridius
  • Pridružio: 14 Jan 2005
  • Poruke: 15766
  • Gde živiš: Majur (Colosseum)

Napisano: 21 Jan 2015 22:31

Jos jedna caka. zove se collapsing i predstavlja jos jednu bitnu razliku izmedju paddinga i margina. Odnosi se na top i bottom vrednosti. Na pr ako imamo dva elementa jedan ispod drugog i na gornjem elementu margin bottom je 20px a na donjem elementu margin top je 30px onda ce razmak izmedju ta dva elementa biti 30px (a ne ocekivanih 50px kao sto je slucaj kod paddinga). Znaci, razmak ce biti u vrednosti vece cifre. Ovo ne vazi za left i right vrednosti, kod njih se normalno vrsi zbir.

Dopuna: 21 Jan 2015 22:40

Pa ako na nekom elementu imas border (oivicen element) i zelis da povecas prostor/razmak izmedju sadrzaja tog elementa (teksta na pr) u odnosu na border - koristices padding. Ili drugi slucaj kada imas neki element (moze i bez bordera) ali sa pozadinskom bojom/slikom i ponovo zelis da povecas prostor, sada izmedju sadrzaja tog elementa i pozadine (ili jednostavno zelis da pozicioniras sadrzaj u odnosu na pozadinsku sliku/boju) opet ces koristiti padding.

offline
  • Dario V.
  • Pridružio: 10 Jan 2012
  • Poruke: 975

KOntam sad znaci, imam oivicen neki box i unutra pisem da bi imao razmak unutra zeljeni teksta onda korisitm padding oke.

jedno mi nije jasno , kada nziem divove, ja prvo napravim header, zatim dodati meni , to su mi vec 2 diva,
3. div dodajem i hocu da ga pozicioniram, i kada stavim margin-top:2%; ,on meni racuna tih 2 % od kraja prvog diva, umjesto kako sam ja mislio od kraja 2. diva.

Jer za drugi div margin top racunao od kraja prvog diva kako i treba, ali nema logike da margin-top za treci div racuna isto od kraja prvog, valjda je logicnije od kraja drugog diva?

drugi div pdoesen njegov width na 100%

Ovo me ubi da razjasnim!
zahvaljujem!

offline
  • m4rk0  Male
  • Administrator
  • Administrator tech foruma
  • Marko Vasić
  • Gladijator - Maximus Decimus Meridius
  • Pridružio: 14 Jan 2005
  • Poruke: 15766
  • Gde živiš: Majur (Colosseum)

Citat:KOntam sad znaci, imam oivicen neki box i unutra pisem da bi imao razmak unutra zeljeni teksta onda korisitm padding oke.

Samo da ne bude zabune. Postoji i razmak izmedju redova teksta a to je line-height. Padding je razmak izmedju celukupnog teksta i bordera.

Citat:jedno mi nije jasno , kada nziem divove, ja prvo napravim header, zatim dodati meni , to su mi vec 2 diva,
3. div dodajem i hocu da ga pozicioniram, i kada stavim margin-top:2%; ,on meni racuna tih 2 % od kraja prvog diva, umjesto kako sam ja mislio od kraja 2. diva.


Gledaj da u startu pocnes da se ucis da kodiras koristeci HTML5 Semantic elemente. U sustini to i jesu div-ovi ali mnogo vise i user i seo frendly. Takodje nije sveto pismo da moras sve da ih sve iskoristis po svaku cenu na stranici, ali mislim da su header, nav i footer krucijalni elementi. Takodje i normalno je da ces i dalje imati i klasicnih divova koji ne spadaju u HTML5 Semantic elemente (tamo gde nije logicno koristiti neki od HTML5 Semantic elementata neces ni koristiti - logicno, ali o tom potom).

offline
  • Dario V.
  • Pridružio: 10 Jan 2012
  • Poruke: 975

auuuu koja moc <nav> taga, pa cek nema potrebe da se zezam sa <ul> i <li> , sve zapisano u onom tagu.

To mi se svidja, dok ne kontam poentu ostalih ,evo recimo ovog, ovo je cisti po meni div tag, samo sto pise article http://www.w3schools.com/htmL/tryit.asp?filename=tryhtml5_article

offline
  • m4rk0  Male
  • Administrator
  • Administrator tech foruma
  • Marko Vasić
  • Gladijator - Maximus Decimus Meridius
  • Pridružio: 14 Jan 2005
  • Poruke: 15766
  • Gde živiš: Majur (Colosseum)

Pa to u sustini i jesu klasicni div tagovi (sa razlikom u nekim sitnim prepodesenim elementima, uglavmnom velicini fonta i sl) i nijedan ne radi nista spektakularno (u vizuelnom smislu) ali imaju svoje prednosti i to je nesto sto bi moralo da se koristi pri izradi sajta.

offline
  • Dario V.
  • Pridružio: 10 Jan 2012
  • Poruke: 975

Napisano: 22 Jan 2015 0:12

samo problematicno je <nav> tag stilizovati u css-u, ja bio ono sa ul i li tagovima stilizovao, a ovo nikako ne moze.

Bukvalno druze nista ne reaguje, jer sam ove kodove bio primenio malo pre na one <div> i <ul> <li> tagove!
HTML kod
<nav class="navigacija">    <a href=""> HOMEPAGE </a> |    <a href=""> PHOTOS  </a> |       <a href=""> VIDEOS </a>    |    <a href=""> FEATURES </a>|       <a href=""> ABOUT  </a>    </nav>

CSS kod:

.navigacija {    position:absolute;        margin-top: 2%;    margin-left:2%; } .navigacija a{    text-decoration: none;    color:#2E2E2E;     border-bottom: solid 5px #F1f1f1;    text-align: center;    font-size:16px;    font-family: Cambria; }

Dopuna: 22 Jan 2015 0:22

.navigacija {    position:relative;    width:57%;    margin-top: 2%;    margin-left:2%;    text-decoration: none;    color:#2E2E2E;     border-bottom: solid 5px #F1f1f1;    font-size:16px;    font-family: Cambria;     } .navigacija a:hover{    color:#9f9f9f; border-bottom: solid 5px #0099FF; } .navigacija a{    text-decoration: none; }

Sredio sam sad sve evo kod nekome mozda zatreba, hvala ti puno Markoni, ziv bio!

Ko je trenutno na forumu
 

Ukupno su 917 korisnika na forumu :: 37 registrovanih, 3 sakrivenih i 877 gosta   ::   [ Administrator ] [ Supermoderator ] [ Moderator ] :: Detaljnije

Najviše korisnika na forumu ikad bilo je 3466 - dana 01 Jun 2021 17:07

Korisnici koji su trenutno na forumu:
Korisnici trenutno na forumu: antonije64, Arahne, Asparagus, Bokiboks, Cassius Clay, comi_pfc, Dimitrije Paunovic, doktor1964, Dvojac005, hologram, ikan, janbo, kolle.the.kid, krkalon, Leonov, Lieutenant, Lucije Kvint, Lutvo_Redzepagic, Magistar78, Mcdado, mercedesamg, Metanoja, milimoj, Nemanja.M, Neretva, NoOneEver Dreams, Panter, procesor, sap, stegonosa, Sumadija34, tubular, vathra, VJ, Vlada78, yrraf, Zoca