Overflow;hidden olmasaydı
Mesela bloglarda ana sayfada, arşiv sayfalarında yazılar özet halde gösterilmek istendiğinde resimlerin de küçültülmesi gerekiyor. Bir CSS ayarı ile yazılardaki resimlerin tekil sayfalarda (esas yazı sayfalarında) normal boyutunda, ana sayfada ise özet yazılar içinde küçültülmüş hali ayarlanabilir. Fakat sadece resimler üzerindeki en boy ölçülendirilmesi çoğu resimlerde deforme bir görüntü arz eder.

Diyelim ki resimli özet yazıların anasayfadaki kendi bölgesinde genel ayarında div class ismi “ozetli” olsun.
O isimle Style kısmına şu şekilde CSS ayarı yapılır:
.ozetli img{width:90px; height:80px;}

Ne yaptık? Sadece resme özgü en ve boy tayin ettik. Böylece resimler tekil sayfalarda gerçek boyutlarında görünürken ana sayfada özet yazıların içinde küçük görünür.
Ana sayfada yan menülerdeki resimler bu ölçeklendirmeden etkilenmesin diye sadece özet yazılar kısmına uygulanır.

Peki bu usul ne kadar sağlıklı? Görelim. Sağda gördüğünüz kürklü kadın resmine bakın. Esas yazı sayfasında bu şekilde görünüyor. Özetli yazılarda ise 90X80 boyutunda olması isteniyor.

Yapalım bakalım: Solda görüldüğü gibi 90X80 boyutlarında olunca son derece deforme görünüyor. Bütün resimler 90X80 ölçüsünde otomatik olarak ayarlanacağından dolayı resimlerin orijinal en – boy boyuttlarına göre kimileri normale yakın görünür kimileri abuk sapık görünür.

Çözüm: Resme sadece “en” yani genişlik ölçüsü atayacağız. Şöyle:
.ozetli img{width:90px;} Böyle yapınca resim aşağıdaki gibi görünecek.
Ama bu hiç iyi olmadı: En ve boy doğru orantıda küçüldü. Oysa uzun olması istenmiyor, yüksekliğinin 80px ölçüsünde olması isteniyor. Evet, çözüm bu kadar değil zaten.

İşte bu noktada “overflow:hidden” devreye girerse ve çözümü sağlanır. “Yükseklik” özet yazının kaplayacağı yer kadar ayarlanır, ama resme değil! Özet yazı bölgesine ayar yapılır.
.ozetli{height:80px; overflow:hidden;}

Daha iyi bir görsel örnekte çerçeve içinde gösterelim. Ayarlara kenarlıklar (border) katalım, arka plan rengi (background) katalım ki kutu içinde görünsün mesele daha iyi anlaşılsın. Kutu içine de soldaki düzgün küçültülmüş resmi ve latince uzun bir yazı koyalım. çerçeve içine dört kenara 5px boşluklar (padding) koyalım yazılar kenar çizgilerine değmesin. Böylece CSS ayarı:

