Merhaba arkadaşlar,
CSS'ye adım attığım şu günlerde, basit bir tema yaptım, sizinle paylaşmak isterim.
Demoya buradan bakabilir, buradan ise indirebilirsiniz.
Not : CSS'ye yeni başladığımdan dolayı yapılması gerekip de yapmadığım birşey varsa belirtiniz (:
Ücretsiz CSS Portfolyo Teması
13
●1.349
- 31-07-2010, 00:42:22Üyeliği durdurulduÖncelikle hayırlı olsun. Menüleri <div> yerine <li> ile yapmalısın. Bunun için:
<div class="menu">
<ul>
<li><a hreF="#">Menü</a></li>
<li><a hreF="#">Menü</a></li>
</ul>
</div> ekleyeceksin. CSS 'e ise :
.menu{width:200px; height:auto;} /* 200px genişliğinde menü isimli bir div */
.menu ul{margin:0px; padding:0px;} /* <ul> kodumuz için boşlukları kaldırdık. Bunu li de belirteceğiz*/
.menu li{list-style:none; margin:0px: padding:5px;} /* Liste stili yok. Yani başındaki küçük nokta ve padding 5px */
.menu li:a{background-color:#000; color:#FFFFFF;} /* bu da menüdeki link yapın */
.menu a:hover{background-color:#fff; color:#000;} /* Üzerine gelince */
Bunların Yanında:
- En fazla 4 adet <div id=""></div> eklemelisin. Üst - İçerik - Sağ - Alt olarak 4 temel div id. Geri kalanı div class ile yapmalısın. Zaten aynı şey fakat w3 en fazla 4 kullanın diyor, ama kullanın diyor.

<p class="sagustyazi"><h1>Yazıyı Buraya yaz.</h1><h2>Altına Geçip Bunu Yaz</h2><h3>Bi Alta Geç ve Bunu yaz.</h3></p>
ondan sonra başında # ya da " . " olmadan direk
p.sagustyazi{genişlik ve yükseklik ayarları} - Ardından:
p.sagustyazi h1 {margin:0px; padding: 2px; font-size:20px;}
p.sagustyazi h2 {margin:0px; padding: 2px; font-size:15px;}
p.sagustyazi h3 {margin:0px; padding: 2px; font-size:12px;}
h kullanmak yerine <span> <font> <hr> gibi şeyleride p.sagustyazi şeklinde yapabilirsin.
Kodların hiçbirini denemedim fakat çalışması lazım. Daha yolun başındasın. Çok güzel şeyler çıkartacaksın. Tekrar hayırlı olsun
- En fazla 4 adet <div id=""></div> eklemelisin. Üst - İçerik - Sağ - Alt olarak 4 temel div id. Geri kalanı div class ile yapmalısın. Zaten aynı şey fakat w3 en fazla 4 kullanın diyor, ama kullanın diyor.
- 31-07-2010, 00:59:07İşte mükemmel bir yorum teşekkürlerSahiNET adlı üyeden alıntı: mesajı görüntüle
- 31-07-2010, 08:38:47E-posta adresiniz yazan yerde kodunu tam bilmiyorum ama javascriptle tıklandımı o yazıyı silmen daha iyi olur.Logon her zaman bu olacaksa bence .jpeg veya .gif denemelisin.Sadece yazıdan oluştuğu için çabuk açılır sayfan.Kullandığın resimlere border vermelisin,bence daha hoş gözüküyorlar.Ve yine bence background resmi kullanacaksan ya pattern kullanmalısın,ya da tek renk.Örneğin arkaya grinin koyu tonu öne grinin açık tonu.
Ve kodların amaçlarını yaptıkları şeyleri açılımlarını bilmen çok şey kazandırır.Örneğin yazı yazdığın birçok yerde div kullanmışsın.Yanlış değil ama <div> kutu oluşturmak için kullanılır.
Üstteki yorumu okumadım belki aynı şeyleri demiş olabilirim
- 31-07-2010, 22:20:32Aynı şeyleri söylemişsinizKorsaNvBh adlı üyeden alıntı: mesajı görüntüle
- 31-07-2010, 23:40:51Üyeliği durdurulduBirde font olarak myriad pro seçmişsiniz. Ancak her pc'de olmadığı için herkesde gözükmeyecektir haliyle direk myriad pro yazmak
Bunada dikkat edebilirsiniz. sIFR ile yapabilirsiniz fontu ancak tabi bu çok sonraki aşama sizin için. Birde gerekli margin ve padding gibi değerleri sıfırlarsanız daha iyi olacaktır sizin için.
Birde şu mail adresi kısmı için aşağıdaki kodu kullanabilirsin.
<input name="email" type="text" value="E-Mail Adresiniz" onfocus="if(this.value == 'E-Mail Adresiniz') { this.value=''; }" onblur="if(this.value=='') { this.value='E-Mail Adresiniz'; }" /> - 01-08-2010, 11:05:25Kimlik doğrulama veya yönetimden onay bekliyor.Resul ellerine sağlık, arayüzün oldukça estetik ve kişisel duruyor, css kodlama kurallarına tam olarak uyulmasada. Konu içi görsel düzenini yazıda ;
img {padding-right:5px; }
şeklinde verirseniz, yazı ve resim arasındaki 5pixel boşluk ile estetiğinize güç katacaktır.
Footer kısmına ise ilgi çekici bir grafik getirebilirsiniz. - 01-08-2010, 13:21:03Arif oraya şu eklenirse daha iyi olabilirairwebmaster adlı üyeden alıntı: mesajı görüntüle
<style> img {border:1px solid #ccc; padding:3px;} </style>Eğer bu uygulanırsa güzel bir görünüm oluşur neden verdim bunu çünkü o resim çok başıboş durmuş emanet gibi yani.
Ayrıca resulkorkmaz.com yazmışsın o hiç uymamış o alana daha güzel bir font ile yazılabilirdi. - 02-08-2010, 19:54:39Bunu biliyorum, fakat öylesine koyduğum birşeydi.erbilen adlı üyeden alıntı: mesajı görüntüle
Teşekkürler, dikkate alacak 2.sürümünü yapmaya çalışacağım.airwebmaster adlı üyeden alıntı: mesajı görüntüle
Fazla font seçeneği kullanmadım, ama dikkate alacağım.Teşekkürler yorumlar için.liarea adlı üyeden alıntı: mesajı görüntüle
