csstemplate2

< Web Derslerine Geri Dön <

Soru:

Hem yan menünün olduğu hem de üst menünün olduğu bir CSS tasarımı siteme uygulamak istiyorum, ancak yan menüyü kaldırarak sadece üst menüyü kullanmak ve bu sayede sitenizde olduğu gibi sayfalara geniş yer ayırmak istiyorum. Bu adreste bir tasarım var ancak bir türlü beceremedim. Yardımcı olur musunuz?

Cevap:

Bahsetmiş olduğunuz tasarımda birden fazla arkaplan katmanı kullanıldığı için reklam satırı sorun yaratacaktır ve katmanlarda kaymalar ortaya çıkacaktır. Bunun için katmanların padding ve resimlerin boyut (genellikle yükseklik) değerleriyle oynamak gerekir. Bu dersimizde buna yönelik bir çalışmamız oldu. Cevabı burada bulabilirsiniz.

Derse başlamadan önce aşağıdaki kodu bir yere not alın, çünkü işinize yarayacak:

h1#title{display: none;}

h2#title span {display: none;}

div.header{display: none;}

li.nav_element{list-style-type: none;}

li.nav_element{display: none;}

Belki izlemeden önce sonucu görmek istersiniz. Boştan yere izlemiyeyim diyorsanız aşağıdaki örneğe bakınız:

Uyguladığımız CSS tasarım: http://www.freecsstemplates.org/preview/logistix

Ve sonuç: http://hackerfriend3.tr.gg

Bu dersimizde farklı bir free CSS tasarım uygulayacağız.

Tasarımın adı Logistix. Resimlerin konumlarını orjinalleriyle değiştiriyoruz…

Mavi dikdörtgen olan yer İÇERİK; kırmızı YAN MENÜ

Yan menü'yü içerik kısmına ekleyerek, sayfalara daha geniş yer ayıracağız…

CSS dosyasını düzenlemek için açıyoruz.

Notepad ile birlikte aç diyoruz.

Yan menünün konumunu bularak katmanıyla birlikte siliyoruz.

Menünün yerini, yazılardan giderek bulabiliriz.

Görüldüğü üzere artık menü yok.

Bu haliyle tasarımı sitemize uygulama devam edelim.

BODY tag öncesi bütün kodları siliyoruz.

… diğer sayfaya geçiniz…

BODY tag kapamasından sonraki kodları da siliyoruz.

… diğer sayfaya geçiniz…

Şimdi sıra içerik kısmını silmeye geldi.

Index dosyasını düzenlemek için açıyoruz.

Şablonun içinde içeriği oluşturan kısmı siliyoruz.

Content kodunun başlangıç ve bitiş kısımlarına dikkat ediniz.

Tasarım üzerine ve altına ilgili kodları yapıştırıyoruz.

Kaydet diyerek değişiklikleri kaydediyoruz.

Bu haliyle CSS kodu yapıştırıınca, tasarım oturmamış gözüküyor.

Padding ve yükseklik ayarlarıyla ufak oynamalar yapacağız.

Başlık resmi tasarımın içine dağıldığı için, yükseklik…

…değeri ile oynuyoruz. 180 piksel yükseklikten, 148 piksel yüksekliğe alıyoruz.

İlk başlık yazısının değerini 120'den 100'e alıyoruz.

Artık üstten 120 yerine 100 piksel uzaklıkta olacak.

Diğer başlık yazısının değerini 134'den 110'e alıyoruz.

Artık üstten 134 yerine 110 piksel uzaklıkta olacak.

Menü yazıları da aşağıda kaldığı için, yukarı almak lazım.

Üstten 17 piksel olan uzaklığı 10 yapıyoruz.

İçerik (content) kısmındaki padding değerini sıfırlıyoruz.

Böylece içerik kısmı da yerine oturmuş olacak.

Yaptığım değişiklikler ile tasarım bu hale geldi.

Resme ve kodlara birlikte bakınız, kodları okuyup anlmaya çalışın.

Bazı tasarımlarda Reklam Satırının Azizliğine uğrayabiliyoruz.

Bunu da padding değerleri ile oynayarak ortadan kaldırıyoruz.

Bilgi Güçtür, Paylaştıkça Büyür!

Artık siz de kendinize özgü CSS tasarımlar yapabilirsiniz, başarılar.

Resimleri orjinal boyutunda izlemek için üzerlerine tıklayınız…

< Web Derslerine Geri Dön <