.ozetli{background:#fffef2; border:1px solid #cacaca; font-size:1.1em; height:80px; padding:5px; overflow:hidden; width:450px;}
Bu arada resim yazının solunda görünsün ve sağında 5px araboşluğu olsun diye onu da şöyle ayarladık:
.ozetli img{float:left; margin-right:5px; width:90px;}

(Bir de bu CSS ayarlarının div anahtarları HTML sayfalarında ilgili elemanların başına ve sonuna konur, burada o konuya girmiyorum. Onu şu yazımda anlatmıştım: » div class … )

Vereceği görüntü ise şudur:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.

Şimdi ne oldu bakın: Resmi kesmedik, uzun yazıyı kısaltmadık: özet yazı kutusunda 80px ölçüsünden fazlalık kısmı aşağı tarafta gizli kaldı. “hidden” gizli demektir. “overflow:hidden;” yapmış olduk. Latince yazı ise daha uzundu ama onun devamı da gizli kaldı.

Overflow ayarlarını yukarda “hidden” yani gizli özelliği ile gördünüz. Hidden yerine Scroll olursa ne olur?
Önce yukardaki kodu aynen yazayım, sadece bir kelime değişecek: hidden yerine scroll yazıyorum:
.ozetli{background:#fffef2; border:1px solid #cacaca; font-size:1.1em; height:80px; padding:5px; overflow:scroll; width:450px;}

.. Ve aşağıda bakın nasıl bir farklılık sağlıyor.

İşte görüntüsü: Bunda yanda kaydırma çubuğu var, onunla resmin de yazının da tamamını görebiliyorsunuz. Bu “overflow;scroll;” özelliğidir. Yan çubuğu kaydırarak yazının tümünü okuyabilirsiniz.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.

Ne kadar pratik şeyler değil mi? Bunu blog yazılarınızın içinde bile kullanabilirsiniz.
Nasıl yapacağınızı yazıyorum dikkat edin:
Diyelim ki bir yazınızın içinde ek bir bilgi sunacaksınız, o ek bilgi ise çok uzun. Fazla yer kaplamasını istemiyorsunuz, esas yazınızı bulandırması canınızı sıkıyor. Böyle durumlarda “overflow:scroll” özelliği ile o ek bilgiyi yukardaki gibi çerçeve içine almalısınız.

Ek bilginin en başına şu gelecek:
<div style="border: 1px solid #cacaca; margin: 10px; padding: 5px; background: #fffef2 none repeat scroll 0% 0%; overflow: scroll; font-size: 1.1em; height: 80px; width: 450px;">
Ve en sonuna ise şu:
</div>
(Dikkat: Bu kodlu ek bilgi yazısını blog yazarken görsel bölümde değil HTML bölümünde yazacaksınız.)

Latince yazıyı sizin ek bilgi gibi düşünün. Bakın nasıl oluyor, kodları burada kırmızı yapayın daha iyi görebilin:
<div style="border: 1px solid #cacaca; margin: 10px; padding: 5px; background: #fffef2 none repeat scroll 0% 0%; overflow: scroll; font-size: 1.1em; height: 80px; width: 450px;">Ek Bilgi: Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.</div>

Öğrendiniz. Ek bilgi kutusunun arka plan rengini, genişliğini, yüksekliğini, kenarlıklarının rengini, çizgi kalınlığını istediğiniz gibi değiştirebilirsiniz.
Son olarak bu nasıl görünüyor bakın:

Not:
Ek bilgi kutusu yazı bölümünü sağdan sola tamamen kaplasın isterseniz ayar kodunda width:450px; gibi bir rakam belirtmeyin, width:auto; diye yazın.

CSS ayarları nasıl yapılır

Ayrı bir style sayfası veya bölümü vardır. Orada yapılacak çok küçük bir örnek:
#anasayfa{font-size:1.1em; color:#333333; background:#f8f8f8;}
Örnek olsun diye uzatmadım. İşte bu bir CSS örneğidir. Ugulanmasına gelince, söz konusu olan “anasayfa” diye tanımlanan sayfanın html zemininde içeriğin en başına şu gelir: <div id="anasayfa"> içeriğin en sonuna ise </div> getirilir. Böylece o sayfadaki her şey CSS ayarlarında belirtildiği gibi olur.

HTML ile STYLE ayarlaması nasıl yapılır

CSS kullanmadan, sadece “style” uygulanır. Aynen yukardakine benzer kodlar yine sayfanın HTML zemininde içeriğin en başına ve en sonuna getirilir.
Ayarlama yapılacak yerin içeriğinin HTML zemininde (sayfasında) içeriğin en başına HTML kodları olarak style uygulanması için bir örnek:
<div style="font-size:1.1em; color:#333333; background:#f8f8f8;">
içeriğin en sonunda ise değişiklik yok, yine </div> getirilir.

Şimdi, yukardaki iki örneği kıyaslayarak CSS ile ayarlamalar yapmanın pratikliğini anlamış olursunuz. İkinci örnek benzeri uygulamaları sadece özgür ve farklı davranmak istediğiniz yazılara “istediğiniz farklı biçimlendirmeyi yapmak” için başvurabilirsiniz. Meselâ ben son zamanlarda resim kenar süslemeleri için her yazımda ayrı html kodlaması yapıyorum. CSS’te tanımlamış olduğum varsayılan ayarları kullanmıyorum.

Yuvarlak köşeli link çerçevesi yapalım

Arka plan resmi kullanmadan, css ayarlamalarıyla yuvarlak köşeli çerçeve ile yazılarınıza çevre kenarlıkları veya sınır yapabilirsiniz. CSS dilinde kenarlıklara border denir.

Internet explorer “sağda gördüğünüz örnekte” az da olsa hatalı gösteriyor ama yan menülerde kullanınca tamamen hatasız oluyor.

Aslında köşeler gerçekten yuvarlak değildir; bir tür göz aldanması. Ayrıca bu vereceğim kodlarla linkli yazılar çerçeveli yapılıyor. Meselâ blogunuzdaki yan menüler için düşünebilirsiniz.
Sağda bir örnek görüyorsunuz. Kodlarını aşağıya yazıyorum.

Stil sayfanızda olacak kodlar:
.yuv ul{width:230px; list-style-type:none; margin:0 auto; padding:0;}
.yuv li a{display:block; position:relative; border-width:1px 0; border-color:#ccc; border-style:solid; color:#555; text-decoration:none; margin:4px 1px;}
.yuv li a span {display:block; position:relative; margin:0 -1px; border-width:0 1px; border-color:#ccc; border-style:solid; background-color:#eee; padding:2px 6px;}
.yuv li a:hover{border-color:#aaa; color:#333;}
.yuv li a:hover span {border-color:#aaa; background-color:#ddd;}

En baştaki .yuv bu kodların HTML sayfalarındaki sınır kodlarının adıdır. Değişiklik yapabilirsiniz. Genişliği filan da değiştirebilirsiniz.

Ve HTML sayfalarına koyulacak şekli..
<div class="yuv"><ul><li>
<a href="#"><span>Ana Sayfa</span></a>
<a href="#"><span>Arşivler Sayfası</span></a>
<a href="#"><span>Filan konu linki</span></a>
<a href="#"><span>Falan link</span></a>
</li></ul></div>

http ile başlayan URL’lerin yerine (kolay örnek gösterim olsun diye) # işaretleri koydum. Burada span tagları nereye geliyor, nerede ne var dikkat edin. Bir de eğer yan menülerde değil bunun gibi sayfalarda linkler için kullanacaksanız linkleri alt alta yazmayın yan yana boşluk bırakmadan yazın yoksa satır araları çok fazla mesafeli olur.

Güncelleme: 12 Aralık 2009 Cumartesi
Yukardaki Bilgileri paralel olarak, yazılara oval köşeli kenarlıklar yapmak için takip ettiğim bloglardan birinde “bugün” güzel örnekler verilmiş.
İlgilenenler bakabilir: » CSS3:Oval Köşe Kullanımı

Bugün bulduğum bir hata: Reklamları her sayfada göstermemek için kullandığım adsense eklentisine kendi ilave ettiğim div ayarında idi. Adsense kodunun başına <div class="… ..> diye gereken ayarları ve sonuna kapatma kodu </div> koymuştum. Hatalı imiş. Bir tane bile olsa hata hatadır, olmaması gerekir. Bana göre hata yoktu ama anladığım kadarıyla p taglarının içine ayrıca div ayarları tagı konulmuyormuş gibi şeyler söz konusu. Fakat eklenti kodlarının içinde öyle şeyler yok ki hata olsun! Sonra nereden aklıma geldiyse div yerine span kullanmayı düşündüm.

Kodun başına <span style="float:left; margin:0 10px 2px 0; padding:0;"> diye divde olduğu gibi gereken ayarları yazdım. Sonuna da </span> kapatma kodunu ekledim. W3C markup validator ile tekrar kontrol ettiğimde bu sefer hata göstermedi. Sıfır hata. :) Demek oluyor ki her yerde div kullanılmaz.

HTML ve XHTML hatalarını bulmak için

Bu linke: W3C markup validator service tıklayın, açılan sayfada sitenizin URL’sini yazın. Bu araç sayesinde sitemizin / blogumuzun ana sayfa, tekil sayfa ve arşivler (kategoriler etiketler) bölümlerinin HTML düzenlerinin hatalarını kolayca bulabiliyoruz.

Sadece ana sayfa için değil: tekil sayfa, arşivler vesaire sayfaları için de araştırın. Biraz ingilizce biliyorsanız ve biraz HTML meselelerinden anlıyorsanız gösterilen hataları kolayca düzeltebilirsiniz.

Yeni yan menü dosyalarının içlerinde elbette en başta style css ayarlarının kodu oluyor.
Örnek:
En Başa: <div id="leftbar"> dosyada en alta ise </div> koyacaksınız.

Bunların ortasına ise:
<ul>
<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(1) ) : else :
?>
<?php endif; ?>
</ul>
kodu gerekiyor. Bu kodda parantez içinde 1 rakamı görüyorsunuz. Kaç tane menü oluşturacaksanız her birinin kodunda başka rakam olacak: 1, 2, 3 .. gibi rakamlar koyacaksınız.
Bu rakamlar niçin önemlidir?
Diyelim ki soldaki menüdeki kodda 1 var, sağ sütundaki menü kodunda 2 var. Bileşenler sayfasından mesela kategorilerin sol sütunda mı görünmesini istediniz? O halde bileşenler sayfasından “yan menü 1″ için kategori atayacaksınız. Son yazıların sağ sütundaki menüde görünmesini istiyorsanız bileşenler sayfasında son yazıları “yan menü 2″ için ayarlarsınız. Tabii sağ menü php dosyası içindeki kodun içindeki rakam 2 olmalıdır.

(Ayrıca, bileşenlerin kullanımlarını hiç bilmeyenler”wordpress bilesenleri widgets ve kullanimlari” yazımı okuyabilirler.)

Şimdi gelelim esas fonksiyon koduna:
Bu kod “Tema fonksiyonları (functions.php)” dosyasının içine konulacak. Kod aşağıda:
<?php
if ( function_exists('register_sidebars') )
register_sidebars(2, array(
'before_title' => '<h3 class="widgettitle">',
'after_title' => '</h3>',
));
?>

Kodun içinde 2 rakamı var. Bu 2 rakamı bileşenler (widgets) uyumlu yan menü sayısını gösterir. Eğer 3 adet bileşenler uyumlu yan menünüz varsa rakamı 3 yapın. Yani kaç tane ise o sayıyı gösteren rakam olacak. Tabi bu arada üçüncü menü dosyasındaki kodun içindeki rakam da 3 olacak, aşağıdaki gibi:
<ul>
<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(3) ) : else :
?>
<?php endif; ?>
</ul>

Fonksiyonlar dosyasındaki h3′ler ne işe yarar?
Bileşenlerin başlıklarının görünüm ayarlarını getirirler. Kategoriler başlığı, son yazılar başlığı gibi. Sizin sitenizde o başlıklar h4 ile ise h3′leri h4 yapın. Veya ne ise o olmalıdır.
Bunların ayarları style sayfasında, örneğin şöyle gösterilir:
#sidebar h3{…… burada noktalar yerine gerekli ayarlamalar vardır….}

Yeni menünün sayfada görünmesini sağlamak için kod:
Diyelim ki sol tarafa yeni bir menü yaptınız. Hem ana sayfada, hem tekil sayfada, hem sayfa sayfasında, hem de arşivler sayfasında hepsinde görünmesini istiyorsanız her birinin HTML sayfalarına bu aynı kod gerekiyor. İsterseniz bazılarına koymayabilirsiniz.
Yeni menüye örnek olsun diye “solmenu” ismini verelim. php dosyası solmenu.php olarak isimlenmiştir.
Kod ise şöyle olur: <?php include (TEMPLATEPATH . "/solmenu.php"); ?>

Peki yeni menünün solda görünmesi için onu HTML sayfasında nereye koyacağız?
Sadece birinden örnek vereyim, her birine aynen uygulayın:
Ana sayfa (index.php) dosyasına girin. Burası aynı zamanda ana sayfanın HTML sayfasıdır.
En üstte <?php get_header(); ?> kodu bulunur. Yeni kodu bunun altına veya sağ tarafına koyun. Şöyle olur:
<?php get_header(); ?>
<?php include (TEMPLATEPATH . "/solmenu.php"); ?>

Sağ sütunda olmasını istediğiniz yeni menünün (sagmenu.php) sağda görünmesi için:
En altta <?php get_footer(); ?> kodu vardır. Bunun üstüne veya soluna koyun.
Mesela şöyle olabilir:
<?php include (TEMPLATEPATH . "/sagmenu.php"); ?>
<?php get_footer(); ?>

Okuyup öğrenmekten çekinmeyin hiçbir şeyi gözünüzde büyütmeyin. Hiç bilgisiz bir insan bile benim gibi kodları kurcalaya kurcalaya öğreniyorsa, bilenlerin tariflerini okuyarak öğrenmeyi daha kolay becerebilirsiniz. Size sunulan bilgileri okuyun. Okuyup öğrenmekten korkmayın..

Sadece HTML sayfası içindeki uygulamayla yazı renklendirme nasıl yapılır

Renklendireceğiniz şey tek bir harf, bir kelime, ya da bir paragraf olabilir. Önce renk kodlarına ihtiyacımız var. Meselâ beyaz renk kodu: #FFFFFF kırmızı renk kodu: #FF0000 Renk kodları harflerden, rakamlardan veya harflerin ve rakamların karışık sıralanmasından olur. “o” harfi kullanılmaz ki 0 (sıfır) rakamı ile karıştırılmasın. Renk kodları için şu yazıma bakabilirsiniz: » Renk Kodları

Renk kodu ile yazı renklendirme kodu yapılır. Renklendirilecek harfin, kelimenin veya paragrafın en başına bu kod, sonuna ise ilgili kapatma kodu konur. böylece renklendirilecek yer sınırlanır, renklendirme sadece orası için geçerli olur.

İnternet ve bilgisayar kelimelerini kırmızı yapalım. Aşağıda HTML sayfasındaki görüntüsünün örneği var. Baştaki ve sondaki kodlara dikkat edin:
<font color="#FF0000">İnternet ve bilgisayar</font>
Bu da normal sayfadaki görüntüsü: İnternet ve bilgisayar

Bu bilgi düz yazıların renklendirilmesi hakkındaydı. Linkler bu şekilde renklendirilemez. Nasıl yapılır? Okumaya devam edin.

Sadece HTML sayfası ayarıyla link renklendirme:

Link renklendirme biraz karmaşık. Bu sitemin linkini örnek alarak göstereyim. Önce link nedir üstünde duralım:
http://devletli.com/ sitemin URL’sidir. Bu URL’nin link olması ve siteme gelenlerin URL’yi değil sadece uygun bulduğum kelimeleri meselâ “Benim Site” yazısını görmeleri aşağıdaki gibi kod içinde bulunmasıyla oluyor:
<a href="http://devletli.com/">Benim Site</a>

Gördüğünüz gibi link adlandırmasını “benim site” diye yapmışım. Adlandırmadayı istediğiniz gibi yapmakta özgürsünüz. Değişik kelimeler linki bozmaz. Hatta o kısma isim değil paragraf ya da resim bile koyabilirsiniz. Resim koymak nasıl yapılır başka bir yazımda anlatırım.

Gelelim linki renklendirmeye. Linki nasıl isimlendirmişseniz o isim renkli olacaktır. HTML sayfasındaki link kodunun içine style ayarları koymak gerekiyor.
style="color:#FF0000;" bunu link kodunun içine aşağıdaki gibi koyarsınız:
<a style="color:#FF0000;" href="http://devletli.com/">Benim Site</a>

Ve normal sayfadaki renklendirilmiş görünümü:
Benim Site

Kıyaslayın
Sade kod:
<a href="http://devletli.com/">Benim Site</a>
Sadece HTML sayfası ayarıyla renklendirilmiş kod:
<a style="color:#FF0000;" href="http://devletli.com/">Benim Site</a>

CSS usulüyle yazı renklendirme

Düz yazı ve link renklendirmeleri bu usülde karışık gibi görünüyor. CSS style sayfasında bütün ayar kodlamaları bulunur. HTML sayfasında ise renklendirilecek yer için çok kısa kodlar kullanılır. Birçok şekli vardır ama en çok kullanılanı div class ile yapılanıdır.

Div konularına değindiğim yazılarımda bunları açıklamıştım. Yazı renklendirmesinde düz yazı için ayrı, linkli yazı için ayrı yazı renklendirmeleri nasıl yapılır bunları o yazılarımdan bilhassa » div class ile ilgili yazımdan okuyabilirsiniz

Dikkat: Sadece HTML sayfasında kullanabileceğiniz biçimlendirme kodlarıyla her şeyi yapabilirsiniz. Yalnız şunu bilin ki en sağlıklı biçimlendirme yolu CSS tarzı ile olanıdır. Her açıdan yararlıdır ve SEO için de önemlidir.

Bu yüzden CSS öğrenmenizde yarar var. Hiç zor değildir. Div yazılarıma baksanız onları öğrenseniz var ya neredeyse bütün CSS meselelerinin yüzde doksanını öğrenmiş gibi olursunuz. “gibi” dedim. aynen öyledir demedim. Yani hiç gözünüzde büyütmeyin, elbette yüzde doksanı değil ama onları öğrenseniz gerisi çorap söküğü gibi gelir.

İşte bütün bu ayarlar css style sayfalarında çoğunlukla çeşitli div ayarlamalarıyla belirlenir. Her bir ayar ayrı isimlerle adlandırılır. Sonra o ayarlar değil o ayarların sadece isimleri web sayfasının HTML sayfasında çok kısa kodlarla kullanılır. Bu kodlar genelde div kodlarıdır.

web sayfası biçimlendirmeleri

Değişik özellikler bir sayfanın geneli için, bir paragrafı için, bir satırı için, hatta tek bir kelimesi için bile belirlenebilir. İç içe ayrı ayrı yapılabilir. Bir ayar style sayfasına kayıt edilir. HTML sayfasında biçimlendirilmek istenen bölümler uygun görülen div kodlarıyla sınırlanır. O sınırların içinde kalan kısım style sayfasındaki ayarların gerektirdiği özelliklere sahip olur. Bir ayar çok yerde kullanılabilir. XHTML açısından kusurlu görülmemesi için; aynı sayfanın değişik yerlerinde aynı ayarı birkaç yerde kullanacaksanız bunu div id ile değil, div class ile yapmalısınız.
Niçin?
Çünkü div id ayarları bir isimle bir sayfada sadece bir defa kullanılabilir. Aynı bir sayfada div id’yi birden çok kullanacaksanız isimleri farklı olmalıdır.
Örnekler:
style sayfasında:
#solmenu{……bu noktalı yerler ayarlar içindir……}
html sayfasında:
<div id="solmenu">……bu noktalı yerler biçimlendirilecek kısım içindir…</div>

Örnekteki “solmenu” div id’si aynı sayfada sadece tek bir yer için kullanılabilir.
Aynı sayfadaki başka bir yeri biçimlendirmek için başka bir div id oluşturmalısınız.
Örnekler:
#sagmenu{………}
#altresim{………}

div class ayarlamaları ve kodları

a) Style sayfasında
div id için style sayfasında isminin başına # (kare) işareti getiriliyordu. div class’ta ise . (nokta) işareti kullanılır.
örnek:
.menuler{……………}

b)HTML sayfalarında
sivri parantez içinde class kelimesi aşağıda gördüğünüz gibi yazılır.
örnek:
<div class="menuler”>…………</div>

Dikkat ederseniz div sınırlamalarında div id’nin de div class’ın da kapanış kodu </div> olarak aynıdır.

Aynı isimli bir div class’ı aynı sayfada istediğiniz sayıda kullanabilirsiniz.

div id ve div class kodlarının birleşik kullanımı

Bu durumda ikisi tek bir kod gibidir; dolayısıyla kapanış kodu sadece bir adet </div> olur.
Örnek:
<div id="solmenu" class="menuler">……………</div>

Buna niçin gerek duyulur?
Daha fazla detaya inelim:
Meselâ sol sütun için sadece genişlik, arkaplan rengi, kenar boşlukları gibi özellikleri ayrı tasarlarsınız, bunu div id ile belirlersiniz. Sol menünün tamamı için geçerli olur. Sadece sol menüyü ilgilendirir. Olur ya; sol menü için farklı genişlik, sağ menü için farklı genişlik hatta farklı arka plan rengi tasarlamak isteyebilirsiniz. Böyle bir durumda sağ menü için başka bir div id oluşturursunuz.
Menülerde yazılar olur, linkler olur. Bu yazıların ve linklerin yazı boyutlarının, renklerinin her menüde aynı şekilde olmasını isteyebilirsiniz. O halde “menuler” isimli bir div class’a ihtiyacınız var.

Şimdi bütün bunların kodlarını görelim:
a) Style sayfasında:
#solmenu{…………}
#sagmenu{…………}
.menuler{……………}

