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?