Fatih Hayrioğlu'nun not defteri » ortalamak http://www.fatihhayrioglu.com { CSS, HTML ve Javascript } Thu, 09 Feb 2012 08:44:49 +0000 en hourly 1 http://wordpress.org/?v=2012 CSS ile Dikey Ortalama http://www.fatihhayrioglu.com/css-ile-dikey-ortalama/ http://www.fatihhayrioglu.com/css-ile-dikey-ortalama/#comments Fri, 08 Dec 2006 20:24:38 +0000 fatih.hayrioglu http://www.fatihhayrioglu.com/?p=229 Benimde çok fazla sıkıntısını çektiğim elementlerin dikey de ortalama işi için bir çok teori ve yöntem ileri sürülmektedir. Ben bunların en makbul olanını bulup uygulamak istedim ve bu makalede bunu sizlerle paylaşıyorum. Aslında bulunan çözümler beni tam olarak tatmin etmiyor desem yeridir. Aşağıda anlatılacak yöntem istediğimiz sonucu elde etmek için yeterli olacaktır.

 CSS ile dikey oratalama ile ilgili farklı yöntemler vardır. Ayrıca bazı şartlara göre de kodlama önerileri vardır, biz burada bunlara değinmeden geçeceğiz. İlgilenenler makalenin sonunda verilen kaynaklar bölümündeki linkleri takip edip ilgili yöntemlere erişebilirler.

CSS ile dikeyde ortalama yapmak için vertical-align özelliği var ise de bu özellik HTML’deki tablo gibi çalışmaz. Yani istediğimiz sonuca bizi ulaştırmaz.

CSS vertical-align özelliği belirsiz yükseklikte(içeriği değişebilen) kutularda işe yaramaz.

IE için Keystone’un sunduğu çözüm; mutlak konumlandırma uygulanmış kapsayıcı elemente yüksekliğinin yarısı kadar top(veya margin-top) değeri uygulamaktır. Bu kapsayıcı elementin içindeki elementi dikeyde ortalayacaktır.

Mozilla, Opera, Safari gibi standart web tarayıcıları için çözüm çok farklıdır. Üstteki katmana display:table tanımı yapılır. İçteki elementlere de display:table-cell özelliği uygulanır. Ayrıca dikeyde ortalanmak istenen elemente vertical-align tanımı yaparak element dikeyde ortalanır. (Bu özelliği IE kavrayamamaktadır. Kavramamakta da ısrarlıdır. IE 7 display:table ve türevlerini desteklemiyor.)

İki çözüm vardır altçizgi(_) ve (#) ile yapılan bir çözüm vardır. IE(IE7 hariç) (_) ile tanımlanan kodu görmediği için yorumlamayacaktır. # ile başlayan kodları tüm IE versiyonları(IE7 dahil) görmeyecektir. Bu işaretlerin kullanım amacı tüm versiyonlarda aynı sonucu elde etmektir.

Aşağıdaki kod IE5+,FF, Opera 7, Konqueror 3.0.3 altında standart ve garip mod da çalışıyor.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>CSS ile dikey ortalama</title>
<style>
#Kapsul{
	display: table;
	height: 400px;
	#position: relative;
	overflow: hidden;
	border: 1px solid green;
}
#IcerikAlani{
	#position: absolute;
	#top: 50%;
	display: table-cell;
	vertical-align: middle;
}
#alan{
	#position: relative;
	#top: -50%;
	border: 1px solid green;
}
</style>
</head>
<body>
  <div id="Kapsul">
    <div id="IcerikAlani">
    <div id="alan">Lorem Ipsum is simply dummy text of the printing and typesetting  industry. Lorem Ipsum has been the industry's standard dummy text ever  since the 1500s, when an unknown printer took a galley of type and  scrambled it to make a type specimen book. </div>
    </div>
  </div>
</body>
</html>

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

