ALTI ÜSTÜ TASARIM – Mehmet Doğan

 
yazı arşivi|abonelik|site ve yazar hakkında|teknoloji kimin umurunda|tavsiye ettiklerim|iletişim
 

Gobegi Eritmek 2

01 Mart 2005

Eger diyetin ikinci ve en agir donemine hazirsaniz, hemen devam edelim. Bir onceki yazimda, sayfanin bas kisminda bulunan ogelerinde degisiklik yaptik. Ayrica sayfa icinde bulunan tum tablolara bir id ismi verdik. Buraya kadar CSS’e dokunmadik ama bu yazidan itibaren, CSS ile sayfamizi zayiflatmaya baslayacagiz.

Uzerinde calistigimiz sayfanin BODY elementi bircok gereksiz bilgi ile doldurulmus durumda.

  1. <BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0 ONLOAD="preloadImages();">

Yukaridaki kod icinde gordugunuz tum ozellikler CSS ile tanimlanabilir ve boylece ileri ki tarihde site uzerinde bir degisiklik yapmak istediginizde, uzerine degisiklik yapmaniz gereken yanlizca bir dosya yani CSS dosyasi olur.

Hadi gelin ilk CSS’imizi yazalim bu sayfa icin. Simdilik yazacagimiz tum CSS’i dahili olarak yazacagiz yani sayfanin icine koyacagiz. Isimiz bittiginde ise bu CSS kodlarini harici dosya icinde saklayacagiz. Bunu yapmak icin hemen TITLE elementi altina bir asagida gordugunuz gibi bir CSS komutu acmamiz gerekiyor:

  1. <title>Diyetmax Turkiye</title>
  2. <style>
  3. body {background:#fff; margin:0; padding:0;}
  4. </style>
  5. <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

Iste yukarida gordugunuz CSS kodu icinde hem arka plan rengini hemde BODY elementinde bulunan leftmargin topmargin marginwidth ve marginheight ozelliklerini tanimlamis olduk. Yeni BODY kodumuz su sekilde olacaktir:

  1. <body onload="preloadImages();">

body {background:#fff; margin:0; padding:0;} icindeki background arka plan rengini bize vermektedir. Arka plan rengi icin #fff degerini kullandim ki bunun acilimi #ff ff ff’dir yani beyaz. Eger bir arka plan rengindeki 6 harf ya da sayinin ikili gruplari ayni harf ya da sayidan olusuyor ise benzer harf ya da sayi silinebilir ve bu nedenle #fff degeri #ffffff degeri ile aynidir. #ff00ee degeri #f0e ile aynidir. Baska bir ornek ise #99CC66 degeri #9C6 ile aynidir.

CSS icinde kullandigimiz margin, bir HTML elementinin etrafindaki boslugun miktarini belirlemek icin kullanilir. margin:0 dendiginde bu elementin tum kenarlarinin diger elementlerden uzakligi 0 piksel olacaktir. margin: 0 deyimini ayni zamanda margin: 0 0 0 0; seklinde de yazabilirdim. Buradaki degerler sirasiyla ust (top), sag (right), alt (bottom) ve sol (left) margin degerlerinin 0 oldugunu gostermektedir. Burada ki siralama onemlidir. Yani T (top), R (right), B (bottom), L (left) siralamasi. Bunu daha iyi hatirlamak icin size yardimci olabilecegini inandigim bir kelimeyi ismini aklinizda tutabilirsiniz: TiReBoLu ya da TRaBzonLu.

CSS icinde kullandigimiz padding ise, bir element icindeki verilerin, elementin kenarlarina uzakligini belirten degerdir. Yani bir tablo icindeki yazinin, tablo kenarina olan uzakligini belirleyen degerdir. Yine ornegimizde margin gibi BODY padding degerini 0 verdik. Butun margin kurallari padding icinde gecerlidir. TiReBoLu kurali da dahil olmak uzere.

Gelin simdide FONT degerlerini ve link renklerini CSS icine yerlestirelim. Uzerinde calistigimiz sitedeki hemen hemen her paragraf <font size="2" color=”#666666” face="Tahoma"> degerini tasiyor. Bu demektir ki o paragraf "Tahoma" fontunu kullaniyor, rengi #666666 ve buyuklugu ise 2 olarak belirlenmis. Bu sayfa icinde defalarca tekrar edilmis durumdu. Bu degeri CSS icine koymak gayet basit.

  1. <style>
  2. body {background:#fff; margin:0; padding:0;}
  3. body, p, td {font:normal 90% tahoma, verdana, sans-serif; color:#666;}
  4. </style>

Yukarida ki CSS icinde BODY, P ve TD elementi icinde yer alan tum tekstlerin, stilinin normal (yani italik degil), buyuklugunun yuzde 90 (yaklasik size="2" ye esittir), font tipinin tahoma (eger tahoma yoksa Verdana eger Verdana yoksa herhangi bir sans-serif font) ve renginin ise #66666 olmasi gerektigini belirttik. Font ozelligini CSS icine ekledikten sonra sayfa icindeki butun <FONT> ile tanimlanmis olan HTML elementlerini silebilirim (57 tane). Iste gordugunuz gibi bir satir CSS kodu ile 57 FONT elemetini sayfamizdan cikardik ve ileri ki bir tarihde font tipini degistirmeye karar verirsek, CSS’i degistirmemiz yeterli olacak.

Simdide linklerin renklerinin ve dekorasyonunu belirtecek CSS’i sayfamiza ekleyelim.

  1. body, p, td {font:normal 90% tahoma, verdana, sans-serif; color:#666;}
  2. a:link, a:visited {text-decoration:none; color:#800000;}
  3. a:hover {text-decoration:underline; background:#C4BCFB; color:#000;}
  4. a:active {color:#8000aa;}
  5. </style>

Yukarida ki CSS icinde a:link yani normal linkler, a:visited yani ziyaret edilmis linkler, a:hover yani faremizi linki uzerine getirdigimizdeki durum ve a:active yani link secilmis iken ki stilini tanimladik. CSS icinde gordugunuz text-decoration bize linkin altinin cizili olup olmadigini gosteriyor. CSS linkleri konusunda dikkat edilmesi gereken kural ise yine siralamadir. Siralama su sekildedir: a:link daha sonra a:visited, daha sonra a:hover ve en son a:active gelir. Siralama icin aklinizda tutacaginiz kelime LeVHA olabilir,

Yukarida yazdiklarim belki de bircogunuzun bildigi CSS bilgileri. Gelin biraz da tablo icin nasil kullanacagimiza bakalim.

Onceki yazida tablolara id verdik. Iste simdi o verdigimiz id leri kullanmaya baslayacagiz. Uzerinde calistigimiz sitedeki ilk tablo asagidaki gibi:

  1. <table width="800" border="0" align="center" cellpadding="0" cellspacing="0" id="masthead">

Hemen masthead ile ilgili bir CSS yazalim:

  1. table {border-collapse: collapse;border-spacing: 0px;}
  2. table td { vertical-align: top;}
  3. #masthead {margin:5px 0 15px 0; padding:0; text-align:left; width:800px;}
  4. </style>

masthead tablosu logonun ve ana linklerin bulundugu bir tablo. Bu tablo ve site icindeki diger tablolarin hicbirinde kenar cizgisi olmadigi icin table elementinin kenar cizgi degerlerini 0’a esittledim ve bunu border-collapse: collapse;border-spacing: 0px; ile gerceklestirdim. Bu CSS kurali, onunde bir id ismi olmadigi icin, sayfa ve site icindeki tum tablolar icin gecerli olacaktir. Yine sayfa ve site icinde gecerli olacak bir baska kural ise, tablo hucrelerinin hepsi hucrenin ustune hizalanacaktir (tablodaki valign=”top” degeri) ve bunuda vertical-align: top ile gerceklestirdim. Masthead tablosu icin ise id ismini kullandim. CSS kodu icinde butun id lerin onunde # isareti olmalidir. Masthead tablosunun uzunlugunu 800 piksel olarak tanimladim (width:800px). Yazilari sola hizaladim (text-align:left) ve yazilarin tablonun kenarlarindan uzakligini yani padding degerini 0 olarak verdim. Fakat margin degeri olarak yani tablonun diger elementlerden uzakligini ise usten 5 piksel, sagdan 0, alttan 15 ve soldan 0 olarak tanimladim.
Yeni tablomuzun kodu asagidaki gibi olacaktir.

  1. <table cellpadding="0" id="masthead">

iste bu yeni kod icinde width’i, border’i , align ve cellspacing degerini kaldirdik.

Beni twitter'de takip edebilirsiniz: @mehmet_dogan

   
 
Bu yazı Mehmet Doğan tarafından saat 7:33 civarı yazılıp CSS/XHTML, Web Standartları dosyası içine işlendi.

Bu konuyu/yazıyı tartışan diğer websiteler diğer bloglar
Bu yazıyı okuyup beğenenler şu yazıyı da okudular.
Bu yazıdaki anahtar kelimeleri twitter'de ara ve bul: |
 

1. | 01 Mart 2005 22:18 tarihinde, Ali DEMIR demiş ki:

Selam, bir süredir burayı takip ediyorum ve gerçekten mükemmel bir çizgi çiziyorsun. Bu CSS makalen gerçekten çok yararlı olmuş ellerine sağlık. Nice yeni çalışmalara...
Kolay gelsin...

2. | 05 Mart 2005 15:23 tarihinde, Fatih Ergüven demiş ki:

Elinize sağlık. Bu tür uygulamaların daha fazla yer alması dileğiyle... Kolay gelsin.

3. | 08 Mart 2005 0:05 tarihinde, Ozan Çağlargil demiş ki:

Mehmet yahu bende çoğunlukla display:none kullanıyorum göstermek istemediğim öğelerde ve fakat dün yada önceki gün okuduğum bir makalede left:-9999px gibi bir şey yapmanın daha sağlıklı olduğundan, display:none olayının bazı screen-readerlarda olması gerektiği gibi gözükmediğinden(ya da gözüktüğünden?) dem vuruyorlardı..


makale'yi bulayım ben yeniden en iyisi...

4. | 08 Mart 2005 1:21 tarihinde, Ozan Çağlargil demiş ki:

A simple introduction to 3 column layouts isimli yazıda,.. burada da Screenreader Visibility kaynak gösterilmiş ki.. okuyun işte

ps: bir daha senin siteye yorum yapmıcam ben cemshid'i açmadan :)

5 08 Mart 2005 2:19 tarihinde, Mehmet Doğan demiş ki:

Dogru haklisin. Display:none esasinda erisebilir bir metod degil. Nedeni ise "ekran okuyucu"larin, display:none; metodu ile yazilmis degerleri okumamasi. Bu bir bakima bu tip cihazlarin hatasi cunku CSS 3 ile birlikte "wish list" de bulunan media="screenreader" ozelligi geliyor ve display:none'a destek verilmemesi tamamen acelecilik ki bence dedigim gibi bu "ekran okuyucu" sirketlerin hatasi.

Sirf bu nedenlerden dolayi, eger bu sayfanin logosunun oldugu yere bakarsan goreceksin ki ben display:none; uygulamadim. Eger CSS'i ya da resimleri kapatirsan, yine de bu sitenin basligini goreceksin. Eger John'un (joshuaink) bahsettigi metodu uygularsan (eksi marginli tekst yontemi baska bir deyisle teksti ekran sinirlari disina tasirmak), resimleri kapatip siteye baktiginda baslik kaybolacaktir ki bu da cok erisilir bir metod degil.

Simdiye kadar gordugum en iyi metod Dave Shea'den geliyor. Iste ben yukaridaki logo icin soyle bir CSS yazdim:

  1. #logo {margin:0; padding:0; position:relative; width:403px; height:96px; margin:0; padding:0; overflow:hidden;}
  2. #logo span {display:block; position:absolute; left:0; top:0; z-index:1; width:403px; height:96px; margin:0; padding:0; background:url(http://www.unbf.ca/altiustu/images/logo.gif) top left no-repeat;}

Iste bu metod ile, tekst hala gorunulur (display:none degil), ekran sinirlari icinde. Ama buradaki numara, tekstin, resim ile kaplanmis olmasi.

Bu metodu yukarida kullanmamamin nedeni, bu ise yeni baslayanlari urkutmemek icindi. :)

6. | 14 Mart 2005 12:05 tarihinde, Azer Koçulu demiş ki:

Bu yazınız yeni başladığım kişisel sitem için çok faydalı oldu. Daha önce yaptığım sitelerde CSS üzerinde hiç durmamıştım.Çok faydalı yazılar..

7. | 24 Mart 2005 11:23 tarihinde, Erdoğan Aktaş demiş ki:

Mehmet CSS ile ilgili yazı dizilerini dikkatle izliyorum sitelerim için inanılmaz bir hız farkı yarattı.
ancak 0 tablo ile web siteleri yaratmak konusunda biraz sorunlarım var sanırım. tablo içindeki tr ve td leri nasıl stiller içinde tanımlayacağımı anlayamadım. Bu konuda da buradaki gibi örneklere birşeyler hazırlayabilirsen çok memnun olacağım sanki göbeği ertimek 3 de olacakmış gibi geliyor bana...
Tüm yazılarını print edip el notu olarak saklayacağım.

8. | 29 Mart 2005 13:23 tarihinde, Programmer demiş ki:

Merhabalar..
Çok mükemmel bir site olmuş Hocam, ellerine sağlık..
Benim de basit bir sorum olacak..
BORDER-COLLAPSE: collapse tam olarak ne iş yaptığını açıklayabilir misiniz?
Pekçok yerde görüyorum fakat tam olarak ne iş yapar bilmiyorum.

9 29 Mart 2005 15:17 tarihinde, Mehmet Doğan demiş ki:

border-collapse iki tane degisik ozellik tasir. Bunlardan biri "separate" digeri ise "collapse"
Eger separate ozelligini kullanirsan, tablo icindeki hucrelerine kendilerine ait border ozellikleri verebilirsin, collapse ise tum hucrelerin bir border ozelligini paylasmalarini saglar. Bir tablo yaparken CSS kullaniyorsaniz ve bu CSS icinde border genisliginin olmamasini istiyorsaniz, border-collapse:collapse ve border-spacing: 0 ve ayrica border:none ile saglarsiniz. Bir bakima border=0 demenin CSS yolu.

10. | 29 Ağustos 2005 4:31 tarihinde, Eyup demiş ki:

Merhabalar,

Daha once calismalarimi sadece html kodlari ile ve javascript kullanarak yapiyordum. Son alti aydir php ve css e meark sardim . Css konusunda ufak tefek yani kendime gore tasarimlar yapabiliyorum. Simdiye kadar hic dikkat etmemistim dun bir tablo yaparken css kullandim su sekilde genisligini 120px ve yuksekligini 26px olarak verdim bunu hem td hemde div icin denedim ve daha sonra td nin ve div in padding degerlerini ve margin degerlerini verdigim sayfaya donup tablolara baktigimda ise benim 120 px lik td nin ve div in genislignin ve yuksekliginin vermis oldugum padding ve margi degerleri kadar buyudugunu gordum. Bu normalmidir yoksa benim bilgisayardami bir anormallik var ? Ornegin verdigimiz padding ve margin degerleri tablomuzun boyutunu degistirirmi ? Bunu da su sekilde anladim bu css ile yaptigim sayfayi php nin include komutu ile sayfaya ana sayfaya bagladim ve actigimda sayfanin buyudugunu gordum. Eger bu konuda bir aciklama yaparsaniz sevinirim.

Basarilar, kolay gelsin.

11. | 24 Ekim 2005 2:50 tarihinde, ameximes demiş ki:

Bu diyet bana bir nevi CSS eğitimi gibi oldu. Elimde CSS dökümanları var ancak İngilizce ile aramdaki bazı geçimsizlikler ve uygulamalı örnek sıkıntısından bir türlü cesaretimi toplayıp işe girişemiyordum. Şimdi bir şeyler yapmaya başlayabilirim sanırım. Teşekkürler.

12. | 09 Eylül 2006 17:14 tarihinde, İbrahim Dağlı demiş ki:

merhaba, CSS ile ilgili hiç bir bilgim yoktu. artık bir fikrim war hiç olmazsa. yanlız ben bu harici dosyada CSS saklama olayını merak ettim. onu nasıl yapıyoruz??

13. | 01 Ekim 2006 13:14 tarihinde, mahmut ademoğlu demiş ki:

ee devamı yok mu bu serinin?

14. | 30 Aralık 2006 23:23 tarihinde, Barış Gürbüz demiş ki:

Ama bu lokum tadındaki (hemde çifte kavrulmuş) makalelerin devamını yazmazsanız olmazki. Daha birkaç WEB sitesi tasarlamış birisi olarak sizden öğreneceğim çoook şey var. Çook çalışmam lazım hocam çoook. Lütfen göbeğim halen büyük eritelim derim ben. Siz yazın biz eritelim.

15. | 24 Şubat 2007 16:48 tarihinde, orhan demiş ki:

CSS ile ilgili cok yararli bilgiler keske daha fazla olsaydi.
eline saglik.


Kitabımı satın almak ister misiniz?

Teknoloji Kimin Umurunda adlı kitabımı satın almak ister misiniz?