Burada şuna dikkat edin: “menuler” isimli div class ile biçimlendireceğiniz kısımda linkler olacağı için, bu “menuler” ayarlamasını link uyumlu yapmanız gerekiyor. İsterseniz linkler için başka ayarlar yapabilirsiniz. Böyle yaparsanız aşağıdaki örneğe göre linkler ikinci satırdaki a’lı ayarın gerektirdiği gibi görünecek, normal yazılar ise birinci satırın gerektirdiği gibi görünecek. HTML kodu ise değişmez. yine <div class="menuler">…….</div> şeklinde kullanılır; a’lı ayarlar da burada geçerli olur.
Link uyumunu da sağladık. Şimdi son duruma göre style sayfasındaki link uyumlu “menuler” ayarı şöyle:
.menuler{…………}
.menuler a, .menuler a:visited{…………}
Yine hatırlatayım: Bu ikisi de aynı yerin biçimlendirilmesi için kullanılacağı için, HTML sayfasında burada olduğu gibi iki ayrı kod gerekmez.
Sadece <div class="menuler">………</div> şeklinde uygulanır. İçerdeki normal yazılar ve linkler ayrı ayrı kendilerine ait sıfatlara bürünürler.

b) HTML sayfasında:
dikkat: burada iki tarzda yapabilirsiniz.
1. UZUN YOL
sol menü için:
<div id="solmenu"><div class="menuler">
son yazılar..
reklam…
</div></div>

Sağ menü için:
<div id="sagmenu"><div class="menuler">
kategoriler..
bağlantılar…
</div></div>

2- PRATİK YOL

Sol Menü için:
<div id="solmenu" class="menuler">
son yazılar..
reklam…
</div>

Sağ menü için:
<div id="sagmenu" class="menuler">
kategoriler..
bağlantılar…
</div>

1. yol da 2. yol da aynı şeydir. Bu durumda: div id sağ veya sol menünün enini, arka plan rengini, kenarlarını filan belirler. div class ise yazıların, linklerin boyutunu, satırların durumunu belirler.
Eğer bütün ayarların, yazılar linkler de dahil her şeyin her iki yerde birbirlerinden farklı görünmelerini istiyorsanız bütün ayarlamaları sadece div id ile yapabilirsiniz. Ayrıca bir div class’a ihtiyaç yoktur. Veya div id ile değil sadece div class ile yapabilirsiniz, dv id’ye ihtiyaç yoktur. Fark etmez.

Linkler için ayrıca li, ul gibi ayarlamalar da vardır ancak konumuz sadece div olduğu için şimdilik onlara girmedim.

div class ile div id arasında ne fark var?

Etkileri aynıdır. Yalnız XHTML kuralları büyük bir düzen gerektiriyor. Biçimlendireceği bölgeye mahsus bir adı olan bir div id bir sayfada sadece bir defa kullanılmalıdır. Aynı zamanda bölgelerin ayrıcalığını belirtmelidir. Meselâ header kısmının bütününde, esas yazı bölgesinin bütününde, sağ veya sol sütunların bütününde değişik adlarla birer defa kullanılır.
div class ise ayrıcalık gerektirmeyen genel ayarlamalar için kullanılmalıdır; böylece aynı isimli bir div class aynı sayfada değişik kısımlarda çok defa kullanılabilir.
HTML sayfalarındaki kodlarda hiyerarşik bir düzen olmalıdır.

