Kodlarla Dövüşen Adam:HF

Forum


    Bilgi Paylaşım Formu
    Sormak istediğniz herşeyi sorabilir, paylaşımda bulunabilirsiniz...

Hakkında


    Her yıl yapılan 'en iyi buğday' yarışmasını yine aynı çiftçi kazanmıştı. Çiftçiye bu işin sırrı soruldu...




Bir Hikaye: En iyi Buğday
Her yıl yapılan 'en iyi buğday' yarışmasını yine aynı çiftçi kazanmıştı. Çiftçiye bu işin sırrı soruldu. Çiftçi,

- "Benim sırrımın cevabı, kendi buğday tohumlarımı komşularımla paylaşmakta yatıyor" dedi.

Elinizdeki kaliteli tohumları rakiplerinizle mi paylaşıyorsunuz? Ama neden böyle bir şeye ihtiyaç duyuyorsunuz? diye sorulduğunda, devamını oku...


Bilgi Paylaşımı grubumuza kayıt olun...
Grubu ziyaret et!
Hafta içi hergün bir adet komik, eğlenceli yada
ilginç video ve güncel full program sizlerle...

Tümünü Göster / Kapat




Big Dog Robot




Arap Köy
3D Wallpapers
Photoshopar
Komplo Var
Pazarlama©a
Uğra Buraya
FreGEN
Kuş ve Balık Evi
Hakan-Fan


ÖrneXiteler
Afilli Yalnızlık
Ali Web1
Bzmcty
Cixin Mekanı
İddaa Zamanı
İstanbul Rehberi
Orjinal Game
Sanalcity


HackeR FrienD

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 <





Bu site 1024x768 çözünürlük ve üzeri,
32 bit görüntü kalitesi ile
FF1, IE7 ve Google Chrome
tarayıcıları için optimize edilmiştir.
Alıntı olarak göstermek şartıyla
sitemizdeki tüm içeriği kullanabilirsiniz.




Etiketler: CSS|Wordpress|Joomla|HTML|JAVA|Tasarım|Photoshop|İngilizce|Google Adsense|Google Pagerank|Tekno Bilgi|Tekno Haber|Bilgi Paylaşımı|


Zulüm, başkasına ait olanları sahiplenmektir ve Allah zulmedenlerin yanında değildir!





Bu web sitesi ücretsiz olarak Bedava-Sitem.com ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?
Ücretsiz kaydol