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