Kaynaklar

]]> http://www.fatihhayrioglu.com/css-ile-dikey-ortalama/feed/ 36 CSS İle Web Sayfası Oluşturma http://www.fatihhayrioglu.com/css-ile-web-sayfasi-olusturma/ http://www.fatihhayrioglu.com/css-ile-web-sayfasi-olusturma/#comments Thu, 28 Sep 2006 08:46:09 +0000 fatih.hayrioglu http://www.fatihhayrioglu.com/?p=173 CSS’in en büyük avantajlarından biri ve en önemlisi başka bir koda(XHTML hariç) ihtiyaç duymaksızın sayfa iskeleti ve stilini oluştumamıza olanak sağlamasıdır. CSS 1996′dan beri kullanıla gelen bir standart olsa da popülaretesini Zen Garden’ın sayfa planlaması için kullanmaya başlamasından sonra arttırmıştır. Eskiden sayfayapısını tablolarla oluştururduk. Bu kullanımın bir çok sorunları vardı. Bunları aşmak için CSS ile sayfa planlama metodları kullanılmaya başlanmıştır. Biz burada bu konudan bahsedeceğiz.

CSS ile sayfa planlaması yaparken bazı problemlerle karşılaşacağız, ancak buradan şu anlaşılmamalı CSS’de sorun var. Aksine sorun CSS’den değilde standartları kendine göre yorumlayan web tarayıcılarından kaynaklanmaktadır. Zamanla bu web tarayıcıları kendine çeki düzen vermeye başladı(Örn: İE7 de CSS sorunlarının bir çoğunu halletti) Amaç körü körüne tablosuz web sayfası tasarlamak değil, sayfalarımızı standartlara ve web tarayıcılarına en uygun şekilde kodlamaktır. Hiç tablo kullanmayayım diye tablo kullanılması gerek yerlerde de tablo kullanmamak abesle iştigaldir.

Aslında şimdiye kadar ki makaleler de bu konunun temellerini attık.CSS ile konumlandırma(positioning) , Float ve Clear özellikler ile konumlandırma vd. makaleler bu işin temellerine değindik. Burada daha elle tutulur örneklerle bu metodu anlatmaya çalışacağız.

CSS sayfa planlama metodları üç temel konu üzerine inşa edilmiştir. Konumlandırma, floating ve margin farklılıkları. Bu üç temel konu anlaşıldıktan sonra CSS ile sayfa planlamayı anlamamız çok kolaydır. Biz burada floating metodu ile sayfa oluşturmayı göreceğiz. Bunun dışında konumlandırma öğeleleri kullanarak sayfa oluşturma ve eksi margin değeri ile sayfa oluşturma metodlarıda vardır. Ancak biz burada bunlara değinmeyeceğiz.

Sabit Genişlikteki Sayfalarda İki Kolonlu Yapı

İlk olarak XHTML kodlarını yazalım. 

<div id="sayfa">
<div id="ustAlan">
...
</div>
<div id="icerik">
...
</div>
<div id="anaMenu">
...
</div>
<div id="altAlan">
...
</div>
</div>

Önemli bir nokta varki oda icerik alanının anaMenu‘den önce gelmesi gerekmektedir. Erişebilirlilik(yani tüm araçlarda sayfamızın en iyi şekilde görünmesi) için icerik alanının anaMenu‘den önce gelmesi gerekir. Çünkü pda ve cep telefonu gibi araçlarda katmanların sıralamasına göre ekranda görüneceğinden, ilk olarak içerik alanının görünmesi tercih sebebidir. şžimdi css kodumuzu yazarsak:

#sayfa
{
	width:768px;
}

#ustAlan
{
	width: 768px;
} 

#icerik
{
    float: right;
    width: 568px;
}

#anaMenu
{
    float: left;
    width: 200px;
}

#altAlan
{
    width: 768px;
    clear: both;
}

