Forum'da ara:
Ara


« Önceki başlık :: Sonraki başlık »  
Yazar Mesaj
Mesaj24.07.2012, 14:43 (UTC)    
Mesaj konusu: Küçük bir CSS Yatay Menü

Kısa bir süre önce kodlama, tasarım çizme, vs. haricinde menü yapmaya başladım. Bu menüyü yapmak aklımda hep vardı ancak o zamanlar tablo ve ya div kenarlarını oval yapmayı bilmiyordum Smile

Öğrendikten sonra her şeyi hazırlamıştım yapmak için. Sonra Özel Destek'ten bir arkadaş örnek tasarım sitesi verdi ve böyle bir tasarım yapabilir misin dedi. Siteye girdiğimde bir de ne göreyim benim kafamda tasarladığım menü orda. Tek fark arka plan felandı. Her neyse birazdan kodunu vereceğim menü tamamen benim kodlamamdır.


FrmBestLive / Menü 1



Ön İzleme Sayfası : http://frmbestlive.tr.gg/FrmBestLive-Menu1.htm

Menünün Kodları :


Kod:
<style type="text/css">
<!--
#menu {
   margin: 0px;
}
#menu ul {
   margin: 0px;
   padding: 0px;
   list-style-type: none;
}
#menu li {
   float: left;
   margin-right: 10px;
   -moz-border-radius: 8px 0px 8px 0px;
   -webkit-border-radius: 8px 0px 8px 0px;
   border-radius: 8px 0px 8px 0px;
   border: 1px solid #999999;
   padding-top: 5px;
   padding-right: 8px;
   padding-bottom: 5px;
   padding-left: 8px;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 12px;
   font-weight: bold;
   color: #000000;
   text-decoration: none;
   background-image: url(http://img.webme.com/pic/f/frmbestlive/469.gif);
   background-repeat: repeat;
}
#menu li:hover {
   -moz-border-radius: 0px 8px 0px 8px;
   -webkit-border-radius: 0px 8px 0px 8px;
   border-radius: 0px 8px 0px 8px;
   border: 1px solid #999999;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 12px;
   font-weight: bold;
   color: #CC00CC;
   text-decoration: none;
}
-->
</style>
<div id="menu">
  <ul>
    <a href="#"><li>Ana Sayfa</li></a>
    <a href="#"><li>İletişim</li></a>
    <a href="#"><li>Hakkımda</li></a>
    <a href="#"><li>FrmBestLive</li></a>
  </ul>
</div>


** Eğer tasarımın geneline koyacaksanız, CSS kısmını CSS'YE ; Kod kısmını da menüyü koymak istediğiniz yere koyunuz.
Önceki mesajları göster:   


Powered by phpBB © 2001, 2005 phpBB Group
Türkçe Çeviri: phpBB Türkiye & Erdem Çorapçıoğlu