div id’nin bilinmesi gereken en önemli özelliği

Web sayfalarını, örneğin bu yazıyı okuduğunuz sayfayı düşünün. Bir web sitesine girdiğinizde bir sayfada bulunuyorsunuz. Bunun bir de göremediğiniz HTML sayfası vardır; sayfanın iç organları gibidir. Ekranda gördüğünüz Aynı bir sayfanın HTML kısmında aynı isimli div id sadece bir defa kullanılabilir. Ama öte yandan aynı isimli div id ayrı ayrı sayfalarda çok defa kullanılabilir. Ana sayfa (index.php) tek bir sayfadır. kategorilerin veya etiketlerin görüntülendiği (archive.php) tek bir sayfadır. Özel sayfalar (page.php) tek bir sayfadır. Amaaaa.. Aman buna dikkat edin: Üst kısım (header.php), alt kısım (footer.php) ve varsa yan sütünlar, bu esas sayfalarla bütün halinde olur, tek sayfa halini alırlar, buna da dikkat etmelisiniz. Bunlara kompleks tek sayfa diyelim. “Aynı isimli” bir div id bu kompleks tek sayfaların her birinde sadece birer defa kullanılabilir; bu şekilde o div id her ayrı kopmleks sayfada (birer defa) kullanılabilir.

Örneğin ana başlık için kullanılan div id’nin bir adı vardır. Aynı bir sayfada başka paragraflar veya sütünlar için başka div id’ler başka adlarla kullanılabilir. Yalnızca her ad sadece bir defa kullanılacak.

div id ile style sayfasında ayarlamalar yapmak

Sayfanızda görüntülenecek bir paragraf öğelerinin veya sadece bir başlığın rengi, büyüklüğü, vb. gibi ayarları style sayfasında bulunur. HTML sayfasını yazının iç organlarına benzetirsek, style sayfasını yazının beynine benzetebiliriz.

Örnek:

Yazı biraz büyük. Rengi kırmızı. Bu bir ana başlık yazısı. Peki nasıl yapılıyor da böyle oluyor? Dikkatle okumaya devam ederseniz yazımın devamında gereken bütün bilgileri verdim ki bilmeyenler de yapabilsin.

div id’nin style sayfasındaki ayar kodu

Bunun için div id’ye bir isim verilir. İsmin başına # işareti konur. Verilecek ismin ne olduğu önemli değildir; sadece nerede kullanıldığı unutulmasın diye görevini çağrıştıran harfler kullanılabilir. İsterseniz teyzenizin veya öğretmeninizin adını verin: nermin de olabilir ahmet de olabilir. Yalnız büyük harf kullanmayın ve ç, ğ, ş, ö gibi Türkçede bulunup ingilizcede bulunmayan harfleri kullanmayın. Diyelim ki E. Ali Blog sitenin ana başlığıdır. O halde, style sayfasındaki ayarı çabuk bulalım diye şöyle bir isim verebiliriz: anab

