karalamalar

Bu yazı orijinali Max Design'da yayınlanmış olan "CSS Centering - fun for all!" isimli yazının Türkçe çevirisidir.

CSS kullanarak bir içerik bloğunu nasıl ortalarsınız? Bunun için hali hazırda iki metot var ve seçiminizi sayfanızın likit (tarayıcı penceresinin boyutlarına göre boyutları değişen tasarım) ya da sabit genişlikli bir tasarım olmasına göre yapmalısınız.

Likit tasarımlarda ortalama

Likit tasarımlarda içerik bloğunu her iki tarafına da marjin koyarak kolayca ortalayabilirsiniz. Marjinler em, piksel ya da yüzde birimi olarak ayarlanabilir.

Sabit genişlikli tasarımlarda ortalama

Teorik olarak içerik bloğunun sağına ve soluna otomatik marjinler verdiğinizde bloğun ortalanması lazım.

W3C görsel biçimlendirme modeli'ne göre: "Eğer 'margin-left' ve 'margin-right' değerleri 'auto' ise, her ikisi de eşit değer kullanır. Bu da elemanı içerik bloğunun kenarlarına göre ortalar."

Yani bir içerik bloğu şu kurallar uygulanarak ortalanabilir:

Ne varki bazı tarayıcılar otomatik marjinleri gözardı ettiklerinden bu şekilde içerik bloklarını ortalamazlar. Bahsettimiz tarayıcılar arasında şunlar vardır:

• NN4 (Mac ve Win)
• Win/IE4
• Win/IE5
• Win/IE5.5
• Win/IE6 (quirks modda)

Basit iki kural ekleyerek yukarıda saymış olduğumuz tarayıcılardan NN4 haricinde diğerlerinde bu problemi giderebiliriz.

1. body'yi ortala

Her ne kadar bu tarayıcılar otomatik marjinleri göz ardı etseler de "text-align: center" şeklinde bir kuralı hepsi tanır. Bu kuralı body elemanına uygularsak içerik bloğu doğru bir şekilde ortalanır. Yani yeni bir kural eklendi:

2. text-align'ı sıfırla

Yeni kural ile ilgili tek problem, artık sayfadaki tüm elemanlar ortalandı. Bu tümünü ortalama probleminin üstesinden gelmek için yeni bir içerik bloğu ekleyerek "text-align: left" kuralını uygulayalım. Sonuç CSS kodu şu şekilde:

Sonuçlar

İlk örnek sayfa bir içerik bloğunun otomatik marjinler kullanılarak, body ortalanmadan nasıl ortalanacağını gösteriyor.

"text-align: center" olmadan ortalama, örnek sayfası

İkinci örnek sayfa, bir içerik bloğunun otomatik marjinlerle nasıl sayfa içinde ortalanacağını ve aynı zamanda body elemanının ortalanmasını ve içerik bloğunda "text-align: left" kullanımını gösteriyor.

"text-align: center" ve "text-align: left" ile ortalama, örnek sayfası

Çeviriler

Bu makale Rodrigue tarafından Fransızca'ya çevrilmiştir.

Espirili bir dille günümüzde bir web sitesinin üretim aşamasında nelere zaman harcandığını gösteren pasta grafik. Şu adreste buldum, Türkçeye çevirip paylaşayım dedim.

Bir süredir karalamalar.net ile ilgilenemiyordum. Bugün biraz vakit ayırmaya karar verdim ve bir kaç geliştirme/güncelleme yaptım. Artık UTF-8 üzerinden yayın yapıyoruz. Tüm yazıları ve yorumları UTF-8 e geçirmek çok zamanımı alacak diye korkuyordum ama ufak bir kopyala yapıştır işlemi ile çok kolay halloldu. Gerekli tüm dosyaları da UTF-8 formatına çevirdikten sonra etiketleme aşamasında ufak bir problem yaşadım ama bu problem sadece UTF-8 ile alakalı değildi.

İkinci bir değişiklik olarak artık yazılara başlıkları ile ulaşma şansımız var. Eskiden adres çubuğunda http://www.karalamalar.net/?p=69 vb şekillerde gözüken adresler artık http://www.karalamalar.net/kamil-koc-web-sitesini-yenilemis/ şeklinde gözükecek. Arama motorlarının daha iyi indekslemesi ve ziyaretçilerin bir yazıya dönüş yapmak istediklerinde tarayıcıların otomatik tamamlama özelliği sayesinde daha rahat erişebilmeleri için güzel bir değişiklik oldu.

