Fatih Hayrioğlu'nun not defteri » kapsayamama-sorunu

PSD’den HTML’e – fanatikmarslar.com Sitesinin Kodlaması II

fatih.hayrioglu — Tue, 05 Jan 2010 23:09:23 +0000

Ana Sayfa Kodlaması

Bir önceki makalemde sizlere kodlamaya başlamadan önceki süreci anlattım. Şimdi sizlerle sitenin Ana Sayfasını nasıl kodladığımı anlatmaya çalışacağım. Bu makaleye yazacağımı düşünerek kodlama yaparken notlar tutmuştum, bu makale biraz da o notların derlemiş hali şeklinde olacaktır.

I -Kodlama Öncesi Hazırlıklar
II – Ana Sayfa Kodlaması (bu sayfa)
III – Alt Sayfaların Kodlaması (yayına hazırlanıyor…)

İlk olarak site ardalan resmini jpeg olarak kaydediyorum. jpeg seçmemin nedeni Adobe Phoshop’da "Save for Web.." ile kaydederken en küçük boyut ve en iyi görüntüyü vermesidir. Resimleri kaydederken eğer az renk varsa gif, çok fazla renk varsa jpeg kaydediyorum, son zamanlarda png’yi deniyorum ara sıra. Ardalan resmi biraz farklı bir yapıya sahip tekrarlayan kısmı biraz geniş olduğu için geniş kesmek durumunda kaldık. Ardalan resmini body’ye atıyorum.

Sayfa ve site sabit bir genişlikte ve ortalı olduğu için ana bir kapsül(anaKapsul) için alıyorum. katmanı kapattığım yere bir not düşüyorum ki nerede bittiğini bilelim.





FanatikMarşlar.Com

İE6 ile bazı sorunları yaşamamak için yorum satırlarını biraz daha farklı kodluyorum. Detay için IE6′un Tekrarlayan Karakter Sorunu makalemi okumanızı tavsiye ediyorum. Zamanla alışkanlık haline gelen bu yorum kodunu Adobe Dreamweaver’da Snippets‘e ekledim böylelikle daha kolay oluyor eklemesi.

Şimdi sayfayı ortalamak için css kodumuzu yazalım. Açalım fanatikmarslar.css dosyasını ve yazmaya başlayalım.

/************************************************** genel tanimlar */
body{ background:url(../images/ardalan.jpg) 0 0 repeat;}
	#anaKapsul{width:990px; margin:20px auto; background:#fff url(../images/ust_ard.gif) 0 0 no-repeat;}

Ayrıca sayfa kenarları oval bunları ardalan resmi olarak anaKapsul ardalan resmi olarak tanımlayabiliriz.

Üst Alanın Kodlaması

Eskizdeki gibi sayfayı belli bölümlere ayırarak kodluyorum. ustAlan tanımlamasını yaparken kendi genel standart isimlendirme sistemimi kullanıyorum. İsimlendirme yapılırken ilk harf küçük sonraki baş harfler ayrımı kolaylaştırmak için büyük ve bitişik yazılır. İsimlendirme ve kod yazma düzeni hakkında daha ayrıntılı bilgi için CSS kod Yazma Düzeni makalemi okuyunuz.

Logo ve Banner alanı

Logo ve yanındaki banner alanını kodlamaya başlarken bu iki alanı bir satır gibi düşünerek bir katman içine alıyorum. Bu katmana logoBannerAlani adını veriyorum. Her satırı böyle kapsayıcı bir katman içine almak bize bir çok yönü ile kolaylık sağlayacaktır. Logoyu sola yaslıyoruz ve üstten 14px yukarı çekiyoruz(logoyu yukarı çekerken eksi margin de kullanabiliriz ancak ie6 sorun yaşamayalım diye position ve top özellikleri yardımı ile yukarı çektik). Banner’ı logonun yanına koymak için float:left ve genişlik tanımı yapıyoruz ve logo ile arasındaki mesafeyi ve yukarıda mesafeyi ayarlamak için kenar dış boşluğu mesafelerini(margin) tanımlıyoruz.

HTML kodu

CSS Kodu

#logoBannerAlani{margin-bottom:10px;}
    #logo{float:left; width:226px; position:relative; top:-14px; left:6px;}
    #ustBanneralani{float:left; width:728px; margin:14px 0 0 16px}

Menü ve Arama Alanı

Menü ve arama bölümünü kodlarken menü alanının genişleyebileceğini düşünerek. Arama alanına float:right tanımı menü alanına float:left tanımı yapıyoruz. Arama alanı genişliğini tanımlarken menü alanı genişliği değişebileceği için genişlik tanımlamıyoruz. Menü alanını listeler(ul) ile kodluyoruz(ul) liste elemanlarını yan yana dizmek için ul li ye float:left tanımı yapıyoruz. "Sesi Kapat" flash olacağı için bu bölümün yazı tipi özelliklerini tanımlamadan geçiyoruz, diğer linklerin tanımlarını yapıyoruz. Arama kısmında dışa arama alanı ardalan resmini atıyoruz. input alanı ve button alanı ekliyoruz. Niye button kullanıyoruz input type="submit" kullanmıyoruz derseniz. type="submit" elemanına direk erişemediğimizden. input ve button elemanlarımıza float:left ve genişlik tanımı yaparak yan yana koyuyoruz ve yine yorum kodlarımızı ekliyoruz.


    
        
        
    
    
        Sesi Kapat
        Giriş Yap
        Sen de Katıl!
        Fanatik Marşlar Nedir?

Büyük Resim

Büyük resmin olduğu kısmı ve bu resmin üzerindeki “Tezahürat Gönder” butonunu kodlarken; Büyük resmi bir katman oluşturup bunun ardalanına koyup tezahürat gönder düğmesini de alt ve sağdan 21px mesafede koymak için büyük resmi ardalanına atadığımız katmana position:relative tanımlıyoruz ve düğmeye position:absolute, bottom:0 ve right:21px tanımı yapıyoruz. ie6′da alttan 1px kadar fazlalık vardı bu durumda ie6 özel kodu ile aştım. ie6 için bottom:-1px; tanımı yaptım. Tarayıcılar için özel kodlar hakkında detaylı bilgi için tıklayınız

Önemli Sözler

Önemli sözler kısmı beni biraz düşündürdü. Kodlarken bu alanı normal akış dışına çıkarmalıydım. Bunun için position:relative tanımı ve genişlik ve yükseklik tanımı yaptım. Ana kapsayıcı katmanın dışına çıkarmak içinde eksi left ve margin-right değeri verdim ve oldu.


	"Real Madrid'den korkmuyoruz"Didier Deschamps

İçerik Alanının kodlaması

Ana Sayfa içerik alanını üç kolona ayırıyoruz. Sol, orta ve sağ kolon.

Sol İçerik Alanının Kodlanması

Sol kolona genişlik ve float tanımı yaparak yerleştiriyoruz.

Başlıklara h1 ile tanımlıyoruz ve özelliklerini veriyoruz.

Html kodu;


    Tezahürat Ligleri
    .....

CSS kodu;

#solIcerikAlani{float:left; width:200px; margin-right:20px}
	#solIcerikAlani h1{margin-left:10px}

Lig Menüsü

Lig menüsünü her zamanki ardalan kaydırmaca yöntemi ile kodluyoruz. ul listleri ve her liste elemanına ilgili id isimlerini veriyoruz. Daha sonra bu adlandırdığımız öğelere backgroud-position ile ilgili resimlerini atıyoruz. Metodun genel mantığı tek bir resim üretip öğelere farklı background-postion değeri ile kendi background’unu vermek. Metot ve uygulama hakkında detaylı bilgi almak için basit menü yapımı makalemi okuyunuz.

HTML Kodu


    Turkcell Super Lig
    Bank Asya 1. Lig
    Diğer Ligler
    Dünyadan Tezahüratlar

CSS Kodu

ul#ligMenu{margin-bottom:10px}
    ul#ligMenu li{ background:url(../images/lig_menu.gif) 0 0 no-repeat;}
    ul#ligMenu li a{text-indent:-9999px; display:block; margin-bottom:1px; width:200px; height:45px; }
    ul#ligMenu li#superLig{ background-position:0 0;}
    ul#ligMenu li#birinciLig{background-position:0 -46px;}
    ul#ligMenu li#digerLigler{background-position:0 -92px;}
    ul#ligMenu li#dunyadanTezahuratlar{background-position:0 -138px;}

Zirvedeki Taraftarlar

Zirvedeki taraftarlar kısmını tablo ile kodlayacağız.

CSS ile kodlama yaparken bazılarının yanlış anladığı bir nokta vardır. Katmanlarla kodlama yaparken hiç tablo kullanmamalıyız yanılgısına düşer bazı arkadaşlar. Aslında durum böyle değildir. Anlamalı kodlama açısındanda sakıncalı olan bu anlayış yanlıştır. HTML sayfalarımızı oluştururken her elemanın ilgili etiketleri ile kodlamalıyız. Bu anlaşılabilirlik ve anlamlı kod yazma açısından önemlidir ve karmaşayı engeller. HTML sayfalarını oluşturmak için çeşitli yöntemler vardır bizi sonucu götüren ancak biz en uygun olan yolu bulmalıyız ve kodlamayız. Peki en uygun yöntem hangisidir buna nasıl karar vereceğiz noktasında kalırsak. Her zaman standartlar ve anlamlı kodlama yolunu seçmeliyiz.

Tabloyu kodlarken sayı kolonu için bir sınıf tanımlayıp özelliklerini atarız ve kolonu seçip bu sınıfı tüm hücrelere tanımlarız. Bu tüm hücre seçip sınıf atma işini dw ile kolayca yapabiliriz. Ayrıca tablo geneline yazı tipi ve renk tanımı yaparak genel tablo özelliklerimizi atadıktan sonra isim kısmı ve puan kısmını büyük yapmak için bu kısımları normal içerikten ayırmamız gerekir. Ben bunun için bu alanları strong etiketi içine aldım. Böylece direk html elemanına etki edebilecek ve istediğim değerleri atayabilecektim.

Not: Kodlarımı yazarken hep mümükün oldukça html elemanlarını(p, strong, em, span, ul, li) kullanmaktan yanayım. Çünkü html elemanlarını tarayıcılar daha hızlı yorumlayacaktır, ayrıca yalın html kodumuzda daha düzenli duracaktır.

Logoları bir resim olarak hazırlayıp css sprite(ardalan kaydırma) yöntemi ile bu logoları kodladık.


    1
    Trabzon
    Fatih Trabzon
    28

Tablonun tek satırını incelersek kod yapısını anlayacağız. tr’deki farkliSatir sınıfı bir satırın açık bir satırın daha kapalı bir renk tanımı yapmak içindir. İlk hücremiz 1′den 10′a kadar sayılar olacağı kolon bu sayıların her biri aynı özellikleri taşıdığı için bu kolondaki hücrelere taraftarSayi sınıfını tanımladım ve özellikleri bu sınıfa atadım.

Site genelinde kullanılacak logoları düşününce bunları bir resim dosyası olarak hazırlayayım ve ardalan kaydırma metodu ile çağırayım diye düşündüm. CSS Sprite adı verilen bu tekniği bir çok yerde kullanıyoruz artık. Metodun çıkış amacı bir çok resmi ayrı ayrı sayfada çağırınca her istek bir zaman aşımına neden oluyor, resmi teke indirdiğimizde tek resim ve tek istek olduğu için bu zaman aşımından kurtulmuş oluyoruz.

table#taraftarZirveTablo td div{ display:block; width:32px; height:32px; text-indent:-9999px; background:url(../images/takim_logolari.gif) 0 0 no-repeat}
....
....
 div#icerikAlani div.logoTrabzon{ background-position:right -105px}
 div#icerikAlani div.logoGalatasaray{ background-position:right -69px}
 div#icerikAlani div.logoFenerbahce{ background-position:right 2px}
 div#icerikAlani div.logoGaziantep{ background-position:right -574px}
......

Logoları daha optimum kodlamak için iki farklı tanım ile aynı kodun tekrarını önledik. table#taraftarZirveTablo td div tanımında genel özellikleri tanımladık, daha sonra her takım logosu için sadece background-position tanımı yaptık, böylece her takım için birbirini tekrarlayan kodları tek elde topladık ve kodumuz daha az oldu.

Sol kolonda son olarak "Takımını Destekle!" ve "Takip Et!" kısımlarını kodladık. Ben sitede toplu olarak iki adet resim toplama(css sprite) tekniği uyguladım. Birincisi yukarıda anlattığım logolar için diğeri ise sitedeki sprite tekniğine uyacak diğer resimler için.

yukarıdaki resim site genelinde uyguladığım sprite tekniği sonucu ortaya çıkmıştır. CSS Sprite tekniği hakkında genel bir makale ayrıca yazacağım, ama burada da yeri geldikçe metot hakkında bilgi vereceğim. "Takımını Destekle!" ve "Takip Et!" kısımları başlıkları ve resimleri olan kısımlar, bunların sabit genişlik ve yüksekliği olduğu için CSS Sprite’a en uygun alanlar oldular. Genişleyebilir alanlarda sprite tekniğini kullanırken daha dikkatli olmalıyız.

HTML kodu

Takımını Destekle!
Sende tezahürat gönder takımını Tezahürat Ligi'nde Şampiyon yap!
Takip Et!
Fanatik Marşları Twitter'da takip edin

CSS kodu;

a#tezahuratgonderBanner{ background:url(../images/genel_resim.gif) 0 -88px no-repeat; width:188px; height:88px; display:block; text-indent:-9999px; margin:0 0 10px 10px}
a#twitterTakip{background:url(../images/genel_resim.gif) 0 -176px no-repeat; width:175px; height:50px; display:block; text-indent:-9999px; margin-left:10px}

Böylece sol kolon kodlamasını bitirdik.

Orta İçerik Alanının Kodlanması

Orta içerik alanının genişlik ve float tanımı yapıyoruz.

#ortaIcerikAlani{float:left; width:440px; margin-right:20px}

Sonra üstteki resmi ekliyoruz.

Sonra Lig Tablosunu kodlamaya başlıyoruz.

Lig Tablosu

Lig Tablosu içeriğini bir tablo yapacağız. Üst ve alttaki oval kenarları ayrı bir katmana koyup, ardalan resmi olarak kodlayacağız. Peki resim değilde niye ardalan resmi olarak koyduk. Ardalan resimlerini tek bir resim şeklinde hazırlayıp kodlarken iki ayrı resim gibi kullanabiliyoruz. Ancak resim olarak hazırlasa idik, iki ayrı resim hazırlamak ve eklemek durumunda olacaktık, buda daha fazla http isteği demek oluyor.

div#ligTabloUstu{ display:block; text-indent:-9999px; width:440px; height:5px; background:url(../images/puan_tablosu.gif) 0 0 no-repeat}
....
div#ligTablosuAlti{display:block; text-indent:-9999px; width:440px; height:5px; background:url(../images/puan_tablosu.gif) 0 bottom no-repeat}}

Tabloyuda bir katman içini alıp kenar boşluğunu katmandan vereceğiz. Bu kenar boşluklarını tablo içindende verebilirdik, ancak tablomuz işlevi dışında kullanmış olurduk, tablo sadece lig tablosu amacı ile kullanmak daha anlamlı.