#anab{font-size: 20px; color: #ff0000;}
Süslü parantezlerin başlangıç ve bitiş yerlerine dikkat edin. Bu temel bir ayar kodlamasıdır. İçinden bir nesne çıksa her şey alt üst olur. # işaretinden son süslü paranteze kadar her şey bir bütünün parçalarıdır, tek bir şeyin bütün sıfatlarını içinde saklar. Ne kadar ilginç değil mi? Evet, renkten büyüklükten başka daha pekçok sıfat koyabilirsiniz. Konumuz sadece div id olduğu için kolay öğrenesiniz diye sadece renk ve büyüklük kodları ile yetiniyoruz şimdilik.

HTML sayfasındaki sınırlama kodları.
Kırmızı renkte ve 20px büyüklüğünde olmasını istediğimiz E. Ali Blog başlığının HTML sayfasındaki çıplak görüntüsünün başına ve sonuna bu kodları koyacağız. Bütün div’lerin sınır kapatma kodu </div> şeklindedir. Burası kolay. Baş taraftakine gelelim. Bu div id’ye isim vermiştik: anab ismini vermiştik.

O halde: Başlığın evveline <div id="anab"> kodu gelecek. Şöyle:
<div id="anab">E. Ali Blog</div>

Evet, div id kodları ile başlığı sınırladık. Böylece, herkesin göreceği esas sayfada bu başlık şöyle görünecektir:

Çoğu kişinin karşılaştığı büyük bir sorun:
“Ama başlık linkli ve de bu ayarlar linklere uymuyor!!!

Cevap vereyim: Linkler özel şeyler. Yeni bir div id oluşturmadan, HTML sayfasına hiç girmeden sadece style sayfasından mevcut div id kodumuzu link uyumlu yapmamız gerekiyor. Linkleri a harfi temsil eder. Bunsuz olmaz.
Mevcut kod şuydu:
#anab{font-size: 20px; color: #ff0000;}
Şimdi, linkli başlık için ne istiyorsunuz? Mevcut ayarlar aynen korunsun mu? Evet aynen korunsun diyorsunuz. Tamam. Altına şunu ekleyelim:
#anab a, #anab a:visited{font-size: 20px; color: #ff0000;}

Yani bir satır kod vardı, şimdi iki satır oldu:
#anab{font-size: 20px; color: #ff0000;}
#anab a, #anab a:visited{font-size: 20px; color: #ff0000;}

Dikkat: Bu div id ile sınırladığınız kısımdaki yazıların bir kısmı linkli, bir kısmı linksiz ise, mesela linklilerin rengini, büyüklüğünü değiştirebilirsiniz, daha iyi olur. Linkli olmayanlar üst satır koddakinin etkisinde kalacaktır.

Özetleyecek olursak: Her div id’nin bir adı vardır ve o ada sahip bir div id bir sayfada sadece bir yerde kullanılır.

Çözüm olarak, yazıların HTML sayfasında resim kodunun ve onun yanına sonradan eklediğim kodların, bunların tümünün en başına <div align="center"> ve en sonuna</div> koyunca resim renkli yazılarıyla sayfada ortalanabiliyordu.

Style css sayfasında float:center; diye bir değer geçersiz ise veya işe yaramıyorsa, nasıl bir ayar yazabiliriz?
Esas çözüm
Ve işte işin püf noktası: Margin olarak margin: 0 auto; yapacaksınız. Aynı yer için iki defa margin tanımlaması olmaz. Zaten vardı ise onun yerine bunu yazın.
İşte böyle yapınca oluyor. O kısım yazı sayfasında ortalanıyor. Demek ki işin sırrı margin sağ ve sol ölçülerine “auto” değeri vermekte.
Margin için verilen değerde burada 0 (sıfır) üst ve alt kısım içindir. Onun yerine 10px veya herhangi bir değer verebilirsiniz. Unutmayın: 0 (sıfır) için px gerekmiyor ama başka değerler için rakamla bitişik olarak px eklemek zorundasınız. 10px veya 2px gibi.

Eğer alt ve üst farklı değerler atayacaksanız:
margin:10px auto 5px auto; bu ayar ile üst boşluk için 10, alt boşluk için 5 verdik. Sağ ve sol için auto dedik ki bu kısım sayfada ortalanmış (center) olsun.

Ayrı altyazılı resim ortalama için div ile html ayarları üzerinde örnek uygulama

Önce aşağıda resmi görelim. Altına herhangi bir şey yazılabilir.

Ortala

Resmin altındaki yazıya dikkat ederseniz sağa bitişik, resim ise ortalanmış. Aşağıda resmin ve ayarın tümünün kodunu görüyorsunuz. Resim kodu karışmasın diye kırmızı göstermeyi düşündüm.

<div style="border: 1px solid #dddddd; margin: 0pt auto; padding: 5px; background: #f8f8f8 none repeat scroll 0% 0%; width: 146px; text-align: right;"><img src="http://alivesitesi.googlepages.com/horoz.jpg" alt="div ile ortalama örnek" width="146" height="156" />Ortala</div>

Div ayarlarında genişliği belirtmeyi ihmal etmeyin. Ben aslında kodu bu kadar uzun yazmıyorum. WordPress otomatikman değiştirip 0 yerine 0pt yazıyor ve arkaplan rengi ayarı sadece background:#f8f8f8; iken şu hale getiriyor: background: #f8f8f8 none repeat scroll 0% 0%;
Bu ayar ise daha doğru olup hem WordPress için hem Blogger için geçerli bir HTML ayarıdır.
Resim altı yazısına gelince:
Ben text-align:right; diye yazdığım için sağa bitişik oldu. eğer right yerine center yazsanız o da ortalanmış olur. Böyle gösterdim ki bilmeyenler işe yarar bir şey daha öğrensin.

Margin

Dış kenarlardaki boşluk demektir. Kenar çizgileri olan bir yazı alanından örnek verirsem daha iyi anlarsınız. Aşağıdaki örneğe dikkat edin.

Siyah ve kırmızı çizgileri yok sayın. Mesele anlaşılsın diye koydum. Yazı alanı açık gri. Yazı alanı kırmızı çizgi ile çerçevelendi. Kırmızı çizgi ile siyah çizgi arasındaki alan, gri yazı alanının margin’idir. yani dış kenar boşluğudur.
Eğer burada margin tanımlanmasaydı şöyle görünecekti:

Padding

İç kenarlardaki boşluklar için kullanılan kelimedir. Yukardaki örnekte, gri yazı alanındaki kelimelerin en solunda, en sağında, en altta ve en üstte boşluklar vardır. İşte bu boşluklara padding denir. İç kısımdaki kenar boşluklarıdır.
Eğer padding tanımlaması olmasaydı bakın şöyle görünecekti:

Margin Yazılışları

margin: 10px; Eğer böyle yazılırsa dört yan için geçerlidir.
margin-left: 10px; Sadece sol dış boşluk için. Bunun gibi, margi-right sağ dış boşluk içindir.
left: sol | right: sağ | top: üst | bottom: alt
Her bir kenar için farklı ölçüler olduğunda kısa yoldan yazılır. Örnek:
margin: 10px 5px 20px 5px; dikkat edin noktalı virgül en sonuncusuna konuyor.
Peki dort yan için bu ölçüler veriliyor ama hangisi sağ, hangisi sol, hangisi alt, hangisi üst dış boşluk için?
Cevap:
Soldan sağa: üstpx sağpx altpx solpx;
Yani:
margin: 10px 5px 20px 5px;
margin: üst…sağ..alt…sol;
Bir soru:
Peki bir kenar için boşluk bırakmak istemezsek ne yapacağız?
Cevap:
O zaman sıfır yazacaksınız.
Örnek: margin: 10px 5px 0 5px; burada alt boşluk bırakılmadı, onun için sıfır dendi. Sıfır için sonuna px koymak gerekmiyor.

Padding Yazılışları

Aynen margin’de olduğu gibidir. Sadece başlarda margin yerine padding yazacaksınız. Padding iç boşluklar için kullanılıyordu unutmayın.

Şimdi Internet Explorer, Mozilla Firefox, Google Chrome gibi internet tarayıcısı sayısı çoğalmış olduğu için her birinde hatasız görünüm sağlamak için XHTML kurallarına kesin riayet etmeniz yeterlidir. Her bir tarayıcıda ayrı ayrı kontrol etmeniz gerekmez, çünkü XHTML sayesinde her birisinde kusursuz görüntü sağlanmış olur.

Kolay anlaşılması için bazı örnekler:

1- <p align="left"> Bu neyin başına getirilmişse, onun sonuna </p> eklemek şarttır.

Eski HTML düzeninde sonda </p> olmazsa bile pek fark etmezdi.

2- Kodlar içinde büyük harflere yer yok.
<table WIDTH="100%">
Yanlış… “width” büyük harfle yazılmış.

3- Bazı kodlamalarda değişiklikler:
<frame noresize>
Bu kod şimdi artık şöyle yazılmalı: <frame noresize="noresize" />

4- <hr> ve <br> gibi tagları XHTML ile şimdi şöyle olmalı:
<hr /> ve <br />

Bunlar sadece birkaç örnek. Aslında HTML’de eksik çok şey varmış. XHTML ile bütün o eksikler giderilmiş.

Sitelerimizdeki XHTML ana ayarlayıcıları:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="tr-TR">

Eğer eski bir java script çalışmıyorsa bunların yüzünden çalışmıyor.
Silseniz çalışırlar ama silmek iyi değil. Yeni internet tarayıcıları Mozilla, internet Explorer 7 filan bunlar olmazsa görüntüyü düzgün gösteremiyor.

O halde çalışmayan java sciriplerinizi inceleyin. İçindeki kodları tek tek gözden geçirin. Büyük harfle yazılmış şeyleri küçük harfli yapın. Bunu yaparken bir XHTML rehberine ihtiyacınız olacak. Ne gibi yanlışlar varsa tek tek düzeltirsiniz belki kodunuz çalışır.

XHTML kurallarına göre ne gibi hatalar var ise bulmak için şu » html ve span ile ilgili yazımın ikinci kısmına bakın.