Bu kodu yazdıktan sonra sayfamız başta gördüğümüz şekildeki duruma gelmiş bulunmaktadır. Burada yazdığımız kodda “icerik” alanının sağa, “anaMenu” alanının sola yerleşmesi için genişlik değeri ve float değerleri tanınmlanmıştır. Ayrıca altAlan‘ın bu iki bölümün altında kalması için clear:both tanımlaması yapılmıştır.

CSS ile sayfalarımızı ve elementlerimizi ortalamak bölümündeki metodu uygulayarak sayfamızı ortalayabilriz. 

#sayfa{
    width: 768px;
    margin:0 auto;
}

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

Sabit Genişlikteki Sayfalarda en çok rastlanan problemler sabit genişlik uygulanan katmanlara pading, margin ve border değeri atandığında IE5 de sorunlu görünmesidir bu problemi aşmak için iki yöntem vardır. Birinci yöntem CSS ile Kutu modeli, sorunları ve çözümleri bölümünde anlatılmıştır. ikinci yöntem ise kapsayıcı katmanlara(icerik, anaMenu vb.) padding ve margin vermek yerine kapsayıcı katman içindeki elementlere bu atamaları yapmaktır.

Basit yapılı sayfalarda ikinci yöntemi, karmaşık yapılı sayfalarda ise birinci yöntemi denemenizi öneririm.

Likit Sayfalarda İki Kolonlu Yapı

Likit Sayfalarda Sabit Genişlikteki Sayfalar’dan farklı olarak genişlik değerleri piksel(px) olarak değil yüzde(%) olarak verilmesidir. Bu tür sayfalarda sayfa genişliği web tarayıcısının boyutu ile bağlantılıdır. Web tarayıcısının genişliği arttırıldığında sayfa genişliği artacak, web tarayıcısının genişliği azaltıldığında sayfa genişli azalacaktır. Kodu yazarsak: 

#sayfa{
    width:83%;
    margin:0 auto;
}

#ustAlan
{
	width: 100%;
} 

#anaMenu
{
    float: left;
    width: 30%;
}

#icerik
{
    float: right;
    width: 70%;
}

#altAlan
{
    width: 100%;
    clear: both;
}

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

3 Kolonlu Yapı

Bir çok sitede üç kolonlu yapı kullanılmaktadır. 3 kolonlu yapı ile iki kolonlu yapının kodlamasında fazla bir fark yoktur. Tek yapamız gereken yapıyı iki kolonlu bölümlere ayırmaktır, bunun için sağdaki iki kolonu bir kapsayıcı katman(KapsayiciAlan) içine alarak yapıyı iki kolonlu hale getirdik(anaMenu ve KapsayiciAlan) 

#sayfa{
    width:768px;
    margin:0 auto;
}

#ustAlan
{
	width:768px;
} 

#anaMenu
{
    float: left;
    width: 200px;
}

#KapsayiciAlan
{
    float: right;
    width: 568px;
}

#icerik
{
    float: left;
    width: 368px;
}

#BannerAlani{
    float: right;
    width: 200px;
}

#altAlan
{
    width:768px;
    clear: both;
}

Ve ayrıca xhtml koda da aşağıdaki değişiklikleri yaptığımızda üç kolonlu yapıyı elde ederiz.

<div id="sayfa">
<div id="ustAlan">
...
</div>
<div id="KapsayiciAlan">
<div id="icerik">
...
</div>
<div id="BannerAlani">
...
</div>
</div>
<div id="anaMenu">
...
</div>
<div id="altAlan">
...
</div>
</div>

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

Aynı şekilde Likit sayfalarda üç kolonlu yapı oluşturabiliriz. Yapmamız gerek tek şey değerleri (%) olarak vermektir.

