31 Eki 2007
Css örnekleri 1
Menümüzü bozmadan sadece gereken kodları gereken yerlere ekleyerek daha karizmatik bir yapalım.
İlk bloğumda kullandığım menunun kodları ikon eklemeden önce böyleydi.
.menu {margin-bottom: 4px; width:250px;}
.menu li{list-style: none; border-bottom: 1px dashed #DDC; margin:0; padding:0;}
.menu a {color: #666; display: block; padding: 3px 0 3px 4px; font-size: 1em;}
.menu a:hover{ color:#4A0000; background: #EEEEE9; border-left:1px red solid;}
Ben buradaki kodlardan ".menu a:hover" ın sonuna sacede şunları ekledim.
.menu a:hover{ color:#4A0000; background: #EEEEE9; border-left:1px red solid; background:url(http://img139.imageshack.us/img139/9852/playerplaysr5.png) center right no-repeat; }
Yani sadece bir arkaplan ( background ) atadım. Bu merkezde ( center: yazıya göre ne aşağıda nede yukarıda ) olsun dedim. Sağ tarafta (right) olsun dedim ve tekrar etmesin (no-repeat) dedim.
Yazılar solda ve simgem sağda olduğu için resimle yazı üstüste binmedi. Ama ben solda (left) olmasını isteseydim bu haliyle ortalık biraz karışabilirdi. Resim üzerinde yazılar geleceğinden ne resmi belli olacak ne de yazı. Şimdiki haliylede yazı ve resimler üstüste gelebilirdi. Eğer benim kategori isimlerim uzun olsaydı ya da menu genişliğim daha kısa olsaydı.
Bunu bilerek yaptım çünkü kendi menunuze uyarlamak istediğinizde (herkez aynı menu stilini kullanmadığından) benden yardım isteyeceksiniz. Tabii bunu yardım isteyesiniz diye yapmıyorum. Sadede gelelim.
.menu a’ da padding: 3px 0 3px 4px; yazan bir yer var. İşte burası yazının (sırasıyla) Üstten, sağdan , alttan, ve soldan ne kadar içeride olması gerektiğini ayarlar. Bizim kullandığımız ikon 16px genşliğinde olduğundan ve solda olduğundan buradan en az bu kadar bir boşluk bırakalımki yazılarla resimler üstüste gelmesin. Yani 4px yerine en az 16 px yazalım. padding: 3px 0 3px 18px; ben 18 yaptım.
Tabii resmi sola getirdikte orada bir kırmızı çizgide çıkıyor. Kaldırmak isterseniz ya da resim koymak yerine böyle birşey yapmak isterseniz .menu a:hover‘deki border-left:1px red solid; yazan yeri tamamen silebilir ya da kalınlık (1px) renk (red) ve çizgi tipini (solid) ayarlayabilirsiniz.
Bu anlattıklarımı pek çok değişik şekilde yapmak mümkün. İşte buda onlardan biri…
Kolay gelsin.
Sayfalar: 1 2
Tesekkürler Pardus007!Çok işime yarayacak! :)
Sağolasın Pardus abi çok güzel bir kaynak olmuş gerçekten. :)
Bu arada yazıyı 2 sayfa nasıl yaptın?
Pardus007
Onun için bir yazı yazıyorum. Aslında basit birşey sadece diğer sayfaya geçilmesini istediğin yere < --!nextpage--> ekliyorsun.
Merhaba. Zamanında daha önceden uyarladığın bir temayı kullanıyordum, ancak bugün kazara sildim. İşin kötüsü yedeklemeyi nasıl olduysa unutmuşum. Tabi üzerinde bir hayli oynama yapmış olduğum için aynısını tekrar uygulamam çok zamanımı alacaktı. Dolayısıyla 3.nesil temam için kolları sıvadım. Çok da güzel bir problemim var. Standart Blogcu temalarından birini kullanmaya karar verdim ancak kullanılan resimlerin hepsi css içinde tanımlanmıştı. Ben de css kodunda değişiklik yaptım, fazla bandwith harcamayacağını da düşünerek ücretsiz geocities hesabıma yükledim.
http://www.geocities.com/ufubo/yeniufublog.css
Resimleri ayrıca linklememe rağmen sanırım gene http://www.geocities.com/ufubo/ klasörü içinde arıyor. İlla ki ücretli bir hosting almam gerekmemeli bence, bu işin altından nasıl kalkarım, yükleme yapabileceğim kaliteli ve ücretsiz bir yer var mı acaba??
Googlepages’i tavsiye ederim. Bence geoticies de olur fakat resimleri blogcudan çekme başka bir adrese at oradan çek. Resimleride googlepages’ e at derim.
pekala, teşekkür ederim. deneyeceğim ;)
evet, denedim, uyguladım. googlepages ilaç gibi geldi, çok rahatladım =) teşekkürler..
abi blogsayfası diye birşey gördüm,oraya geçmeyi düşündüm ama sanırım tasarımla oynayamıyoruz.tasarımı değiştirebiliyorsam nasıl yaparım ilgilenirsen çok sevinirim Birol abi.iyi bloglamalar :)
Bu anlattıklarımı pek çok değişik şekilde yapmak mümkün. İşte buda onlardan biri…
Kolay gelsin.
——————————–
Teşekkürler.Pardus ben uğraştım ama yapamadım bunu ya.Acaba Sen bana kodları nerey koycağımı bulabilir misin?
Yanında işaret çıkmasını istiyorum.
* * * * * * *
Pardus007
Yeni bir yazı hazırlıyorum (Css menu) Orada sorunuzun cevabının bulacaksınız.
Aslında ikinci sayfada sorunuzun cevabı var.
pardus abi bişi sorcam.Acaba siz googlepages’e nasıl .js veya .html vb.dosyalar yükleyebiliyorsunuz veyada şarkı..
Öncelikle bir googlepages üyeliğin olmalı( ücretsiz)
Sonra Sonra giriş yapıp ayarlarını ve yüklemelerini yaptığın veri girdiğin sayfaya gireceksin.
Bu sayfa aşağıdaki gibi.
sayfadaki upload linkine bas ve istediğin dosyayı seç ve yükle. Bu kadar basit