Ana Sayfa / Kodlama Dilleri / CSS ve HTML ile yatay çizgi grafik oluşturma

CSS ve HTML ile yatay çizgi grafik oluşturma

Yatay Çizgi Grafik Oluşturmak…

CSS ve HTML kullanarak sitemizde yatay grafikler oluşturabiliriz. Grafikler çoğu zaman belirli değerleri ziyaretçiye göstermek için hazırlanır. İşte sizde siteniz ile ilgili bazı değerleri ziyaretçilerinize göstermek istiyorsanız aşağıda anlattıklarımızı harfiyen uygulayınız.

Yandaki şekilde gördüğünüz gibi bir grafik oluşturmak aslında çok basit. Bütün olay biraz css ve hazırladığımız css ye göre HTML bilgisi oluşturmaktan ibaret. Resimde gördüğünüz grafiği oluşturabilmek için yazmanız gereken css ve html kodlarını aşağıda size veriyorum.

<style type=”text/css” media=”screen”>
/* SETUP */
* {
margin: 0;
padding: 0;
list-style-type: none;
}
body {
font-family: Helvetica, Arial, sans-serif;
color: #333;
}
a {
color: #2D7BB2;
text-decoration: none;
font-weight: bold;
}
a:hover {
color: #333;
}
h2, h3, h4 {
clear: both;
margin: 0 0 0.6em 0;
}
h3 {
color: #666;
}
.section {
float: left;
clear: left;
padding: 1em 2em;
}

/* CHART LISTS */
.chartlist {
float: left;
border-top: 1px solid #EEE;
width: 15em;
}
.chartlist li {
position: relative;
display: block;
border-bottom: 1px solid #EEE;
_zoom: 1;
}
.chartlist li a {
display: block;
padding: 0.4em 4.5em 0.4em 0.5em;
position: relative;
z-index: 2;
}
.chartlist .count {
display: block;
position: absolute;
top: 0;
right: 0;
margin: 0 0.3em;
text-align: right;
color: #999;
font-weight: bold;
font-size: 0.875em;
line-height: 2em;
}
.chartlist .index {
display: block;
position: absolute;
top: 0;
left: 0;
height: 100%;
background: #B8E4F5;
text-indent: -9999px;
overflow: hidden;
line-height: 2em;
}
.chartlist li:hover {
background: #EFEFEF;
}
</style>
<div>
<h2>Yatay Çizgi Grafikleri</h2>

<h3>Grafik Tasarım Medya<br /> Populer Konular</h3>

<ul>
<li>
<a href=”http://www.grafiktasarimmedya.com/Grafik/”>Grafik</a>
<span>460</span>
<span style=”width: 46%”>(46%)</span>

</li>
<li>
<a href=”http://www.grafiktasarimmedya.com/Tasarım/”>Tasarım</a>
<span>290</span>
<span style=”width: 29%”>(29%)</span>
</li>
<li>
<a href=”http://www.grafiktasarimmedya.com/medya/”>Medya</a>
<span>160</span>

<span style=”width: 16%”>(16%)</span>
</li>
<li>
<a href=”http://www.grafiktasarimmedya.com/html/”>HTML</a>
<span>90</span>
<span style=”width: 9%”>(9%)</span>
</li>

</ul>
</div>

Burada gördüğünüz kodları kopyalarak grafiği oluşturmak istediğiniz sayfa içerisinde  kullanmanız gerekiyor. Yukarıdaki kod dizisinde css ve html aynı sayfada kullanılmıştır. XHTML kurallarına uymak için css kodlarını ayırarak, sitenizin css stil dosyasına yapıştırınız. (Buradaki kodlar ile sizin sitenizin css dosyasında benzer kodlar olabilir. Bu kodlar sitenizdeki görünümü değiştirebilir. Düzenleyerek kullanmanız tavsiye edilir.)

Yukarıdaki css kodları sayesinde yazı renklerini, sütun renklerini, yazı fontlarını ve büyüklüklerini değiştirebilirsiniz. HTML kısımda da yapacağınız değişiklikler ile kendi verilerinizi kullanabilirsiniz.

Yorum Yazın

1 Yorum

  1. Ben bu kodları kullandım css ile html kodlarını ayırdım fakat css de bi tek h1 h2 h3 kodları hariç öbür kodlar çalışmadı yardım ederseniz sevinirim …

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir