Menüyü geç

 
13 Eyl 2005
5yorum

Balık baştan kokarAnahtar Kelimeler : css, body, id, class

 
Balık Baştan Kokar - body id kullanımı ile kolay güncellemebody id kullanımı ile, dertsiz tasasız güncelleme

Sonunda hangi konuyla başlayacağımı buldum yazılara. Biraz megolomanlık yapmak olabilir, ama cemshid.com’un css tasarımında önemli bir rol oynayan body tag’ı içerisinde id kullanımını anlatmak istiyorum.

Diyelim ki bir şablon dosyanız var, ve sitenizin menüsüde 3 seçenekten oluşuyor.

Kırmızı Bölge seçilmiş resima. Kırmızı
Mavi Bölge seçilmiş resimb. Mavi
Sarı Bölge seçilmiş resimc. Sarı

Her menü kendi yatay sıralanmış altmenüsüne sahip. Ayrıca sayfadaki bütün başlıklar ve kutucuklarda menüdeki renk skalasına bağlı olarak değişiyor.

  1. .kirmizi_kutu{
  2. background:#F00;
  3. color:#FFF;
  4. width:200px;
  5. }

yazdık diyelim ki, aslında doğru bir isimlendirme yapmadık (nedenini bir sonraki yazı da açıklayacağım, söz!) Bu kirmizi_kutu class’ımız bize sadece ilk menüye ait sayfalarda yardımcı olabilecek... İkinci menü seçeneği için, aynı özelliklere sahip, renk özellikleri değişmiş başka bir class yazalım peki..

  1. .mavi_kutu{
  2. background:#00F;
  3. color:#FFF;
  4. width:200px;
  5. }

Eğer hala aynı şeyleri yazmaktan bıkmadıysak ta üçüncü menü için aynı işlemi yapmak durumundayız..

  1. .sari_kutu{
  2. background:#FF0;
  3. color:#FFF;
  4. width:200px;
  5. }

Peki gayet güzel aslında, sadece renkler değişti, classların isimleri değişti. Sorunumuz ne?

Sorun şu ki, bizim sadece bir "kutu" classına sahip bir div'imiz yok, değişik linklerimiz, başlıklarımız, yazı şekillerimiz var. Her bir öğe için 3 farklı renkte class/id yaratmamız gerekli. Üstelik her seferinde bunlar için son derece yaratıcı isimler bulmak zorundayız ki, en çok zorlandığım konu bu'dur benim..

İkinci sorunumuz ise, şablonumuzla ilgili, hatırladınız mı en başta, yazılmış bir şablonumuzun olduğundan bahsetmiştim. Şimdi o şablonu, mavi_sablon.html adıyla kaydedip, bütün class/id'lerin başına "mavi_" takısını ekleyin.

Kırmızı ve Sarı içinde aynı işlemi tekrarlayın (unutmayın sadece 3 menü seçeneğimiz var, Allah muhafaza 7-8 menü seçeneğimiz olsaydı?)

Css dosyamız içinden çıkılmaz bir hal aldı gibi, üstelik başlangıçta 1 şablonumuz varken, şimdi class/id isimleri heryerde farklı 3 şablonumuz var. Dosyalar yapısal olarak birebir olsalarda, class/id isimleri farklı olduğu için her edit ettiğimizde, aradığımızı bulmak için vakit kaybediyoruz..



body id! Yetiş!

Peki ya şöyle yapsak?

  1. <link rel="stylesheet" type="text/css"
  2. media="all" href="yapi.css" />

İlk css dosyamızı html’e iliştirelim,.. Fazla uzaklaşmadan hemen altına da,

  1. <link rel="stylesheet" type="text/css"
  2. media="all" href="renk.css" />

Yazalım.. Aslında son derece açıklayıcı oldu değil mi?

mavi_sablon, kirmizi_sablon ve sari_sablon dosyalarini silelim. sablon.html'imiz baki kalsın ama..




CSS'leri ayıralım


yapi.css dosyası içine

  1. .kutu{
  2. width:200px;
  3. }

yazalım.
E renkler nerde?

renk.css dosyamızı açıp, aşağıdakileri ekleyelim..

  1. body#kirmizi .kutu{
  2. background:#F00;
  3. color:#FFF;
  4. }
  5.  
  6. body#mavi .kutu{
  7. background:#00F;
  8. color:#FFF;
  9. }
  10.  
  11. body#sari .kutu{
  12. background:#FF0;
  13. color:#FFF;
  14. }


Ama ama fakat ama?

E demin 3 kutu için, 3 class yaratmıştık, şimdi 3 kutu için, 2 css dosyası ve 4 class yarattık, hani neresi kolay bunun? Diye veryansın edenleriniz varsa, bunun kolaylığının bir sonraki editlemenizde olduğunu söylemem gerekli. Demin çağırdığımız "body id, yetiş!" dediğimiz kahramanımız olaya dahil oluyor..
sablon.html'imizin body'si ni,

  1. <body id="kirmizi">

diye değiştirip, ışık hızıyla kirmizi_sablon_id.html olarak kaydediyoruz..

Aynı işlemi diğer menü seçenekleri içinde tekrarlıyoruz..

  1. <body id="mavi">
  1. <body id="sari">

Başladığımız noktaya döndük sayılır di mi?
3 html dosyamız, 2 ayrı css’imiz var..

Farkettiyseniz, şablon dosyalarımızın sadece body’leri birbirinden farklı ama. Dolayısıyla bir şablonu editlediğimizde, sadece body içerindeki id’yi değiştirerek, diğer şablonlarıda değiştirmiş oluyoruz. Toplam 3sn. kadar süren bu id değiştirme işlemi, dökeceğiniz göz yaşlarından kurtulmanız demek...

Peki kutumuzun, genişliği 200px değilde, 180px olması gerekti..

Hemen yapi.css’i açıp,

  1. .kutu{
  2. width:180px;
  3. }

yazıyoruz.. Tek bir class'ı değiştirerek, bütün şablonlarımızdaki kutu classlı öğeleri 180px'e eşitledik..

Peki 3. Seçeneğimiz Sarı değilde, Çingene Pembesi oldu.

Eskiden olsa, şablondaki bütün sari yazan yerleri değiştirmemiz, css dosyasındaki bütün class/id isimlerini editlememiz, sonrada renklerle uğraşmamız gerekliydi.

Şimdi ise,

  1. <body id="pembe">

Yazıp, renk.css dosyasına

  1. body#pembe .kutu{
  2. background:#F05;
  3. color:#FFF;
  4. }

Ekleyelim, ta daaa...

Basitçe anlaşılması için sadece renkler üzerinden anlatmaya çalıştım, cemshid.com’un css dosyasına bakarsanız, renkler, background imajları, link renkleri gibi bir sürü öğeye bu yolla eriştiğimi görebilirsiniz..



İlgili Dosyalar

Balık Baştan Kokar Makalesinin Örnek Kodları, .zip 9kb.
Balık Baştan Kokar Makalesi PDF Dosyası, .pdf 454kb.

1.

emremer
cevapla | yukarı

emremer

Eylül 13, 2005 03:14 tarihinde şöyle demiş

aslında zoque den nasıl olmuş diye bakmak için gelmiştim. ama body için değil ancak benzer şekilde bir tag altındaki tüm elamanların aynı anda değişmesi ile ilgli pratik bişiler arıyordum. eline sağlık.

 

2.

Ceyhun Aksan
cevapla | yukarı

Ceyhun Aksan

Eylül 13, 2005 05:05 tarihinde şöyle demiş

Aslında tasarımsal bir örnek ile konu daha da bütünleştirilebilir. Ancak anlatım olarak bir şeyler ifade etmek gerekirse. Diyelim ki birbirinden farklı tasarımların olduğu ancak içeriğin sabit kaldığı bir tasarım istiyorsunuz. Bunlardan birisi şaşalı resimlerin olduğu, ikincisi uyumlu renklerin yer aldığı ancak sade, üçüncüsü ise print için kullanılabilecek bir tasarım. body id ile bunları bir kaç css`e dağıtıp tek bir sayfadan kontrol edebilirsiniz. Yani farklı tasarımlar için farklı sayfalar yerine farklı tasarımlar için style document içerisinde bir kaç ek class ve id size yetecektir.

 

3.

Dd_LynCh
cevapla | yukarı

Dd_LynCh

Eylül 19, 2005 04:10 tarihinde şöyle demiş

Çok güzel bir yazı olmuş. Eline sağlık. Ayrıca site de hayırlı olsun.

 

4.

mk¿
cevapla | yukarı

mk¿

Ekim 19, 2005 12:06 tarihinde şöyle demiş

Eline sağlık.

 

5.

Alico
cevapla | yukarı

Alico

Kasım 18, 2005 10:03 tarihinde şöyle demiş

Sonunda bende Css'ye bulaştım. Son günlerde sürekli bu sitenin reklamı çarpıp duruyordu hayırlı olsun.

Örneğe gelince Ellerinize sağlık Gayet Güzel açıklamışsınız.

 

Yorum Ekle 

*kalın yazı*
_italik yazı_
+altıçizgili yazı+
Gravatar'ı seviyoruz



 

yukarı

Yorum Önİzleme kutusu