‘Margin’ etiketi için sonuçlar

Resim Kullanmadan 1 piksellik Yuvarlak Kenarlı Kutu Oluşturmak

Ekim 20th, 2010 • 7 yorum CSS, Web Standartları, XHTML
Etiketler: , , , , ,

Birçok yuvarlak kenarlı kutu oluşturma tekniği mevcut. Daha önce yuvarlak kenarlı kutuların nasıl yapıldığını anlattım “Yuvarlak Kenarlı Kutular”, ayrıca CSS3 ile gelen border-radius özelliğinden bahsettiğimiz “Yuvarlak kenarlı kutular(border-radius) oluşturmak” makalemizde bahsettik. Şimdide daha farklı belki çok fazla kullanılmayan bir yuvarlak kenar çeşidini nasıl yapacağımızı anlatacağım. Aslında bu birazda göz yanılmasından yararlanarak oluşturulmuş bir yuvarlak kenardır, aslında sağdaki resimde gösterildiği gibi köşe yuvarlak değildir, ancak göze yuvarlakmış hissi vermektedir.

Bu işi aslında resim ile de yapabiliriz, belki daha kolayımıza bile gelir, ancak uygulamadan birçok yerde ve farklı renklerde 1 piksellik yuvarlak kenara ihtiyaç duyunca bu yöntemi tercih ettim.

Yöntemi şöyle anlatabilirim;  bu çözümü üretmek için iki adet içiçe blok-level elemente ihtiyacımız var, dıştaki elemanı üstten ve alttan bir piksel fazlalık eklerken, içteki elemanı sağ ve soldan eksi margin değeri vererek sağ ve solda taşırarak 1 piksellik bir yuvarlak kenar elde ederiz. Bu işlemi iki şekilde yapabiliriz.

Padding ve margin yardımı ile oluşturmak

HTML kodu

<div class="kutu1">
	<p>{ CSS, XHTML ve Javascript }</p>
</div>

CSS kodu 

.kutu1{
	background:#3274D0;
	margin:0 1px;
	padding:1px 0;
}
	.kutu1 p{
		background:#3274D0;
		margin:0 -1px;
		padding:2px;
	}

Örneği görmek için tıklayınız.

Margin ve border yardımı ile oluşturmak

HTML Kodumuz yine aynı 

<div class="kutu1">
	<p>{ CSS, XHTML ve Javascript }</p>
</div>

CSS kodumuz

.kutu1{
	background:#848484;
	border:1px solid #848484;
	border-left-width:0;
	border-right-width:0;
	margin:0 1px;
}
	.kutu1 p{
		background:#d3d3d3;
		border:1px solid #848484;
		border-top-width:0;
		border-bottom-width:0;
		margin:0 -1px;
		padding:2px;
	}

Örneği görmek için tıklayınız.

Butonlarda kullanımı

Bu yöntemleri butonlarımızda da kullanabiliriz.

HTML Kodumuz 

<ul>
	<li><a href=""><span>Bursaspor</span></a></li>
    <li><a href=""><span>Trabzonspor</span></a></li>
    <li><a href=""><span>Kayserispor</span></a></li>
</ul>

CSS kodumuz 

