Div Fixleme, Left Right Sorunu Ve Alta Div Sabitleme

Bu dersimizde Dreamweaver'da CSS ayarları, left right sorunu, div'i fixed yapma gibi konuları işleyeceğiz.

Merhaba arkadaşlar,

Sizinle uzun zamandır araştırıdığım birşeyi paylaşmak istiyorum. Bu dersimizde Dreamweaver'da CSS ayarları, left right sorunu, div'i fixed yapma gibi konuları işleyeceğiz.

Fixed Özelliği

Öncelikle ilki olan Facebook'un da üst div'inde kullanmış olduğu fixed özelliğidir. Bu basit bir yapıdır. Bir div oluşturuyoruz ve div'imize bir CSS tanımlıyoruz. Tanımladığımız CSS'i çift tıklayıp açtıktan sonra Konumlandırma (POSITONING) kısmına geliyoruz. Ordan Position seçeneğini FIXED yapıyoruz. Daha sonra WIDTH özelliğini de 100% yapıyoruz.



Left ve Right Div Özelliği

Bir diğer anlatıcağım konu sitelerimize uygulamış olduğumuz LEFT DIV ve RIGHT DIV özelliğidir. Günümüzde bir çok sitede kullanılır ve eğer forum sitelerine dikkat ederseniz onlar bu LEFT-RIGHT özelliğini olağanüstü kullanır. Herhangi bir forum sitesine girdiğinizde sayfayı küçültünce soldaki ve sağdaki içerikler sayfayı darlaştırdıkça küçülür ama farkederseniz, bir zaman sonra sağ tarafdaki div sabit bir hal alır. Ben bu içeriğimden bundan bahsedeceğim.

Öncelikle bir div açıyoruz ve bu divimize bir CSS tanımlıyoruz. Örneğin bar adında bir diviniz olsun. Bu divimizin şimdilik herhangi bir özelliğiyle oynamayalım. Bu div.bar'ın içine 3 tane daha div açın. Left Right ve Both olmak üzere. Left div'inin CSS'ini oluşturup açın ve Kutu (BOX) kısmına gelerek FLOAT özelliğini LEFT yapın. Aynısını RIGHT uygulayın. Both div'inin ise Kutu kısmına gelin ve CLEAR özelliğini BOTH yapın.



Daha sonra Sol ve sağ tarafa uzun olucak şekilde yazılar doldurun ve sayfanızı yandan daraltın, küçültün iyicene. Sağ div'in sol div altına geçtiğini görüceksiniz.



İşte bunun olmaması için açmış olduğunuz en alttaki div'in yani div.bar'ın CSS dosyasına gidin. Oradan açmış olduğunuz div'i bulun ve kod kısmına min-width:(İSTEDİÐİNİZ DEÐER)px; kodunu yazın. Bu kod şu işimize yarayacak. Sayfamız daralma esnasında vermiş olduğunuz değerde kalacaktır ve böylece herhangi bir kayma olmayacaktır.



Alt Kısma Sabitlenmiş Menü

Yapmış oldugunuz sitede bazen içeriğin çok az olduğu sayfalar olacaktır. Örneğin bir iletişim sayfasında ne kadar çok bilgi olabilir ki. Bu gibi durumlarda sayfanın en altına yapmış olduğumuz alt kısmın, bu iletişim sayfasının içeriğine çok yakın olduğunu görüceksiniz. Bu hoş bir görüntü çıkarmaz, o yüzden bu sistemi kullanmakta fayda var. Eğer ne demek istediğimi anlamadıysanız Google'u açın ve sayfayı sağ üst köşeden küçültün. Sayfa çubuğunu aşağı indirin ve en alttaki linklere bakın. Sayfa boyutuyla oynadığımızda o linklerin alt tarafa sabit olduğunu görüceksiniz. Ben burda bu sistemi size anlatmaya çalışacağım.

Yapılması gereken 2 basit olay vardır: Öncelikle CSS dosyanızda Body, Html stilini oluşturmanız gerekir. Daha sonra body, html stiline giriyoruz ve kutu'dan HEIGHT özelliğini 100% yapıyoruz.



Daha sonra bir div açıyoruz. Ben div.index diye bir div açtım. Bu divin altına bir dv daha açıyoruz. burda önemli olan işin mantığını anlamanız. div.index'inde height özelliğini %100 yapıyoruz. Bu genişliğe %100 vermemizin bize şöyle bir faydası, %100 yapınca divimiz genişlik olarak bütün sayfayı kaplıyor. div.index'i genişliğine %100 verince tüm sayfayı kaplıcak ve altta eklediğimiz div'i iktiricek. Böylece en alttaki div'imiz en sabit durumda kalıcak.

Kaynak Dosyası Eklenmiştir. Buradan indirebilirsiniz.

Umarım anlatabilmişimdir. Bir faydan dokunmuştur. Herhangi bir Sorunuz olursa yorum kısmına yazarsanız yardımcı olmaya çalışırım.. Kolay gelsin. (:


  • Etiketler;
Mert Köksal
MK | Tasarım // www.facebook.com/mktasarimm
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

Merhabalar, Web sitemde divleri sabitleyemiyorum , anlattığınız Fixed Özelliği ile yapabilirmiyim www.ekstrakazan.com adresine bakabilirseniz daha iyi olur ne demek istediğimi anlarsınız
Tabi kullanabilirsiniz. Yanlız php kodlamasıyla, 3 adet reklamınızı dive gömmeniz gerekicektir.

Yukarı Git