Ćetvrti čas – Float

Dragan Filipović Korak po korak, Kurs Comments (0)

Tipovi elemenata

Postoje dva osnovna tipa elemenata: Block Inline.

P, DIV, TABLE , UL, LI isl su Block elementi

B, I, SPAN, A Tag-ovi i konkretni sadržaj (tekst i slike) su Inline elementi.

U CSS-u osobina DISPLAY može promeniti prikaz elmenata, odnosno Block može postati inline i obrnuto. Takođe postoji i vrednost INLINE-BLOCK koja definiše Inline element sa nekim osoninama Block elementa

Block elementi

  • Imaju punu širinu (100%), od početka do kraja elementa u kome se nalaze
  • Prikazuju se jedan ispod drugog. Npr dva DIV-a mogu u kodu da stoje jedan pored drugog, ali će se na sajtu prikazati jedan ispod drugog.
  • Mogu da imaju margine i padding
  • Mogu da imaju dimenzije

Inline elmenti

  • Prikazuju se na mestu gde su postavljeni, ne prelaze u novi red
  • Ne mogu imati gornju i donju marginu
  • Ne mogu imati dimenzije
  • Ukoliko ima float, postaje block element

Do sada smo koristili obe vrste elemenata. Div tagovi su imali punu širinu i nalazili su se jedan ispod drugog (redovi na sajtu), Span elementu su ostali u paragrafu na mestu na kome smo ih ubacili.

Prikaz Pozicija

Postoje tri načina prikaza pozicija: Normal, Float i Absolute.

Normal je uobičajeni prikaz:

 normal_flow-1

Vertikalne margine kolapsiraju (margin collapse), odnosno prikazuje se samo margina donjeg elementa.

Redovi vašeg sajta su ovako prikazani.

Float

Koristi se za postavljanje elemenata levo ili desno.

floats-1

 

Float elementi treba da imaju širinu, Kada element ima Float osobinu onda margine ne kolapsiraju, kao u Normal prikazu.

Zadatak:

Napraviti levu i desnu kolonu u trećem redu vašeg sajta.

1. CSS – napravimo klasu .leva-kolona, dodelimo širinu i osobinu FLOAT:LEFT;

Klasi .desna kolona dodelimo širinu i FLOAT:RIGHT;

Vaš treći red je širine 800px, pa zbir širina leve i desne kolone treba da bude 800px, da bi elementi mogli da stanu u treći red.

.leva-kolona {
	width:200px;
	float:left;
}
.desna-kolona {
	width:600px;
	float:right;
}

 2.HTML – U trećem redu imamo sadržaj koji smo koristili za vežbu. Sadržaj ćemo obrisati tako da ostane samo treći red:

<div id="treci-red">

</div>
<!-- Kraj #treci-red -->

 Korisno je da stavljamo komentare, obzirom da sajt postaje sve kompleksniji.

Unutar trećeg reda ubacićemo levu i desnu kolonu, odnosno DIV tagove sa klasom leva-kolona odnosno desna-kolona

  <div id="treci-red">
    <div class="leva-kolona">Content for  class "leva-kolona" Goes Here</div>
    <div class="desna-kolona">Content for  class "desna-kolona" Goes Here</div>
  </div>
  <!-- Kraj #treci-red -->

 Kolone stoje levo i desno, ali se jedan deo sajta (futer) poremetio. Float elementi mogu da preklope sadržaj koji sledi.

floats2-1

 

Da bi ovo sprečili koristimo CSS osobinu CLEAR. Najbolje je napraviti prazan element koji će stojati ispod desne kolone (tu nam se završava red elemenata koji imaju float).

U CSS-u ćemo napraviti format za taj element. Ime elementa je proizvoljno, često se koristi clear ili clearfix

.clearfix {
	clear:both;
}

 I dodaćemo element u HTML

   <div class="leva-kolona">Content for  class "leva-kolona" Goes Here</div>
    <div class="desna-kolona">Content for  class "desna-kolona" Goes Here</div>
    <div class="clearfix"></div>

 Sadržaj ovog elementa obrišite, obzirom da on ne treba da se vidi na sajtu, već samo ima funkciju da očisti clear koji smo koristili.

floats_clear

 

Inače i leva i desna kolona su mogle da imaju float:left, leva kolona bi stojala na svom mestu, a desna kolona bi stojala levo  u odnosu na treći red. Obzirom da desna kolona ne može da preklopi levu kolonu, vizuelno bi se prikazala sa desne strane, jer su im širine definisane da upotpune treći red.

Zadatak:

U levu i desnu kolonu ubaciti neki sadržaj (lorem ipsum), formatirati tekst, ubaciti naslove i izabrane delove teksta, postaviti margine i padding, da tekst bude pregledniji, dodeliti im neke ivice.

Sve elemente smo već formatirali u CSS-u, samo treba da im dodamo nove osobine.

NAPOMENA: pažljivo pri dodavanju ivica, margina i padding-a – ukupan zbir širina treba da bude 800px.

NPR. leva kolona padding:20px (levo 20 i desno 20) + border:3px (levo i desno) + širina 154px = 200px

.leva-kolona {
	width:154px;
	float:left;
	border:#00CC66 3px solid;
	padding:20px;
}
.desna-kolona {
	width:534px;
	float:right;
	border:#00CC66 3px solid;
	padding:20px;
	margin-left:20px;
}

 HTML

  <div id="treci-red">
    <div class="leva-kolona">
    
      <h3>PELLENTESQUE</h3>
      <p>tristique senectus et netus et malesuada fames ac turpis egestas. In posuere felis nec tortor. Pellentesque faucibus. Ut accumsan ultricies elit. Maecenas at justo id velit placerat molestie. Donec dictum lectus non odio. Cras a ante vitae enim iaculis aliquam. Mauris nunc quam, venenatis nec, euismod sit amet, egestas placerat, est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras id elit. Integer quis urna. Ut ante enim, dapibus malesuada, fringilla eu, condimentum quis, tellus. Aenean porttitor eros vel dolor. Donec convallis pede venenatis nibh. Duis quam. Nam eget lacus. Aliquam erat volutpat. Quisque dignissim congue leo.</p>    
    
    </div>
    
    <div class="desna-kolona">
    
      <h3>LOREM IPSUM DOLOR SIT AMET,</h3>
      <p>consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros.</p>
      <h3>PELLENTESQUE HABITANT MORBI</h3>
      <p>tristique senectus et netus et malesuada fames ac turpis egestas. In posuere felis nec tortor. Pellentesque faucibus. Ut accumsan ultricies elit. Maecenas at justo id velit placerat molestie. Donec dictum lectus non odio. Cras a ante vitae enim iaculis aliquam. Mauris nunc quam, venenatis nec, euismod sit amet, egestas placerat, est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras id elit. Integer quis urna. Ut ante enim, dapibus malesuada, fringilla eu, condimentum quis, tellus. Aenean porttitor eros vel dolor. Donec convallis pede venenatis nibh. Duis quam. Nam eget lacus. Aliquam erat volutpat. Quisque dignissim congue leo.</p>
      
    </div>
    
    <div class="clearfix"></div>
  
  </div>  
  <!-- Kraj #treci-red -->

 Pogledajte vaš sajt.

Comments (0) Trackback from your site.

Dragan Filipović

Predavač na Kursu Web Dizajna - Web edukator.

Ostavi komentar

Morate biti prijavljeni da biste dodali komentar.