div#ligTabloKapsul{width:440px; padding:0 5px; background-color:#f3f3f3; voice-family: "\"}\""; voice-family:inherit; width:430px;} html>body div#div#ligTabloKapsul{width:430px;}

Yukarıdaki kodlamada fazladan kodlar dikkatinizi çekmiştir. Kutu modeli sorunu olarak Türkçeleştirdiğimiz "box model hack" yöntemidir bu. Bir elemana hem genişlik hemde yatay ve dikey padding veya kenar çizgisi atadığımızda(her ikisini atadığımız durumlarda da) ie6 ve diğer tarayıcılar arasındaki yorumlama sorununu gidermek için kullandığımız bir yöntemdir. Ayrıntılı bilgi almak için http://www.fatihhayrioglu.com/kutu-modeli-sorunlari-ve-cozumleri/ inceleyin.

Tablomuz standart bir tablo en sağdaki kolonumuz sayıları içeren farklı renk ve boyutta rakamlar içeriyor. Birde her satırın altında gri bir kenar çizgimiz(border) var.

En sağ kolon için bir sınıf tanımı yapıp kolon boyunca bunu uyguluyoruz.

table#ligTablosu td.sayi{font:bold 18px Arial, Helvetica, sans-serif; color:#acd1e1}

Her satırın altındaki kenar çizgisini atamak için ilk olarak (tr) elemanına tanımladım ancak burada ie6 ile sorun yaşadım. Çözüm için tıklayınız. Bu detay sayfasındaki makaleyi burada yaşadığım sorundan sonra yazdım. Genelde makalelerim sorun-çözüm makaleleri böyle çıkıyor. Bir sorun ile bir kaç defa karşılaştıktan sonra çözüm ve önerilerini siteye yazıyorum. Hem aklımda kalmış oluyor hemde bir daha karşılaştığımda çözümü nerede bulacağımı biliyorum. Tabi birde insanlarla paylaşıp aynı sorunu yaşayan insanlara yardımcı olmak gibi güzel bir yanıda var.

table#ligTablosu{border-collapse:collapse; }
table#ligTablosu td{padding:1px 2px; font:14px Arial, Helvetica, sans-serif; color:#828282; border-bottom:1px solid #d5d5d5;}

En son satırda kenar çizgisi olmayacağı için son satıra bir sınıf atayıp kenar çizgisini kaldırdım.

table#ligTablosu tr.enAlt td{border:0}

Ayrıca tablo baş kısmı için içerikten farklı tanımları yaptım (table th)

table#ligTablosu th{font:bold 14px Arial, Helvetica, sans-serif; color:#000; padding:5px 2px}

Takım Adı ve Armaları

Bu tablodaki takım adı ve logoları için sol kolonda yaptığımıza benzer kodları kullanıyoruz. Bunu yukarıda sol kolona ait toplu kodlarda görebilirsiniz. Aynı tanımlar olduğu için sadece virgül ie yanına seçiciyi ekledik.

div#icerikAlani div.logoWerderBremen, a.WerderBremen{background-position:right -1440px}

görüldüğü gibi div#icerikAlani div.logoWerderBremen kısmı ile a.WerderBremen kısmına aynı tanımlar yapıldığı için virgül ile ayrılmıştır. Böylece daha kısa kod ve daha optimize kodlar elde edilmiştir.

Sol kolonda kullanmadığımız ama burada lazım olan aşağıdaki kodlarıda ekledik.