4,5 vd. kolonlu yapıyı da aynı şekilde yapabiliriz. Bence 3 kolonlu yapıdan sonraki kadamelerde(4,5 vd.) tüm katmanlara float:left verilerek oluşturmak daha mantıklı ve kolay olur.

]]> http://www.fatihhayrioglu.com/css-ile-web-sayfasi-olusturma/feed/ 102 CSS ile sayfalarımızı ve elementlerimizi ortalamak http://www.fatihhayrioglu.com/css-ile-sayfalarimizi-ve-elementlerimizi-ortalamak/ http://www.fatihhayrioglu.com/css-ile-sayfalarimizi-ve-elementlerimizi-ortalamak/#comments Tue, 12 Sep 2006 19:55:22 +0000 fatih.hayrioglu http://www.fatihhayrioglu.com/?p=159 CSS’de kullandığımız içerik alanlarını (blok-level ve inline-level) elementleri nasıl oratalayacağımızı göreceğiz. Inline-level elementleri text-align:center özelliğini kullanarak ortalayabiliriz. Blok-level elementleri ortalamak için ise bir iki metod vardır. Sırası ile inceleyelim.

1- Genişleyebilir blok-level elementleri ortalamak

.ortala
{
    margin-left: 10%;
    margin-right: 10%;
}

<p class="ortala">Lorem Ipsum is simply dummy text of the printing and typesettingindustry. </p>

Genişliği sabit olmayan, genişleyebilir blok-level elementlerin ortalanması için bu metod kullanılır. Tüm web tarayıcılı bu metodu destekler.

2- Sabit genişlik atanan blok-level elementlerini ortalamak

2.a. margin auto ile genişliği belirlenmiş elementleri ortalamak

Mantık olarak, içerik blokunun sağ ve sol margin değerlerine auto ataması yapıyoruz.

W3C’de bu konu hakkında şu ifade mevcuttur: "Eğer margin-left ve margin-right değerleri auto verilirse bu blokun ortalanması anlamına gelir."

.ortala2
{
    margin-left: auto;
    margin-right: auto;
    width: 50em;
}

NN4 (Mac and Win), Win/IE4, Win/IE5, Win/IE5.5, Win/IE6 (Garip mod : quirks-mode) web tarayıcılıar bu kodu desteklememektedir.

Bu sorunu aşabilemke için iki satır kod yazmamız yeterli olacaktır.(NN4 hariç)

Bu metodu desteklemeyen web tarayıcıları için body etiketine text-align:center ataması yaptığımızda sorun çözülmüş demektir. 

body
{
	text-align: center;
}
.ortala2
{
    margin-left: auto;
    margin-right: auto;
    width: 50em;
}

Yanlız bir sorunumuz daha var. text-align:center ataması body içindeki tüm elementlerin ortalanmasına neden olacaktır. Bunu engellemek için bir katman oluşturup bu katman da hizalama değerini başlangıç değerine(yani sola yaslamalıyız) çevirmeliyiz. 

body
{
	text-align: center;
}
.ortala2
{
    margin-left: auto;
    margin-right: auto;
    width: 50em;
    text-align: left;
}

Bu kodlama tüm web tarayıcılarında çalışacaktır.(NN4 hariç)

2.b. Konumlandırma(positioning) kullanılan elementlerin negatif margin ile ortalanması

Göreceli konumlandırılmış elementleri ortalamak için bu metod kullanılabilir. Bu metod da bir önceki gibi fazladan bir katman kullanmaya gerek yoktur. Genişlik tanımı yapılan göreceli konumlandırılmış elementin margin-left değeri element genişliğinin yarısı(1/2) kadar verilerek sağlanır.

.ortala3 {
    width: 720px;
    position: relative;
    left: 50%;
    margin-left: -360px;
}

Burada sizlere bir iki metodla element ortalamayı gösterdik. Siz kullandığınız yer ve ihtiyaçlarınıza göre bunlardan birini kullanabilirsiniz.

]]> http://www.fatihhayrioglu.com/css-ile-sayfalarimizi-ve-elementlerimizi-ortalamak/feed/ 45