‘float’ etiketi için sonuçlar
Eksi Margin Kullanımı
Kasım 10th, 2009 • 8 yorum CSS, XHTML
Etiketler: eksi-margin, Elastik Web Sayfaları, float, Margin, Sabit-Konumlandırma
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
Float Uygulanmış Elementleri Tam Kapsayamama Sorunu İpuçları
Şubat 9th, 2009 • 14 yorum CSS
Etiketler: float, ipucu, kapsayamama-sorunu, sorun
1- Firefox 3′de form elemenalarının Tıklanamaması Sorunu
Daha önce bir kaç kez bahsettiğim ve web kod yazarlarının birçok zaman karşılaştığı ‘Float uygulanmış elementlerin kapsayamama sorunu’ bugün xpur(Gökhan)’un bir sorusu üzerine bu yazıyı yazma gereği duydum.
Kapsayamama sorunu yaşadığımız katman içinde eğer selectbox var ise Firefox 3′de bu selectbox tıklanabilir olmuyor. Açılmıyor yani
Kodumuz aşağıdaki gibi
.kapsayamamaSorunu: after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.kapsayamamaSorunu {display: inline-block;}
/*IE-mac de bu bolumu sakla \ */
* html .kapsayamamaSorunu {height: 1%;}
.kapsayamamaSorunu {display: block;}
/* IE-mac bu bolumu saklam artik */
sorunu çözümü ise .kapsayamamaSorunu ile :after arasındaki boşluğu kapatmak .kapsayamamaSorunu:after
.kapsayamamaSorunu:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
Küçük bir nokta olsa da zamanı gelince insanın çok zamanını alıyor.
2- Sorunun Kısayolu
Bu konuda hakkında bir başka ipucuda float’uygulanmış nesnelerde bu sorun ile çok fazla karşılaşıyoruz, ben eskiden her bir sorunlu eleman için bu kodu yazıyordum. Sonra bunu bir sınıfa atayıp gerekli yerlerde bu sınıfı kullanmanın daha avantajlı olacağını düşündüm.
.kapsayamamaSorunu:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.kapsayamamaSorunu {display: inline-block;}
/*IE-mac de bu bolumu sakla \ */
* html .kapsayamamaSorunu {height: 1%;}
.kapsayamamaSorunu {display: block;}
/* IE-mac bu bolumu saklam artik */
<div id="icerik" class="kapsayamamaSorunu">
<ul>
<li>
<select>
<option value="-1">Seçiniz</option>
<option value="1">Deneme1</option>
<option value="2">Deneme2</option>
</select>
</li>
</ul>
</div>
<div class="resimAlani kapsayamamaSorunu">
<img src="images/deneme.jpg" width="150" height="80" />
</div>
#icerik ve .resimAlani bu sorun ile karşılaştığımızı düşünelim. Tek tek bu kodu yazmaktansa .kapsayamamaSorunu isimli bir sınıf tanımlayıp sorunumuz ile karşılaştığımız her yerde bu sınıfı tanımlarız. Tek tanımla ile işimizi hallettik.
En çok kullandığım CSS Hileleri(Hack)
Kasım 3rd, 2008 • 24 yorum CSS, Web Standartları, XHTML
Etiketler: clearfix, Dreamweaver, float, hileler, Kutu-Modeli, min-height, snippets
Yaklaşık 3-4 senedir css ile web sayfası kodluyorum. CSS ile web sayfası kodlarken en çok sorun çıkaran konulardan biri farklı tarayıcılar için kod yazmaktır. CSS hileleri ile geçiştirdiğimiz bu farklı tarayıcılara göre kod yazma işi bize aslında CSS ile sayfa kodlama imkanı sunması bakımından önemlidir. Eğer CSS hileleri olması idi biz farklı tarayıcılar için değil belirli tarayıcılar için kod yazmış olacaktık ki bu erişebilirlik açısından ve müşteri istekleri açısından sorun oluşturan bir durumdur.
Başta dediğim gibi 3-4 senedir CSS ile sayfa kodluyorum ve en çok kullandığım css hilelerini burada yazmamın uygun olacağını düşündüm. Çünkü birçok bu işi yeni başlayan arkadaş için önemli bir bilgi olacağını düşünüyorum. Lafı fazla uzatmadan listemiz açıklayalım.
02 Temmuz 2008 web’den seçme haberler
Temmuz 2nd, 2008 • Haberler
Etiketler: aranabilir swf, Atom, BlogEngine.Net, float, Google Sitemap, jquery, js ile resim yakınlaştırma, otomatik önerme, rss
- Asp.net’de otomatik önermeli metin grdi alanları yapmak. Bağlantı
- jQuery ile fare imlecinin konumu almak. Bağlantı
- RSS ve ATOM beslemelerinizi geliştirin. Bağlantı
- jQuery ilerleme çubuğu eklentisi. Bağlantı
- Jquery Kaynakları – mfyz.com Bağlantı
- vandelaydesign’ın Haziran ayı seçtikleri güzel bir liste. Bağlantı
- Adobe swf’leri aranabilme ve indekslenebilme özellikte ekliyor. Bağlantı
- js ile resimlerde yakınlaştırma yapmak. Biraz yavaş çalşıyor. Bağlantı
- float özelliği hakkında ayrıntılı bir bilgi. Bağlantı
- Asp.net, linq ve ajax ile sohbet odası yapmak. Bağlantı
- Linklerimizi ayrı pencerede açmak üzerine güzel bir makale. Bağlantı
- BlogEngine.NET 1.4 yayınlandı! Bağlantı
- 10 adet sıra dışı jquery uygulaması. Bağlantı
- Google SEO için sitemap.xml nedir? – ercanaltug.blogspot.com Bağlantı
01 Şubat 2008 web’den seçme haberler
Şubat 1st, 2008 • 2 yorum Haberler
Etiketler: acidtest3, CSS, Eric Meyer, Firefox, float, Haberler, jquery, line-height, WordPress
- line-height ve menülerde kullanımı. Bağlantı
- Tarayıcı test aracı AcidTest3 artık yayında. Firefox 2(%51), IE7 (%13), Safari3 Beta(%39) ve Opera9.25 (%47) Bağlantı
- Float kullanmadan CSS ile sayfa kodlamak. Bağlantı
- CSS temizleme ve optimize etme araçları. Bağlantı
- Eric Meyer tarayıcıların zaman çizelgesini çıkarmış. Hoş görünüyor. Bağlantı
- WordPress hızını arttırmanın yolları. Bağlantı
- Metinleri kolayca png’ye çevirmek için. Bağlantı
- jQuery ile yapılmış zaman gösterici. Bağlantı
- “Ahmetblog.net – CSS Image Menu 2.0″ Bağlantı
- jQuery form doğrulama eklentisi güncellenmiş güzel özellikler var. Bağlantı
- Firefox Avrupa’da ve genelde yükselmeye devam ediyor. Bağlantı
- Tarayıcı savaşlarında 2009′da neler olur? Bağlantı
Haftalık haberler
Eylül 25th, 2007 • 2 yorum Haberler
Etiketler: ASP.NET, css3.0, Firefox, float, Haberler, Javascript, Web Standartları
- Javascript ile resimlerimize sayfa kıvrımı eklemek. Link
- Asp.net kullanıcılarına javascript ipuçları pdf formatında. Link
- CSS3 ile gelen background-size yardımı ile likit aksak kolon sorunun çözümü. Link
- Profesyonel CSS menü örnekleri. Gerçekten hoş görünüyorlar. Link
- CSS ile soluk sayfa sonu yapmak. Güzel örnek. Link
- Fatih Turan’dan " Internet Explorer’ın Web Standartlarına Uymasını Sağlayın" isimli güzel bir makale. Link
- web tipografisinde bir ipucu paragraf ve listelerin altına kenar boşluğu eklemek hakkında bir makale. Link
- Firefox 2.0.0.7 sürümünü yayınladı. Güvenlik açıkları ve QuickTime sorununu gidermiş.
- Linkleri kısımlara bölüp inceleyelim mi? Linkleri inceleyen bir makale. Link
- Akordiyon menü yeni sürümü çıkmış. Bazı sorunları giderilmiş ve yeni bir kaç özellik eklenmiş. Link
- Güzel bir anlatımla float örneği. Link
- Javascript ile yapılmış hoş bir resimli menü örneği. Link
- WordPress 2.3 ile birlikte gelen etiket bulutu özelliğini kendi günlüğümüze nasıl ekleyeceğiz. Link
- Ajax kullanılan projelerde geri dönme sorununun giderilmesi. Link
- Çok güzel bir XHtml özellik ve tanım listesi. Favorilere ekleyelim. Link