a.takimLogo{ display:block; background:url(../images/takim_logolari.gif) right 0 no-repeat; padding:8px 30px 8px 0; color:#0c2b90; text-decoration:underline}
a.takimLogo:hover{text-decoration:none;}

Sağ İçerik Alanının Kodlanması

İçerik alanı 3 kolonlu yapının sonuncu kolonuna (sagIcerikAlani) ismini verdik ve diğer kolonları yanında durması için genişlik tanımı ve float:left tanımı yaptık.

#sagIcerikAlani{float:left; width:300px}

İlk olarak banner alanını hazırlıyoruz. Normalde ben buraya resmi direk koyabilirdim, ancak banner flash ise ve buraya javascript ile eklenecekse bir id’ye ihtiyaç duyulabilir diye, bir katman içine alıyorum resmi.

Not: Bir HTMLci, daha cancanlı isimlendirme ile Arayüz Kod geliştiricisi sadece kod yazmak ile kalmaz aynı zamanda yazdığın kodun nereye gideceği, neler içere bileceğinide düşünerek kodunu yazmalıdır. Bir bakıma bir programcı gibi düşünerek kodunu daha esnek yazmalıdır.

Kategoriler Kısmı

Kategoriler kısmını blok şeklide kodlayacağım. Her kategoriye bir satır olacak şekilde kodlamak için burada "ul li" listelerini kullandım.


    MarşlarAll the legendary football terrace anthems are here. 
    Eğlenceli TezahüratlarAll the legendary football terrace anthems are here. 
    Şöhretler GeçidiAll the legendary football terrace anthems are here. 
    +18All the legendary football terrace anthems are here. 
    Nostaljik TezahüratlarAll the legendary football terrace anthems are here.

Her öğenin farklı ikonu olduğu için her liste öğesine bir id vereceğiz ve buna göre atamalarımızı yapacağız. Listede bir başlık ve içerik alanı var bu ayrımı sağlamak için başlık kısmını strong etiketi içine alıyoruz.

#sagIcerikAlani ul#lKategoriiler{width:300px; float:left; font-family:Arial, Helvetica, sans-serif; margin-bottom:10px}
ul#lKategoriiler li a{ display:block; background:#eeeeee url(../images/notalar.gif) 0 0 no-repeat; margin-bottom:2px; padding:10px 5px 10px 40px; font-size:12px; color:#000}
ul#lKategoriiler li a:hover{background:#dbdbdb url(../images/notalar.gif) 0 0 no-repeat;}
ul#lKategoriiler li#kMarslar a{ background-position:0 -2px;}
ul#lKategoriiler li#kEglenceliTezahuratlar a{ background-position:0 -72px;}
ul#lKategoriiler li#kSohretlerGecidi a{ background-position:0 -141px;}
ul#lKategoriiler li#k18 a{ background-position:0 -215px;}
ul#lKategoriiler li#kNostaljikTezahuratlar a{ background-position:0 -289px;}
ul#lKategoriiler li a strong{display:block; font:bold 14px Arial, Helvetica, sans-serif; color:#0c2b90}

Videolar

Video kısmında resmi sola yazıları ve oylama kısmını sağa koyuyoruz. Burada oylama alanını css ile kodlarken yine ardalan kaydırma yöntemini kullanıyoruz.

Oylama html kodu

5 adet yıldızımız var birde mevcut durumu gösteren bir li öğemiz. Burada da ardalan kaydırma metodu kullanarak oylama kısmı kodlanmıştır.

ul.oylama{list-style: none; margin:0 3px 3px 3px; padding: 0px; width: 85px; height: 17px; position: relative; background: url(../images/yildiz.gif) top left repeat-x;}
    ul.oylama li{float:left; padding:0px; margin:0px;}
        ul.oylama li a{display:block; width:17px; height: 17px; text-decoration: none; text-indent: -9999px; z-index: 20; position: absolute; background-image:none;}
        ul.oylama li a:hover{background: url(../images/yildiz.gif) left bottom; z-index: 1; left: 0px;}
        ul.oylama li.mevcutOy{background: url(../images/yildiz.gif) left bottom; position: absolute; height: 17px; display: block; text-indent: -9999px; z-index: 1;}
        ul.oylama a.birYildiz{left: 0px;}
        ul.oylama a.birYildiz:hover{width:17px;}
        ul.oylama a.ikiYildiz{left:17px;}
        ul.oylama a.ikiYildiz:hover{width: 34px;}
        ul.oylama a.ucYildiz{left: 34px;}
        ul.oylama a.ucYildiz:hover{width: 51px;}
        ul.oylama a.dortYildiz{left: 51px;}
        ul.oylama a.dortYildiz:hover{width: 68px;}
        ul.oylama a.besYildiz{left: 68px;}
        ul.oylama a.besYildiz:hover{width: 85px;}

Sosyal Alanın ve Alt Alanın Kodlanması

Burada üstteki beyaz oval alanı için fazladan bir katman açıp ona atamaktan ise zaten ekleyeceğiz sosyalAlan’a üstteki kapsayıcı katmanın alt ovalliğini ekleyerek daha az kodlama bu işi çözmüş olduk.

Sosyal Alanın Kodlanması

Sabit genişliği ve yüksekliği olan bir alan ve yan yana dizilmiş öğelerimiz var. Yukarıda bir çok defa uyguladığımız listeler ve ardalan kaydırma metodunu burada da uyguluyoruz.


    
        Sosyal Medya
        RSS
        facebook
        friendfeed
        twitter
        youtube

CSS Kodu

/* sosyalAlan */
#sosyalAlan{width:990px; margin:0 auto; background:url(../images/yatay_ayrac.gif) 0 0 no-repeat; height:71px}
    #sosyalAlan ul{float:right; width:310px; margin:30px 10px 0 0;}
        #sosyalAlan ul li{float:left; background:url(../images/sosyal_medya.gif) 0 0 no-repeat; text-indent:-9999px; margin-right:12px}
        #sosyalAlan ul li#sBaslik{ background-position:0 0; width:114px; height:23px}
        #sosyalAlan ul li#sRSS{ background-position:-125px 0; width:23px;}
        #sosyalAlan ul li#sFacebook{ background-position:-158px 0; width:23px}
        #sosyalAlan ul li#sFriendfeed{ background-position:-192px 0; width:23px;}
        #sosyalAlan ul li#sTwitter{ background-position:-226px 0; width:23px}
        #sosyalAlan ul li#sYoutube{ background-position:-260px 0; width:23px;}
        	#sosyalAlan ul li a{display:block; height:23px;}

Alt Alanın Kodlanması

altAlan kısmına baktığımızda 3 kolonlu bir yapıya sahip olduğunu görürüz. Sabit bir genişliği ve yüksekliği var. Tüm alt kısmı kapsayan bir background resmi var. Bu değerlendirmeleri yaptıktan sonra kodumuzu yazarsak.

#altAlan{ background:url(../images/alt.png) 0 0 no-repeat; width:990px; height:122px; margin:0 auto; padding-top:10px; voice-family: "\"}\""; voice-family:inherit; height:112px;} html>body #altAlan{height:112px;}

Yukarıda bahsettiğimiz gibi bir elemana genişlik veya yükseklik tanımı yaptıktan sonra padding ve/veya border tanımı yaptığımızda kutu modeli sorunu ile karşılaşmamak için farklı bir kod yazıyoruz. Ayrıca ardalan resmindeki geçiş nedeni ile saydam png koymalıyız. Saydam pngler ie6′daki sorununu çözmek için kodumuz

#altAlan{ background:url(../images/alt.png) 0 0 no-repeat; width:990px; height:122px; margin:0 auto; padding-top:10px; voice-family: "\"}\""; voice-family:inherit; height:112px;} html>body #altAlan{height:112px;}
* html #altAlan{background:transparent; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/alt.png', sizingMethod='crop');}
* html #altAlan a, * html #altAlan input, * html #altAlan button{position:relative; z-index:1}

şeklinde olmalıdır. Ayrıntılı bilgi için Internet Explorer 6 için saydam PNG desteği adlı makalemi okuyunuz.

Alttaki logoyu yerleştirmek için genişlik ve float tanımı yapıyoruz. Bu resmide CSS Sprite ile genel resimden çekiyoruz.

#logoAltta{ background:url(../images/genel_resim.gif) 0 -236px no-repeat; width:123px; height:69px; text-indent:-9999px; margin:0 20px 0 10px; float:left;}

Ortadaki linkler ve copyright kısmını liste ve paragraflı bir yapı ile kodluyoruz.


Telif Hakları
İletişim
© 2009 Fanatik Marşlar. Her hakkı saklıdır. Kaynak gösterilmeden kullanılamaz.
Marşlar
Eğlenceli Tezahüratlar
Şöhretler Geçidi
Klasikler
+18
Nostaljik Tezahüratlar

Listeleri yan yana dizmek için li’ye display:inline tanımı yapıyoruz.

#altLinkler{float:left; width:635px; font:12px Arial, Helvetica, sans-serif; padding-top:10px}
#altLinkler p{margin:3px 0}
#altLinkler ul li{display:inline;}
#altLinkler ul li a{color:#0c2b90; background:url(../images/genel_resim.gif) right -312px no-repeat; padding-right:8px; margin-right:5px}
#altLinkler ul li a.sonAltLink{background:none;}
#altLinkler ul li a:hover{text-decoration:underline}

Son olarakta RSS ve e-posta üyeliği kısmını kodluyoruz.


    RSS
    E-posta Üyeliği

Bu gibi durumlarda şöyle bir seçim yapıyorum. Kapsayıcı bir katman içinde tek kullanımlık html elemanları koyarak css kodlamayı daha kolay hale getiriyorum. Burada mesela tek a, tek p, tek input ve tek button kullanmamın nedeni bu.

Sonuç

Bu makaleye kodlama yazarken tuttuğum notlardan yararlanarak hazırladım. Bazı bölümleri hızlı geçmiş, ayrıntısına inmemiş olabilirim, kafanıza takılan veya ayrıntısını öğrenmek istediğiniz kısımları yorumlar kısmında yazarsanız yardımcı olmaya çalışırım. Bir kusurumuz eksiğimiz oldu ise affola.

Örnek kodları görmek için tıklayınız.

Tüm kodları indirmek için tıklayınız.(rar dosyası index.html, images, style ve scripts klasörünü içerir) 388 Kb

Hazırladığımız bu dosyayı ilk makalemizdeki 30 – Musteriye kalsörü içine atıyoruz ve sıkıştırıp gönderiyoruz.

Not: Burada anlattığım kodlar ile yayındaki site arasında ufak tefek farklılıklar olabilir. Ben burada başta benim kodladığım sitenin kodları ve anlatımını yapıyorum.

Bir sonraki makalem Alt Sayfaların Kodlaması ile ilgili olacaktır. görüşmek dileğiyle hoşçakalın.

Sayfa Dibine Yapışık Alt Alanlar(Sticky Footer)

fatih.hayrioglu — Fri, 12 Jun 2009 11:58:39 +0000

Bir çok sitede karşılaştığımız sayfanın dibine yapışık alt kısımları bu makalede anlatmaya çalışacağım. Bunu hiç javascript kullanmadan sadece css yardımı ile yapacağız.

Site içeriğinin az olduğu durumlarda sayfanın alt kısımları normal akış içerisinde ise yukarı doğru kayacaktır ve hoş olmayan görüntülere neden olacaktır. Bu gibi durumları engellemek için sayfamızın alt kısımlarını sayfa dibine yapıştırmalıyız, böylece sayfa içeriğinin az olması ve çok olması durumunda alt kısmın yerini aynı olacaktır.

Bu işi yapmak için bir kaç türlü yöntem geliştirilmiştir, mantık olarak aynı olan bu yöntemlerde farklı tarayıcılardaki sorunlara çözüm bulmak için farklılıklar içerir. Ben bunlarda bazıları çeşitli projelerimde uyguladım, ancak makaleyi yazarken en iyisi hangisi ise onu yazmaya karar verdim. cssstickyfooter.com‘um anlattığı yöntem benim gördüğüm en iyi yöntem.

Kodumuzu yazmaya başlarsak.

XHTML kodu:


    
		Lorem ipsum dolor sit amet

XHTML kodunda dikkate değer olan kısım içerik alanı ve alt alanı iki farklı bölüm olarak kodlamamız. altAlan ve diğer alanları kapsayan bir kapsayıcı katmandan(#kapsul) oluşuyor kodumuz. Bizim yaptığımız örnekte üst alanı ve iki kolonlu içerik kısmını kapsayıcı katman içine alıyoruz.

CSS Kodu

html, body, #kapsul {height: 100%;}
body > #kapsul {height: auto; min-height: 100%;}
#icerik {padding-bottom: 133px;} /* altAlan yukseligi ile ayni olmali */
#altAlan {
	position: relative;
    margin-top: -133px; /* altAlan yuksekliginin eksi degeri */
    height: 133px;
    clear:both;
}

Buradaki 133px tanımına dikkat etmemiz gerekiyor. 133px altAlan yüksekliğidir ve 3 yerde birden aynı değeri kullandığımıza dikkat edeniz.

Kodu incelersek birinci ve ikinci satırda yüksekliklerin tüm alanı kapsaması için farklı tarayıcılar için %100 tanımını yapıyoruz.

3. satırda alta yapışık alan kadar padding değeri vererek içerik kısmının alt kısmın altında kalmasını engelliyoruz.

4-8 satır arasında alt alan tanımlarımızı yapıyoruz. Göreceli konumlandırdığımız alanı içerik alanında padding-bottom değeri ile açtığımız boşluğa yerleştirmek için negatif üst kenar boşluğu değeri veriyoruz.

Bu yöntemde float uygulanmış içerik kısmında tam alanı kapsayamama sorunu ile karşılaşıyoruz. Float uygulanmış alanların kapsayamama sorunu çözmek için http://www.fatihhayrioglu.com/float-uygulanmis-elementleri-tam-kapsayamama-sorunu/ makalemiz anlattığımız yöntemi kullanıyoruz.

.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 */

Bu sınıfı tanımlıyoruz ve içeriği kapsayan(#icerikAlani) katmana atıyoruz.


    
		Lorem ipsum dolor sit amet

Bu yöntemin ryanfait.com’un yöntemine göre en büyük avantajı bence ryanfait.com’un yöntemindeki anlamsız tampon katmanı gibi bir fazla kodlamadan kaçınış oluyoruz.

Örneği görüntülemek için tıklayınız.

Sorunlar ve Çözümleri

- Benim kullandığım projede body ve üstAlan’daki margin-top değeri sorun çıkardı. Bunun yerine padding kullanarak sorunu çözdüm. Üst kısım body’deki margin-top ve margin-bottom tanımları sorun çıkarıyor, bunun yerine padding kullanın.

- Ayrıca yazı tipi boyutunu büyük kullanmak isteyen kullanıcılarda sorun çıkabileceği söyleniyor. Eğer yazı tipi boyutunu piksel(px) vb. kesin değerler ile belirlerseniz bu tip sorunları engelleyebilirsiniz.

- Son olarakta asp.net ile oluşturulan sayfalarda

elemanı ile kapsanan sayfanızda sorun çıkabilir. Bunu engellemek için kodunuzu

	html, body, form, #kapsul {height: 100%;}

şeklinde değiştirmelisiniz.

Kaynaklar

Float Uygulanmış Elementleri Tam Kapsayamama Sorunu İpuçları

fatih.hayrioglu — Mon, 09 Feb 2009 08:18:49 +0000

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 */

#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.

Float Uygulanmış Elementleri Tam Kapsayamama Sorunu

fatih.hayrioglu — Mon, 20 Aug 2007 07:47:44 +0000

Float CSS ile web sayfası kodlamak için en çok kullandığımız özelliktir. Beni bu makaleyi yazmaya iten en önemli etkende float’ın çok fazla kullanılması ve bu sorunla birçok kez karşılaşmamdır.

Sorun; float uygulanmış bir elementi içeren kapsayıcı element içeriğine göre genişlememesidir. Bu sorun zemin rengi/resmi uygulanmış veya kenarlık atanmış kapsayıcılarda daha iyi görünür. Sorun şekil.1′de gösterildiği şekilde kapsayıcı elementin float uygulanmış elementi kapsamamasıdır.

Bu bir hata değildir. Ama sayfalarımızı kodlarken genelde bu durumun meydana gelmesinden hoşlanmayız.

şekil.1 float sorun

Bir örnek yaparsak daha iyi anlayacağız.

CSS kodu:

.kapsul {
    border: 1px solid #000;
    padding: 2px;
}
img {
	float: left;
}

Html kodu:


    
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

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

Floatuygulanan resim div(.kapsul) içindeki resme göre genişlemez. Duruma tersten bakarsakbazen bu görünümü kullanabileceğimiz durumlarda olabilir, yani bu durumu bazı durumlarda kullanabiliriz. Bu durum bir hata değildir. CSS’in birhatası hiç değildir. Biz genelde float uyguladığımız kutuların içeriklerine göre genişlemesini isteriz.

Float özelliğiNetscape1.1 ile gelen bir özelliktir.Eğer kutularımıza kenarlık ataması yaparsak bu sorunu daha iyi görürüz.Biz kutunun içeriğe göre uzamasını yani sonunun temizlenmesini isteriz. .kapsul uygulanan div elementin tüm içeriği kapsaması için sonuna clear özelliği atanmış bir nesne koymalıyız. Bu işlemi farklı yöntemlerle yapabiliriz.

Boş bir elemente clear atayarak çözmek

Geneldekutuların içeriğine göre uzamasını isteriz. Bu sorunu çözmek küçük bir yapısalekleme yapmak yeterli olacaktır.


    
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Buşekilde sorunumuzu çözmüş oluruz ancak bu sorunla karşılaştığımız heryerde bu eklemeyi yapmak zorun kalacağız ve sırf bu düzeltme için boşbir div ekleyeceğiz. Buda mantıklı(semantik) kodlama açısından uygun değildir. Pekibunu başka nasıl çözeriz.

:after ile çözüm

CSS2ile birlikte gelen :after özelliğini kullanarak çözebiliriz. Css(:after) kodu ile bir elementinsonuna bir içerik ekleyebiliyoruz ve bu elemente css komutları atayabiliyoruz.Ayrıntılı bilgi için tıklayınız.Bu özellikten yararlanarak kutunun sonuna bir nokta koyup bu noktayaclear(clear:both) ataması yaparsak sorunumuz çözülmüş olacaktır. Tabi birde bunoktayı görünmez yapmamız gerekiyor, Kutuların sonunda nokta görünmesipek hoş olmaya bilir.

.kapsul:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

Ayrıcadisplay:block koyduk çünkü satır için(inline-level) elementler clear özelliğiatamasını kabul etmiyor. Aslında overflow ile de bu sorun halledilebilir ancakMozilla Firefox’un yeni sürümlerinde bu metot sorun çıkarıyor.

.kapsul:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
/*IE-mac den bu bolumu sakla \*/
* html .clearfix {height: 1%;}
/* IE-mac bu bolumu saklama artik */

Tabibu kod burada kalmıyor çünkü IE ile sorunları var. Normalde IE’nin float uygulanmış elementin tamamı kapsamama sorunu diye bir problemi(bu ilginç bir durumdur) yoktur, ancak float uygulanmış elemente genişlik ve yükseklik tanımı yapılmadığında sorun ortaya çıkıyor. Bunu engellemek için sadece IE/Win gördüğü kapsayıcı elementin yüksekliğine %1 ataması yaparız. Ancak bu kısımı IE/Mac’lerden saklamamız gerek bunun için ters bölme(\) işaretini kullanırız böylelikle IE/Mac sürümü komut satırının devam ettiğini farz ederek bu satırı görmez.

Sıra geldi IE/Mac’de sorunu aşmaya, IE/Mac’deki sorunu aşmak için display: inline-block; tanımlamasını yapıyoruz. Tabi diğer web tarayıcılarının bundan etkilenmemesi için IE/Mac’den gizlediğimiz alana display: block; atamasını eklemeliyiz.

.kapsul:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.kapsul {display: inline-block;}
/*IE-mac de bu bolumu sakla \ */
* html .kapsul {height: 1%;}
.kapsul {display: block;}
/* IE-mac bu bolumu saklam artik */

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

şekil2 float sorununun çözülmüş hali

Bu metot bu sorunun çözümü için en ideal çözümdür. Bu sorunun çözümünde birçok insanın emeği geçmiştir. Doug, Mark Hadley, Matt Keogh, Holly’n John ve Tony Asslet‘a bundan dolayı şükranlarımızı sunarız. thank you guys :D Ayrıca bu konuda Türkçe bir makale yazan dahaiyi.net‘e çok teşekkürler.

CSS3 ile sorunun çözümü

Bu sorunun farkında olan CSS standart geliştiriciler bu soruna kökten çözüm getirmişler. clear-after yeni özelliği sayesinde bu kodlardan kurtulacağız tabi biraz zaman gerekecek bu özelliği kullanmak için. Malum hala uygulamada değil CSS3.0

.kapsul {
	clear-after: both;
}

Yukarıdaki örnekteki gibi tek satırlık bir kod sorunumuzu çözecektir.

Sonuç

Sonuç olarak şunu söyleyebiliriz ki bu sorunu çözmek için bir kaç çözüm yolu mevcut olsada şu an için :after ile çözüm başlığı altındaki kodu kullanmak bizim için uygundur. Ben web sitelerini kodlarken bu sorunla çok karşılaştığım için bir yere not ettim(Macromedia Dreamweaver – Snippets) ve lazım olduğu zaman hemen ekliyorum. Bu şekilde sorun hızlı bir şekilde çözmek mümkün oluyor.