ul{margin:0; padding:0; width:250px}
ul li{ list-style: none; margin-bottom:5px}
	ul li a{display:block; background:#3274D0; margin:0 1px; padding:1px 0; position: relative; text-decoration:none;}
		ul li a span{background:#3274D0; margin:0 -1px; padding:2px; display: block; color:#fff}
	ul li a:hover{background:#fff;}
		ul li a:hover span{background:#fff; color:#3274D0}

Örneği görmek için tıklayınız.

Sonuç olarak yukarıda görüldüğü gibi kolay bir kodlama ile 1 piksellik bir yuvarlak kenar elde ettik. Çok fazla çeşitte 1 piksellik yuvarlak kenara ihtiyaç duyduğunuzda imdadınıza yetişir. Bu kodun güzelliği internet explorer sürümlerinde(6,7,8,9) herhangi bir ek koda gereksinim duymadan çalışmasıdır. Bu yöntem aklınızın bir köşesinde kalsın bakarsınız bir gün lazım olur.

Hadi kalın sağlıcakla.

Kaynaklar

İE kalıtsal margin sorunu: form elementleri ve hasLayout

Nisan 28th, 2010 • 6 yorum CSS, Web Standartları, XHTML
Etiketler: , , , , ,

İnternet Explorer ile bir çok sorun yaşıyoruz genelde ie’nin boyut taramalarında. Bu sorunların kaynağı "hasLayout" olarak adlandırılan ie kabulü. hasLayout hakkında ayrıntılı bilgi için bu siteye göz atın. Microsoft bu tanımlamadaki hatasını kabul etti ve ie8 de "hasLayout" kabulunü bıraktı. Buna da şükür.

Ben genelde bu sorun ile özel textbox alanlarını kodlarken karşılaşıyorum. Okumaya devam edin »

Eksi Margin Kullanımı

Kasım 10th, 2009 • 8 yorum CSS, XHTML
Etiketler: , , , ,

Margin özelliği eksi değer alabilir. Eksi değerler bize tasarımsal olarak farklı uygulamalar geliştirmemize yardımcı olur. Tabi bir çok özellikte olduğu gibi burada da farklı tarayıcılarda bazı sorunlarla karşılacağız.

Eksi margin’li değerler bize görsel olarak avantaj sağlar, kodlamamıza yardımcı olur örneğin esnek yapılı sayfaları düzenlememizde ve bir elemanın çizgileri dışına taşırma işlemlerinde.

Eksi margin kullanımı bir hile değildir, CSS’in desteklediği normal bir değerdir.

Eksi margin bir çok yerde kullanıyoruz. Ancak biraz bilinçsiz kullanıyoruz. Ben burada çizgileri belirleyip ona göre hareket etmeyi düşündüm ve bu yazı ortaya çıktı. Eksi marginleri yakından tanıyalım.

Eksi Margin’i iki yerde uygularız.

  • Sabit konumlandırılmış elemanlarda
  • Float uygulanmış elemanlarda

Okumaya devam edin »

“CSS’e başlamak” kitabı hazır

Şubat 26th, 2008 • 7 yorum Haberler
Etiketler: , , , , , , , , , , , , , ,

CSS'e başlamakUzun süredir üzerinde çalıştığım CSS’e başlangıç kitabımı bitirdim. Aslınada buna bir kitap demek ne kadar doğru bilmiyorum. Tam doğru tanımı; makalelerimin derlenip düzenli hale getirildiği bir e-doküman.

Bu kitap makalelerimi derleyip hazırladığım ilk kitap. İnşallah ikinci kitabıda yazmayı düşünüyorum. Zaman ve imkanlar nispetinde 2. kitapta çıkacaktır.

Kitabı ve kaynak dosyalarını indirmek için tıklayınız.

Kenar Boşluğu(Margin) Çökmesi

Ağustos 6th, 2007 • 14 yorum CSS, XHTML
Etiketler: , , , , ,

Daha önceki makalelerimde devamlı margin kelimesini kullandım ancak bu makaleyi yazarken karşıma margin(marj) yerine Türkçe kenar boşluğunu kullanabileceğimi gördüm. Bu makalede ve sonraki makalelerimde bu şekilde kullanacağım. Makalelerimi yazarken devamlı Türkçe kelimeler kullanmayı tercih ediyorum, ancak bazı kelimelerin karşılılarını bulmakta zorlanıyorum. Neyse asıl konuya geçelim.

Kenar boşluğu çökmesi nedir? Kenar boşluğu nasıl meydana gelir ve nasıl çözülür? Bu makalede bu sorulara cevap bulacağız.
Okumaya devam edin »

14 Mart 2007 Web’den seçme haberler

Mart 14th, 2007 • 2 yorum Haberler
Etiketler: , , , , , , , , ,

  • 50 adet Firefox eklentisi Link, 20 tanede burada sıralanmış. Link
  • EOGallery javascript ile hazırlanmış güzel bir resim galerisi örneği. Link
  • Javascript ve CSS yardımı ile Font kontrolü scripti. Link
  • 71 Adet CSS ile yapılmış menü listesi linklerinin sıralandığı bir sayfa. Link
  • İnternet üzerindeki renk seçim araçlarının kısa açıklması ve linkleri. Link
  • Javascript ile yapılmış güzel örnekler(LightBox, Animasyonlu resim menü, Form Kontrolü, oval kenarlı kutular ve tablo filtreleme). Link
  • 42 tane hazır aksak(faux) kolonlu CSS Planı örneği. Link
  • Margin kullandığımız bazı durumlarda web tarayıcıları arasındaki farklardan yakınırız. Bu hatayı gidermek için yazılmış güzel bir İngilizce makale. Link
  • WordPress’de spam’ı engellemek için 4 adım. Link
  • WordPress "Feed Styler" WordPress RSS beslemelerini düzenlemek için bir eklenti. Link
  • Firefox, IE derken şimdi de Opera kod yazarlarına yardımcı araç olarak “Opera Developer Tools” çıkardı. Link
  • Hasan Yalçın ilk WordPress temasını yaptı. Hayırlı uğurlu olsun. Link

« Önceki Yazılar

Kategoriler

Kitap

CSS'e başlangıç Uzun süredir üzerinde çalıştığım CSS’e başlangıç kitabımı bitirdim. Aslında buna bir kitap demek ne kadar doğru bilmiyorum. Tam doğru tanımı makalelerimin derlenip düzenli hale getirildiği bir e-doküman demek daha doğru olur. Bu kitap makalelerimi derleyip hazırladığım ilk kitap. İnşallah ikinci kitabıda yazmayı düşünüyorum. Zaman ve imkânlar nispetinde 2. kitapta çıkacaktır.