CSS prikaz u dva ili tri stupca

HTML strukturni elementi

<div> je stukturni blok element. <span> je strukturni linijski element.


Uobičajeni način postavljanja html elemenata na web stranici je za blok elemente jedan ispod drugoga tako da zauzima cijelu širinu roditeljskog elementa. Linijski elementi se pojavljuju u redoslijedu od lijeva prema desno a prelaze u novi redak ako u tekućem retku ne postoji dostatno prostora.

Blok elementi

Značajke blok elemenata:

  • Uvijek počinju u novom retku
  • Možemo upravljati svojstvima: height, line-height, margin-top i margin-bottom
  • Širina elementa je uvijek 100% roditeljskog elementa osim ako je svojstvo width zadano.
Primjeri blok elemenata: <div>, <p>, <h1>, <form>, <ul> i <li>

Linijski elementi


Linijskih elementi imaju značajke suprotne od blok elemenata:

  • Počinju u istom retku
  • Ne možemo mijenjati svojstva: height, line-height, margin-top i margin-bottom
  • Širina elementa je uvijek jednaka veličini samog elementa i ne možemo je promijeniti.
Primjeri linijskih elemenata: <span>, <a>, <img>, <label>, <strong> i <em>

Blok i linijski elementi


  

Širina i visina blok elementa

width: 250px; height: 120px;


Vrijednosti width određuje širinu blok elementa.
Vrijednosti height određuje visinu blok elementa.

Vrijednosti width i height možemo unijeti kao veličinu (npr 250px) ili postotak (npr. 25%).

Plutanje elementa

h2 { float: right; } p float: left; }

float element izbacuje pojavljivanje elementa iz redovite strukture i lijepi ga uz lijevi left ili desni right rub:

  • roditeljskog elementa
  • blok elementa uz isti rub u istom retku

Primjer blok elemenata

<p>P1</p> <p class="float">P2</p> <p class="float">P3</p> <p class="float">P4</p> <p class="float">P5</p> <p>P6</p> <p>P6</p> <p>P7</p> <p>P8</p> <p>P9</p>

Primjer float elementa

p.float { float: left; width: 120px; height: 200px; margin: 0px; background-color: #CCC; } p { font-size: 24px; padding: 5px; border: 1px solid red; height: 100px; background-color: #EEE; }

Primjer: float elementi


  

Zadatak 1: Dva stupca

<body> <div id="wrapper"> <div class="stupac"> <img src="slike/img1.jpg" /> </div> <div class="stupac"> <img src="slike/img2.jpg" /> </div> <p>Copyright @mihovil</p> </div> </body>

Zadatak 1: stil.css

img { width: 430px; } p { color: #FFF; padding: 10px; text-align: center; }

stil.css (2. dio)

#wrapper { width: 1024px; margin: 0 auto; background-color: #00F; } .stupac { float: left; background-color: #FF0; width: 430px; margin: 20px; padding: 20px; border: 1px solid #000; }

Zadatak 1: Dva stupca


  

Zadatak 2: tri stupca


  

Zadatak 3: plus zaglavlje

<body> <div id="wrapper"> <div id="header"> <img src="slike/naslov.jpg" /> </div> <div class="stupac"> <img src="slike/img1.jpg" /> </div> <div class="stupac"> <img src="slike/img2.jpg" /> </div> <div class="stupac"> <img src="slike/img3.jpg" /> </div> <p>Copyright @mihovil</p> </div> </body>

Zadatak 3: vjezba-3.css

#header { background-color: #FF0; margin: 20px; padding: 20px; border: 1px solid rgb(0,0,0); } #header img { width: 940px; } .stupac img { width: 259px; }

Zadatak 3: Zaglavlje i 3 stupca

Zadatak 4: Zaglavlje i podnožje

Zadatak 5

<div class="stupacx3"> <h2>Stupac 1</h2> <img src="slike/img1.jpg" width="270px" /> <p>Moja draga kuha najbolje.</p> </div> <div class="stupacx3"> <h2>Stupac 2</h2> <img src="slike/img2.jpg" width="270px" /> <p>U mom kraju sad je proljeće.</p> </div> <div class="stupacx3"> <h2>Stupac 3</h2> <img src="slike/img3.jpg" width="270px" /> <p>Najljepše je kad si kraj mene.</p> </div>

CSS za zadatak 5 .stupacx3

h2 { color: green; font-size: 24px; font-weight: lighter; text-align: center; } p { font-size: 16px; text-align: center; } .stupacx3 { float: left; width: 320px; }

Model pravokutnika



Dva stupca





Hvala na pozornosti!


Pitanja?