Web sayfamıza bir "şerit görseli" ekleyelim

Web sayfamıza bir “şerit görseli” ekleyelim – Bölüm 2

şerit-ribbon Birinci bölüm‘de Adobe Fireworks isimli imaj işleme yazılımını kullanarak bir şerit (ribbon) görseli hazırlamıştık biliyorsunuz. şimdi sıra bunu bir web sayfasına yerleştirmeye geldi. ikinci bölüm olan bu bölümde ilk önce web sayfamıza bir kutu ekleyeceğiz. Ondan sonra bu kutunun tam sağ-üst köşesine şerit görselini yerleştireceğiz. Hem bu işlemleri yaparak CSS ve HTML konularında birazcık pratik de yapmış olacağız. Sözü daha fazla uzatmadan hadi başlayalım

1. HTML kodları

En basit haliyle web sayfamızı oluşturan kodları altta görebilirsiniz:

<html>
<head>
<title>eburhan şerit Uygulaması</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>

<div id="kutu">
	<div id="serit">eburhan</div>
</div>

</body>
</html>

Başta da belirttiğim üzere önce bir tane kutu ekledik. Ve bu kutu içerisine de şerit görseline ait olacak bir DIV alanı açtık. Bu alan içerisine, şerit görseli üzerinde yazılı olan yazıyı da yazmanızı erişilebilirlik açısından öneririm. HTML kodlarıyla işimiz bu kadar. şimdi asıl önemli olan CSS kodlamaya geçelim.

2. CSS kodları

ilk önce en dışta yer alan kutuyu biçimlendiren kodlara bakalım:

div#kutu {
	position: relative;
	width: 400px;
	height: 200px;
	padding: 15px;
	background-color: #fff;
	border: 1px solid #ccc;
}

Kutuyu biçimlendirken dikkat etmeniz gereken en önemli şey, kutunun “position” değerinin “relative” olmasıdır. şimdi de şerit alanımızı biçimlendiren kodlara gözatalım:

div#serit{
	position: absolute;
	top: -3px;
	right: -3px;
	width: 146px;
	height: 87px;
	text-indent: -9999px;
	background: url(serit_eburhan.png) 0 0 no-repeat;
	/* IE 6 için saydamlık probleminin çözümü */
	_background: transparent;
	_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='serit_eburhan.png', sizingMethod='scale');
}

“serit” isimli alanımızın “position” değerinin “absolute” almasına ve “top” ile “right” değerlerinin de “-3px” olmasına dikkat ediyoruz. Ayrıca alan içerisinde yazdığımız yazının görünmemesi için de “text-indent” özelliği atıyoruz. Dosya adı “serit_eburhan.png” olan şerit görselini de bu alan içerisine bir arkaplan olarak yerleştiriyoruz. Arkaplan olarak yerleştirmemizin sebebi, IE 6′daki saydamlık probleminden kurtulmaktır.

3. Bütün kodlar birarada

1. ve 2. adımlarda yazmış olduğumuz HTML ve CSS kodlarını birleştirelim ve toplu halde gözatalım:

<html>
<head>
<title>eburhan şerit Uygulaması</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
div#kutu {
	position: relative;
	width: 400px;
	height: 200px;
	padding: 15px;
	background-color: #fff;
	border: 1px solid #ccc;
}
div#serit{
	position: absolute;
	top: -3px;
	right: -3px;
	width: 146px;
	height: 87px;
	text-indent: -9999px;
	background: url(serit_eburhan.png) 0 0 no-repeat;
	/* IE 6 için saydamlık probleminin çözümü */
	_background: transparent;
	_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='serit_eburhan.png', sizingMethod='scale');
}
</style>
</head>
<body>

<div id="kutu">
    <div id="serit">eburhan</div>
</div>

</body>
</html>

Bu kodların ekran görüntüsü alttaki gibi olacaktır:

sayfayı görmek için ekran görüntüsünün üzerine tıklayın…

Hepsi bu kadar mı?

Belki yukarıdaki ekran görüntüsü sizi tatmin etmemiş olabilir ama kutu içerisine yazı ve farklı bir görsel ekleyerek çok daha tatminkâr sonuçlar elde edebiliyorsunuz, emin olun. Ben örnek olması açısından bir sayfa hazırlamıştım. Aşağıdaki ekran görüntüsünden bakabilirsiniz veya demo sayfasından inceleyebilirsiniz.

9 yorum var

brkzn 10 Temmuz 2009 11:34

Tebrikler Erhan. Yine nefis bir yazı hazırlamışsın.
Volkan Görgülü 10 Temmuz 2009 12:32

Paylaşımlarını takip ediyorum, emeklerin için teşekkür etmek istedim.
mustie 10 Temmuz 2009 13:00

süper dostum eline sağlık, e-ticaret sitelerinde epey kullanılıyor …
Erhan 10 Temmuz 2009 14:27

Teşekkürler arkadaşlar.

@mustie
Evet, özellikle e-ticaret sitelerinde sıkça görebiliyoruz. Zaten bu yüzden demo sayfasını da bir e-ticaret sitesine aitmiş gibi hazırladım
TeknoMobi 10 Temmuz 2009 23:22

Güzel bir anlatım. Teşekkürler!..
yakuter 11 Temmuz 2009 16:51

Gayet başarılı bir makale, ellerine sağlık
Muhammed Taha ARDAL 14 Temmuz 2009 20:37

Çok güzel bir anlatım.Birilerinin Fireworks’u kullanması güzel;)
joyologo 28 Ağustos 2009 00:15

güzel bir paylaşım, çok teşekkürler..
fırat 28 Ağustos 2009 12:33

bunu wordpressde nasıl kullanırım..

eburhan.com