‘CSS’ etiketi için sonuçlar
Genişliği Belli Olmayan Blok-level Elemanları Yatayda Ortalamak
Haziran 10th, 2011 • 4 yorum CSS, XHTML
Etiketler: Blok-level, CSS, display:table, genişliği belli olmayan, ortalama
CSS ile yatayda ortalamak deyince aklımıza hep genişliği sabit olan alanlar geliyor. Ancak genişliği sabit olmayan elemanları ortalamak biraz daha farklı oluyor.
Genişliği sabit olan blok-level elemanları ortalamak için birçok kaynak var iken genişliği belli olmayan blok-level elemanları ortalamak için çok fazla kaynak bulamıyoruz. Google’da yaptığım aramalarda rastladığım makalelerde 2 yöntem ile karşılaştım. Bu iki metodu sizlerle paylaşacağım, siz kendinize uygun olan metodu uygulayabilirsiniz.
Metot 1 – Yüzde Yöntemi ile Ortalama
Genelde bu yöntemi anlatırken menü örnekleri üzerinden anlatılmış bende geleneği bozmayayım.
<div id="menuKapsulu"> <ul> <li>Elma</li> <li>Armut</li> <li>Malta Eriği</li> </ul> </div>
Alışkın olduğumuz bir menü kodu. CSS kodumuzu ekleyelim. İlk olarak kapsayıcı eleman tanımlarını yazalım.
#menuKapsulu{
float:left;
width:100%;
background:#369;
overflow:hidden;
position:relative;
}
Menü kapsayıcısının sayfayı tam kaplaması için %100 değeri ve float:left değeri atandı.
#menuKapsulu ul{
clear:left;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
left:50%;
text-align:center;
background-color:#990000
}
float:left değeri ile içeriği çepeçevre kapsaması sağlanıyor. left:50% değeri ile menu ortalanıyor. Ancak bu ortalama içeriğin genişliğini içermez.
#menuKapsulu ul li{
display:block;
float:left;
list-style:none;
margin:0 10px 0 0;
padding:10px 0;
position:relative;
right:50%;
}
Buradaki püf noktası; right:50% değeri ile menü genişliğinden dolayı sağa doğru kayan içeriği tam olarak ortalı hale getiriyoruz.
İnternet Explorer 6+, Firefox2+, Safari, Chrome ve Opera destekliyor.
Avantajları
- Tüm tarayıcılar destekliyor.
- Sadece CSS ile çözüm ürettiği için ve javascripte gerek bırakmaması
- Kolay kullanımı
- Farklı tarayıcılar için farklı kod yazımı gerektirmemesi
Dezavantajları
- Kapsayıcı elemana atana overflow:hidden nedeni ile yaşanabilecek olumsuzluklar. Mesela açılır menülerde sorun olur.
- Ortalanacak eleman kapsayıcısı, yani burada ul ortalı olmadığı için background, border ve kendini gösterecek diğer tanımların yapılmaması gerekir. Buda bir dezavantajdır.
Metot 2: display:table Metodu
Genişliği belli olan elemanları ortalarken kullandığımız margin:0 auto tanımını bu sefer genişliği belli olmayan alanlar içinde kullanıyoruz.
HTML kodumuz aynı;
<div id="menuKapsulu">
<ul>
<li>Elma</li>
<li>Armut</li>
<li>Malta Eriği</li>
</ul>
</div>
Ortalanacak alana margin:0 auto ve display:table tanımlarını yapıyoruz.
#menuKapsulu ul{
list-style:none;
margin-left: auto;
margin-right: auto;
display: table;
}
#menuKapsulu ul li{
float:left;
margin:0 10px 0 0;
padding:10px 0;
}
Sonuç istediğimiz gibi, ancak bir sorunumuz varki oda display:table özelliğini İnternet Explorer 6 ve 7. sürümleri desteklemiyor. Peki, ne olacak derseniz bu bir hasLayout sorunu ve çözüm için zoom:1 tanımı kullanmamız gerekiyor.
*:first-child+html #menuKapsulu{
text-align:center
}
* html #menuKapsulu{
text-align:center
}
*:first-child+html #menuKapsulu ul{
display: inline;
zoom: 1;
}
* html #menuKapsulu ul{
display: inline;
zoom: 1;
}
Kapsayıcı kapsüle text-align:center tanımı yapıyoruz sonra listemize display:inline yapıyoruz. text-align:center inline elemanları ortalıyor bildiğiniz gibi. Burada yaptığmızda bu
Avantajları
- Tüm tarayıcılar destekliyor.
- Sadece CSS ile çözüm ürettiği için ve javascripte gerek bırakmaması
- Birinci mettodaki overflow:hidden dan kaynaklana sorun burada yoktur.
- Birinci metotdaki ul ye görsel özellik tanımlayamama sorunu bu metotda yok.
Dezavantajları
- Farklı tarayıcılar için farklı kod yazımı gerektirmesi
Kullandıkça avantaj ve dezavantajlarını daha iyi göreceğiz.
Kalın sağlıcakla.
Kaynaklar
- http://css-discuss.incutio.com/wiki/Centering_Block_Element
- http://www.solstice.co.il/blog/2008-02-26/horizontally-centering-content-dynamic-width-css
- http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support
- http://haslayout.net/css-tuts/Horizontal-Centering
- http://www.katcode.com/css-horizontally-centering-div-of-unknown-width/
- http://www.tightcss.com/centering/center_variable_width.htm
Bir Projenin Bana Kazandırdıkları (LiveGO.com)
Aralık 27th, 2010 • 12 yorum CSS, Haberler
Etiketler: CSS, livego.com, makale yazmak, proje
Daha önce çalıştığım ajanslarda yaptığım işlerin bu günlüğü oluşturmamda bir yardımı oldu. Her projede bir şeyler öğrendim ve öğrendiklerimi bu günlük ile sizlere aktarmaya çalıştım. Tüm ayrıntıları olmasada aklımda kalanları sizlere aktarmaya çalıştım ve aktarmaya da devam edeceğim, Allah bize imkan verdikçe.
Bir çoğunuz biliyordur ama ben bilmeyenler için hatırlatayım yaklaşık 9 aydır öncesinde messengerfx.com ve şimdiki adı ile www.livego.com’da çalışmaktayım. Bu proje sürecinde bir çok şey öğrendim ve öğrenmeyede devam etmeyede devam ediyorum. Bu proje dünya çapında olması ve farklı yapısı ile diğer projelerde öğrendiklerimden çok fazlasını bana öğretti. Ajansta çalışırken bir çok proje ile uğraşıyordum burada 9 aydır bir proje ile uğraşıyorum, ancak şöyle bir şey var ki ajansta 2 senede öğrenebileceğim(bazı bilgileri ajansta öğrenme ihtimalide yok) bilgiyi burada 9 ayda öğrendim diyebilirim.
Arayüz geliştiricileri olarak devamlı kendimizi geliştirmek durumundayız bu sadece bizim çabamızla olacak bir şey değil, kendimiz geliştirmek için bize bu olanaklarında sağlanması lazım. Ajanslar bu bakımda çok önemli bir kilometre taşıdır, neredeyse her ay 1-2 proje elinize geçer ve 2-3 ya içinde bitirmeniz istenir. Bu bize hem öğrenme fırsatı verir ve hemde kendimiz geliştirme imkanı verir. Ayrıca benzer işleri yapsakta aynı işleri yapa yapa bir bakıma elimizi hızlandırmış oluruz. Bu nedenle burada naçizane bir tavsiyem var eğer bu meslekte bir yerlere gelebilmek ve bir şeyler öğrenmek istiyorsanız en az çalışma hayatınızın belli bir bölümünü belli bir seviyenin üstündeki ajanslarda geçirmeyi planlayın ve bunun için uğraşın. Niye belli bir seviyenin üstünde diyorum, çünkü kendinizi geliştirmenizde sadece ajansların değil çalıştığınız şirketlerinde çok büyük katkısı vardır. Mesela çatladıkapıspor’un sitesini yapmak ile, büyük bir bankanın sitesini yapmak arasında dağlar kadar fark vardır. Müşterini büyük olması isteklerin büyük olmasıdır ve sizin portföyünüz içinde büyük bir kazanım olacaktır.
Gelgelim benim LiveGO.com ile yaşadıklarıma, baştada dediğim gibi farklı ve geniş çaplı bir olması LiveGO.com’un bana çok şey öğretti ve öğretmeyede devam ediyor. Öğrendiklerimin belli bir kısmını sizlere aktardım ve aktaracağım yazılarımda var. Aktardıklarımın listesi;(Bir çoğunda örnekleri farklı yerden vermek durumunda idim. Çünkü proje daha yayında değildi. Hem örnekleri daha basit vermek anlaşılırlığı arttırıyor)
- CSS ile metinlere gölge vermek
- İE kalıtsal margin sorunu: form elementleri ve hasLayout
- ie6/7′da postion:relative Uygulanmış Elemanlarda z-index Sorunu
- İE6 sorunu: Bağlantı içi elemanlarda hover sorunu
- CSS Seçicilerinin Optimizasyonu
- IE’de Liste elemanları arasındaki boşluk sorunu
- CSS İpucu 28: FireBug yardımı ile daha kolay CSS Sprite Uygulamak
- Kutulara Gölge Vermek (box-shadow)
- overflow ve position:relative kullanımında ie sorunu
- jQuery ipuçları – 3
- display:inline elemanlar arasındaki doğal boşluklar
- Yuvarlak kenarlı kutular(border-radius) oluşturmak
- Float:left ve Text-align:right Atanmş Elemana Metin Yerine Resim Uygulama
- Çift çizgili ayraç kullanımı
- Önden Resimleri(Preloading images) Yükleme Yöntemleri
- CSS İpucu 27: Chrome ve Safari’de textarea genişletme işlevini kaldırma
- IE6 ve IE7′de bağlantılardaki cursor sorunu
- IE’de Textarea’da Enter çalışmıyor
- Resim Kullanmadan 1 piksellik Yuvarlak Kenarlı Kutu Oluşturmak
- jquery ipuçları – 4
Tabi daha yayınlama imkanı bulamadıklarımda var; zamanım olursa aşağıdaki konularıda yazmaya çalışacağım.
- Web Sitelerimizi iPad’e Uyarlamak
- CSS ile iphone, ipad, desktop ve iphone4 ayrımını sağlamak
- FireBug Javascript Sekmesine Göz atalım
- CSS Sprite Tekniği
- Aksak Kolon ve Çözümleri
- Input Prompt
- Livego’yu kodlamak 1 – 2 – 3 – 4 – 5
ve de daha yazacağım belki 10’larca makale daha. Başta dediğim gibi bende öğreniyorum sizlerle paylaşıyorum hepimiz öğreniyoruz.
Bu projede öğrendiklerim bu kadarmı, değil tabi daha fazlası var ama benim not tuttuklarım bu kadarı.
Tanıdığım ve bildiğim bir çok arkadaşım var bu sektörde çalışan her biri yaptıkları projelerden 3-5 bişey akatrsalar ne güzel olur. Memleketteki bilgi eksikliği giderilmiş olur. Lütfen bunu bir ukalalık olarak algılamayın, amacım belki Türkçe içeriğin çoğalması için bir çağrı. Tanımıyorum ve biliyorum gerçekten çok iyi bilgiye sahip insanlar var Türkiye’de umarım onlarda bilgilerini bizlerle paylaşırlar.
Adobe Dreamweaver CS5 Yenilikleri
Ekim 25th, 2010 • 12 yorum Haberler
Etiketler: adobe, cs5, CSS, css3, Dreamweaver, editör, firebug, html, html5
Adobe Dreamweaver editör olarak beğenerek kullandığım bir editör. Burada sizlere yeni sürümü ve yeniliklerini anlatmaya çalışacağım ve son olarakta beklentilerimi ve yeni sürümün bunları ne kadar karşıladığımı yazacağım.
Yeni sürüm ile birlikte gelen yenilikler ;
CSS Inspection
Aslında Live View özelliği bir önce sürümde de mevcut ancak bu sürümden tam anlamıyla geliştirilmiş bu özellik Inspect butonu yardımı ile gerçek zamanlı kodumuza müdahale edebiliyor, düzenleme yapabiliyoruz.
Bu özelliğe biz pek yabancı değiliz Firefox’un FireBug eklentisi bize bu imkanı sağlıyor aslında ve daha fazlasını sağlıyor. Bir önceki sürümde bunu tam ekleyemediklerini söylemiştik, bu sefer tam anlamıyla eklenmiş.
En büyük yeniliklerden birisi bu olmuş.
Adobe BrowserLab
Adobe firmasının daha önce açtığı bu çevirimiçi tarayıcı test etme aracı bu yeni sürüm ile birlikte programdan direk erişilebilir hale getirilmiş. Örnek sayfanızı direk siteye gönderip test edebiliyoruz.
Ben aslında bu konuda pek tatmin olmadım. Çünkü BrowserLab zaten yeterli bir araç değildi. IETester tarzı bir test aracı daha makbul olacak bir araç olabilirdi.
Her şeye rağmen bir artıdır ama eksik olduğu kesin.
CSS Aktik/Pasif
Mevcut kod üzerinde gezerken elemanlara atanan css özellikleri bir tıklama ile aktif ve pasif hale getirme özelliği.
FireBug ile alışık olduğumuz bu özellik yeni sürüm ile birlikte kullanıcının kullanımına sunulmaktadır. Güzel bir özellik.
CSS başlangıç sayfaları
Bir önceki sürüme göre daha fazla hazır sayfa yapısı imkanı sunuyor yeni sürüm bizlere.
Ben bu özelliği kullanmasam da kullananlar için artı bir özellik.
HTML5 ve CSS3 Desteği
Program ilk çıktığında beraber çıkmaması çok büyük bir eksiklikti, ancak sonradan bir güncelleme ile bu paketi eklemeleri hatalarını çok çabuk anlamları güzel oldu. HTML5 ve CSS3 tanımlarını otomatik tamamlama ile ekleyebliyoruz artık.
Hele CSS3′te farklı tarayıcılardaki bu önek karmaşasına bir çzöüm olması güzel oldu.
PHP Tabanlı CMS Desteği