Etiketleme sisteminde ufak bir güncelleme, veritabanında bir kaç iyileştirme çalışması da yaptım ve bir sonraki aşama için hazırım. Muhtemelen bir sonraki aşamaya bir altı ay sonra geçeceğim.

İki ay kadar önce sizlere, tatil planları yaparken Kamil Koç web sitesinde yaşadığım olumsuz deneyimlerden bahsetmiştim. Farkettim ki Google da Kamil Koç'u sorguladığınızda yazmış olduğum yazı birinci sayfada, 5 ya da 6 sırada çıkıyor. Bunun da etkisiyle olsa gerek ilgili yazıya bir çok yorum eklendi. Kamil Koç'un seyahat kalitesi ile ilgili bir yorum yapamam. Çünkü daha önce Kamil Koç ile seyahat yaptıysam bile şu an hatırlamıyorum ama son yazdığım yazıdan bu yana Kamil Koç web sitesinde köklü değişikliker olmuş. İşte bu konuda yazabilirim.

Geçen sefer ilk golü YolKart uygulamasından yediklerini yazmıştım. Rövanş maçı olarak nitelendirebileceğim bu yazıda bu golün karşılığını vermiş sayılırlar. Şu an online sefer sorgulaması için YolKart zorunluluğu bulunmuyor. Rezervasyon ve Satış işlemleri için gerekiyor. Bu da gayet mantıklı. Yeni sitede YolKart Başvuru Formu henüz yapım aşamasında olsa da, 1,5 ay içerisinde tüm sitenin değiştirildiğini göz önünde tutarak geçen seferki kadar acımasız olmamaya karar verdim.

Firefox uyumluluğu ve Sefer Arama sayfasındaki(yeni adıyla Online Sefer Sorgulama) Tarih problemiyle ilgili de gerekli çözümler web sitesinde uygulanmış. Kamil Koç'un yeni web sitesi Firefox ile rahatça gezilebiliyor. Online Sefer Sorgulama Sayfasında, tarih girişi için güzel bir uygulama kullanılmış*. Kalkış yerini seçtiğinizde AJAX kullanılarak Kalkış yerine göre seçebileceğiniz varış yerlerinin listelenmesi, sorguyu gönderdiğinizde yine AJAX kullanılarak sonuçların aynı ekranda dönmesi sefer sorgulama işlemini oldukça kolaylaştırmış. Ekrana dökülen sonuçlardan sefer numarasına tıklayarak da ilgili sefer ile ilgili gerekli detay bilgiye ulaşabiliyoruz.

Farkettiğim bazı ufak ayrıntıları da yazmadan geçemeyeceğim;
İletişim bölümündeki Öneri ve Şikayetleriniz sayfasındaki TC Kimlik No sorgulamalı Form uygulaması yabancı uyruklu vatandaşların öneri ya da şikayette bulunamamasına yol açabilir. TC Kimlik Numarası sorgulaması, formu gönderenlerin gerçek insan olmasını kontrol amaçlı konulan bir uygulama ise daha farklı metotlarla bu doğrulama sağlanabilir*. Sitede bir doküman tipi (Document Type) belirtilmemiş olmasına rağmen kaynak kodlarında bakarak HTML 4.01 ile bir geçerlilik testi yaptığımda 40 uyarı ile karşılaştım. Çok fazla olmasa da umarım yakın zamanda daha geçerli bir kodlamaya geçiş yapılır.

Web sitesinin yenilenmesinde yazmış olduğum yazının ve altına eklenen yorumların ne kadar etkisi olduğunu çok merak ediyorum. Geçen sefer yaptığım gibi bu sefer de Kamil Koç yetkililerine bu yazıyı göndereceğim. Umarım konuyla ilgili bir cevap alabilirim. (Malesef geçen sefer herhangi bir cevap alamamıştım)

