Konuyu Oyla:
  • Toplam: 1 Oy - Ortalama: 4
  • 1
  • 2
  • 3
  • 4
  • 5
Tema Yapım Dersleri / CSS Coder Anlatım Menü Yapımı
#1
Evet Tema Yapım derslerimizde global.css nin nerede olduğunu öğrendik.
Bugün biraz html e doğru gideceğiz. Bir kutuyu Tablo ile kodlamaktansa CSS ile o kutuyu yapacağız. Ve böylece daha sağlıklı ve boyutunu değiştirmesi kolay bir dizaynımız olacak.

Öncelikle Biz bugün yeni bir css oluşturmayı öğreneceğiz. En baştan bir menü yaparak başlayalım.

Global.css en altına şölye bir kod koyalım
(Editör Bozuk yada bende sorun var sanırım code içine alamıyorum kusuruma bakmayın)

.ilkmenu {
background: #ff0000 url(resimlinki) repeat-x scroll left top ;
color: #6A6A6A;
padding: 7px;
}

Şimdi global.css geniş anlatımda "border" nedir öğrenmiştik. Tekrarlayalım;

Border yaptığınız CSS'nin kenarıdır. Photoshop la kafayı bozanların dili ile "Stroke" dir.

Şimdi biz buna istersek border ekelriz istersek eklemeyiz rengini ayarlarsak daha iyi olacaktır tabi.

.ilkmenu {
background: #ff0000 url(resimlinki) repeat-x scroll left top ;
color: #6A6A6A;
padding: 7px;
border: 1px solid #e4e4e4;
}

[ Kalınlaştırmayı elimle yazıyorum yanlış yazabilirim :( ]

Bundan sonra böyle oldu;

(Bunu CSS olark sitesinde "Dubby" uygulamıştır teşekkür ederim. Onun sayesinde bu konuyu açtım devondan CSS yardımı veriyordum)

Ama dubby oval bir tasarım çizmiş photoshop ta. Bizim borderimiz sivri. Gelin onu oval yapalım;

.ilkmenu {
background: #E4E4E4 url(resimlinki) repeat-x scroll left top ;
color: #6A6A6A;
padding: 7px;
border: #888888 1px solid;
border-radius: 7px 7px 7px 7px;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}


Ama bakıyoruzki Halen Resim boş boş devam ediyor buda kötü bir görüntü sağlıyor. Bir thead değil sonuçta normal tasarım kesik şeklinde düz gradient değil.

Onu şöyle yapalım o zaman

Width: Yaptığınız resmin genişliği
Height: yaptığınız resmin yüksekliği

Tabi resmimiz böyle ise width isterseniz yapmayız
http://st.10tl.net/tema/ares/sky/tcat.png

Ama resmimiz daha farklı ise
http://img20.imageshack.us/img20/7656/55369146.png
(bu resmin oval ve tekrarlanamayacağını düşünelim)

Genişlik ayarı önemlidir o zaman.

px veya % ile ayarlarız. ben size pixel öneririm.

Şimdi resmimizin boyutunu öğrenelim. sonra ise width ve height yani genişlik ve yükseklik ayarını yapalım.

.ilkmenu {
background: #E4E4E4 url(resimlinki) repeat-x scroll left top ;
color: #6A6A6A;
padding: 7px;
border: #888888 1px solid;
border-radius: 7px 7px 7px 7px;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
width: 600px;
height: 60px;

}

[ Benim yaptığım örnektir ]

böyle oldu
ekranalntskq.png

Eveet İşte bitirdik. Aam ona link verirken yazı rengi değişebilir eğer link vereceksek adını şöyle yapalım;

.ilkmenu a:link {

böylece daha doğru olur. Üstüne gelincede değişmez.

Daha sonra size Hoverli birşeyler yapmayı öğreteceğim.

İyi günler dilerim :)
Ara
Cevapla PGM
Teşekkür verenler:
#2
Güzel anlatım teşekkürler şefim.
GÖREVİNİ BIRAKTI
Önce AHLAK ve MANEVİYAT

Hakk’ın tesisi için çalışmamakla Batıl’ın hakimiyeti için çalışmak arasında fark yoktur.



Prof. Dr. Necmettin ERBAKAN


TÜM KONULARIM

Başaɾının içeɾiğindeki en önemli, biɾicik malzeme, insanlaɾla nasıl geçineceğini iyi bilmektiɾ. / Theodore Roosevelt
Ara
Cevapla PGM
Teşekkür verenler:
#3
Rica ederim :)
Ara
Cevapla PGM
Teşekkür verenler:


Hızlı Menü:


Şu anda bu konuyu okuyanlar: 1 Ziyaretçi



Grafik Destek Platformu | Aslında Herşey -

Online Shopping App