Trake grafikona

 

Trake grafikona definiramo kao popis s vrijednostima. Popis je definiran sljedećim CSS-om:

#graf ul {
width: 330px;
height: 180px;
padding: 0px;
margin: 0px;
}
#graf ul li {
position: absolute;
text-align: center;
background-color: #333366;
padding: 0px;
margin: 0px;
width: 30px;
height: 100px;
list-style-type: none;
bottom: 0px;
}

Primjećujete sljedeće:

  • elementi popisa #graf ul li definirani su apsolutnim položajem. Tako smo postigli fleksibilnost pomicanja, jer svakom pojedinom elementu popisa možemo odrediti zaseban položaj.
  • text-align ima vrijednost center, tako da se brojke nađu na sredini trake.
  • background-color postavlja boju trake.
  • bottom – pozicionira (smješta) trake na dno okvira u kojem se nalazi popis.

Osim dodavanja samog popisa u HTML kôd, potrebno je postaviti položaj, te definirati visinu pojedine trake. To radimo sljedećim kôdom:

<ul id="graf">
<li style="left:30px;height:100px">100</li>
<li style="left:90px;height:80px">80</li>
<li style="left:150px;height:60px">60</li>
<li style="left:210px;height:120px">120</li>
<li style="left:270px;height:90px">90</li>
</ul>

U linijskom stilu dodano je svojstvo left, čime se postavlja pomak od lijeve granice sloja, i svojstvo height, kojim se definira visina pojedine trake. Visina u pikselima odgovara njenoj vrijednosti. Konačan izgled grafikona nalazi se u lekciji Stupčasti grafikoni.


CARNet
Accessibility
Reset All

Background Colour

Font Face

Font Size

1

Text Colour