Tatil planımızın ulaşım aşamasında, otobüs ile seyahat için çeşitli firmaların web sitelerinden bilgi topluyordum. Ulusoy'un web sitesinden ihtiyacım olan bilgileri aldıktan sonra diğer alternatiflere yöneldim. İkinci tercihim Kamil Koç oldu ve sitelerine girdiğimde sol taraftaki menünün istediğim bölümlere hızlıca yönelmemi sağladığı için ilk başta takdirimi topladı. Fakat ilk dakikalarda attığı bu gol maçı almasına malesef yetmedi.

Yedikleri ilk gol YolKart uygulamasından. Otobüs bilgilerini sorgulayabilmem için YolKart adını verdikleri bir sisteme üye olmam gerekiyormuş. YolKart üyesi olabilmek için de Kişisel bilgilerimden tutun da Meslek bilgilerime kadar bir çok bilgiyi doldurmam gerekiyormuş. Sürekli müşterilerine YolKart üyelik sistemiyle özel avantajlar sağlıyor olsalar sistem gayet makul bir sistem olacak fakat ilk kez kendilerini seçecek bir müşteriye böyle bir dayatma sunmaları beni rahatsız etti. Ayrıca bir günlük otobüs seferlerini sorgulamak için uzun uzadıya form doldurmak hamallıktan başka bir şey değil. Tüm bunların ötesinde kişisel bilgilerimin ne amaçla kullanılacağına dair hiç bir bilgi yok. YolKart nedir? Ne işe yarar? Bu bilgileri neden alıyorsunuz? İşte tüm bunlar Kamil Koç'un yediği ilk golü hazırlayan etkenler oldu.

İkinci gole gelelim. Web sitesi Firefox ile uyumlu değil. YolKart üye başvuru sayfasında istesem de başvuru formunu dolduramayacağımı gördüm. Evet sitenin altında bir ibare var: "Bu site en iyi IE 5.0 ve üzeri versionlarda çalışır." ama ben bu ibareden sitenin diğer tarayıcılarda da çalışabildiğini, IE 5.0 ve üzeri ile daha güzel çalışacağını anlıyorum açıkçası. İçimde ufacık bir istek kaldıysa da karşılaştığım görüntü (birbirine girmiş form elementleri) yüzünden o da yok oldu. Kamil Koç ikinci golü de böyle yedi. (Sonradan farkettim ki sitenin menüsü Firefox'da düzgün görüntülenemiyor. Tıklamama rağmen hiç bir şey olmayan menü seçenekleri meğer sağa doğru başka bir menünün açılması içinmiş. Sayfayı Internet Explorer ile gezdiğim zaman anladım. Internet Explorer ile de menü düzgün görüntülenemiyor. Örneğin Sefer ara/Rezervasyon sayfasında açılır menü sağa doğru açıldığında form elementlerinin altında kalıyor. Web sitesinde düzeltilmesi gereken çok şey var.)

Üçüncü golü ise çok daha küçük bir ayrıntıdan yediler. Sefer ara/Rezervasyon sayfasında Sefer Tarihi geleceğe yönelik olacağına geçmişe yönelin. Gerçekten 2004'deki bir seferi sorgulayan var mı acaba? Benzeri bir çok sitede bu tip bir rezervasyon sayfasında karşınıza çıkacak formda tarih bilgisi otomatik olarak o günün tarihi ile doldurulur. Kamil Koç ise biraz geride kalmış. Siz bir karayolu taşımacılık şirketi olsanız sefer arayacak bir kişinin geçmiş tarihte sefer arayacağını düşünür müsünüz? Muhtemelen hayır. O zaman tarih bölümünde en azından bugünün bilgisinin seçili olmasını beklerim. Muhtemelen planladığım seyahat de yakın gelecekte olacağından içinde bulunduğum yıldan daha eski yılların formda olması bana bir şey ifade etmez.

Geçtiğimiz günlerde bir gazetenin pazar ekinde Kamil Koç hakkında okuduğum yazılar firma hakkındaki görüşlerimi olumlu yönde oldukça etkilemişti. Bugün de tatil planı için araştırma yaparken, araştırmamda ikinci sıradaydı. 3-1'lik skordan sonra artık Kamil Koç'un yeri oldukça aşağılara indi.

Bu yazının bir kopyasını kendilerine de göndereceğim. Bakalım nasıl bir cevap alacağım.