Bu tasarımdaki ana menüye dikkat ederseniz, siz sayfayı aşağıya doğru ilerletince menünün de sayfayla beraber aşağıya doğru ilerlediğini göreceksiniz. Fakat ne vakit menü sayfanın en üstüne ulaşırsa, o vakit hareket etmeyi kesiyor ve olduğu yere, yani sayfanın en üstüne sabitleniyor. Deneyin ve görün. Siz sayfayı aşağıya doğru ilerletmeye devam etseniz de navigasyon hep sayfanın en üstünde sabit olarak konumlandığından dolayı sayfanın neresinde olursanız olun menü hep gözünüzün önünde oluyor. Fena değil, değil mi?

Aslında bu sistemi K2 teması kullanıyor. Ben de kodu oradan çıkarıp ihtiyaçlarıma göre düzenledim. Gelin size nasıl yapıldığını anlatayım.

Popüler çevrimiçi proje yönetim sistemi Basecamp‘in yapımcıları 37signals‘daki bir makalelerinde web için arayüzler tasarlarken neden direk olarak kağıttan CSS/XHTML’e geçtiklerini, bir tasarım aşamasında Photoshop ve benzeri programlara neden el sürmediklerini anlatmışlar.

En önemli neden olarak Photoshop taslaklarının »tıklanabilir« olmamasının gösterildiği yazıda, grafik editöründe detaylara harcanan sürenin tamamen kayıp zaman olduğu anlatılmış. Ayrıca bu programda metinlerin normal bir HTML sayfasına göre çok farklı olduğuna da değinilmiş. Daha birçok madde sıralamışlar, tamamına buradan ulaşabilirsiniz.

37signals‘daki bu arkadaşlar farklı bir konuya değinmiş olsalar bile, bu konuya dar bir açıdan baktıklarını düşünüyorum. Hoş, eğer siz de sadece kendi projeleriniz için çalışmaktaysanız, Photoshop’ta detaylarla uğraşmak zaman kaybetmek için en kolay yöntemdir. Bu durumda kağıda çizim yapabilir veya favori text editörünüzle işe koyulabilirsiniz; sonuçta taslağınızı CSS/XHTML’e çevirecek, tüm detayları son olarak orada vereceksiniz.

CSS ve XHTML tasarım hayatımızın içine öylesine girdi ki, HTML’de tablo kavramını yavaş yavaş unutuyor olduk. Yine de o zamanlardan kalma bazı özellikleri de özlemiyor değiliz. Onlardan biri de, her web tasarımcısının muhakkak aşina olduğu, çok kolonlu tasarımlarda kolonların boyutlarını eşit tutamama durumu. Ne yazık ki CSS şu anki haliyle yan yana yerleştirilmiş div’lerin boyutlarının içeriğe göre otomatik olarak uzamasına izin vermiyor. En azından bildiğimiz şekliyle ;)

Geçen sene söylediklerimiz gerçekleşti: sIFR, gerçekten de birçok siteye renk kattı. Tasarımcılar hem arama motoru dostu, hem de güzel görünümlü başlıklarla mutlu oladursun, sIFR el değiştirdi ve daha da geliştirilmiş yeni versiyonuyla kendisini beğendirmek için tekrar yollara çıktı.

Yeniliklerden geri kalmamamız için, yeni versiyonun getirdiği gelişme ve avantajlardan bahsedip, yepyeni kullanım tekniğine bir göz atmak istiyorum.

Kısa süre önce Michael Dell’den, ve onu liderliğe taşıyan birkaç özelliğinden bahsetmiştim. Mustafa Özel’in ‘Evet, velet Dell henüz 8 yaşındayken 9 yılını aradan çıkarmak istiyordu’ cümlesiyle anlattığı bir felsefesi daha var ki, Dell’in bu günlere şans eseri gelmediğini adeta kanıtlıyor.

Daha önce ‘Relative + Absolute ile yorum kutusu’ başlıklı bir yazı yazıp, yazı da -ucundan da olsa- CSS’de pozisyonlamaya değinmiştim. Bu yazı da -biraz da gelen istekler üzerine- işe bir daha teknik açıdan bakmak, ve ardından z-index’e rahatsız etmeden dokunmak istiyorum.

CSS3 kulislerde konuşula dursun, tasarımcılar CSS3′ün getirdiği yeniliklerle gelen kolaylıkları kullandıkları günü hayal etmeye devam ediyorlar. Gerçi CSS ve tasarımcı dostu tarayıcımız Firefox bazı yeni özellikleri şimdiden getirmiş olsa da (örneğin: CSS3 ile gelecek olan border-radius özelliğini moz-border-radius olarak Firefox’ta şimdiden kullanabiliyoruz), en azından sorunlu ‘tarayıcımız’ Internet Exporer’ın da bu özellikleri anlayabileceği gün için biraz daha beklememiz gerekiyor.

Peki nedir bu yeni özellikler? Aslında hepimiz bir çoğunu uzun zamandan beri kullanmamıza rağmen, kullanabilmek için ‘bin dereden su getiriyoruz’. Haydi, ileriki günlerde sahip olacağımız bu özelliklerden bazılarına beraber göz atalım.

CSS’i hepimiz seviyoruz, hatta bazılarımız hem birer CSS aşığı, hem de birer CSS profesyoneli olarak yazımızda misafir olarak yer ediniyorlar.

Evet, CSS’i hepimiz çok seviyoruz. Ama bazen kendimizi tutamayıp
öyle tasarımlar yapıyoruz ki, div yapısını inşaa etmeye başlamadan önce kahvemizi önümüze alıp derin bir nefes çekiyor, ve öylece başlıyoruz, zira yaptığımız tasarım misafir tasarımcılarımızı bile zorlayacak türden olabiliyor.

4 adımda “Yeni başlayanlar için CSS layout rehberi”. Daha fazla zaman kaybetmeyip CSS’e geçmek isteyen tasarımcılar için yararlı olabilecek olan bu makale, çok basit bir tasarım iskeletinin tablosuz olarak CSS üzerinde kurulmasını ele alıyor.