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
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 :)
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
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 :)