Anasayfa iletisim haber tarifler tuhafbilgiler yorum toplist sozlerimsozler tuhafresimler forum saglik  
 
   
 
   
 
   
 
 
 
 
Muzik
 
 

Ciz-Dizayn

Css Dikey Menuler

 Örnek Görünüm:
 
 
HTML Kodu
<img src="img/top.jpg" width="202" height="4" alt="" class="top flt" />
<div class="menubg flt">
    <ul class="menu flt">
        <li class="current_page_item"><a href="#">Ana Sayfa</a></li>
        <li class=""><a href="#" title="About">Hakkımızda</a></li>
        <li class=""><a href="#" title="Work">Projeler</a></li>
        <li class=""><a href="#" title="Contact">Referanslar</a></li>
        <li class=""><a href="#" title="Location">İletişim</a></li>
        <li class=""><a href="http://www.ciz-dizayn.tr.gg" title="13 Styles">CSS Örnekleri</a></li>
    </ul>   
</div>
<img src="img/bot.jpg" width="202" height="3" alt="" class="bot flt" />

 

CSS Kodu
/* CSS Document */
img{border:0px;}
.flt{float:left;}
.menubg{clear:left; background-color:#6FA9C7; width:202px;}
.menu{float:left; clear:left; font:bold 11px Helvetica, Arial, sans-serif;}
.menu li {
margin:0px 0px 0px 0px;
    list-style:none;
    }
.menu a, .menu a:visited {
    width:186px;
    height:22px;
    margin:0px 0px 2px -32px;
    position:relative;
    display:block;
    color:#cbe7f5;
    text-decoration:none;
    background:url(../img/menubg2.jpg) no-repeat;
    padding:4px 0 0 8px;
    }
*html .menu a, .menu a:visited {
    width:186px;
    height:22px;
    margin:0px 0px 2px -32px;
    position:relative;
    display:block;
    color:#cbe7f5;
    text-decoration:none;
    background:url(../img/menubg2.jpg) no-repeat;
    padding:4px 0 0 8px;
    }
.menu a:hover, .menu a:active,
.menu li.current_page_item a, .menu li.current_page_item a:visited  {
    background:url(../img/menubg1.jpg) no-repeat;
    text-decoration:none;
    }   
.bot{clear:left;}

Örnek Görünüm:

 

HTML Kodu
<div class="outer">

<div class="menu">
   
<ul>
       
<li><a href="http://www.ciz-dizayn.tr.gg">Ana Sayfa</a></li>
       
<li><a href="
http://www.ciz-dizayn.tr.gg

">Hakkımızda</a></li>         <li><a href="http://www.ciz-dizayn.tr.gg">Hizmetler</a></li>

        <li><a href="http://www.ciz-dizayn.tr.gg">İletişim</a></li>

    </ul>
</div>
</div>

 

CSS Kodu
/* CSS Document */
img{border:0px;}
.flt{float:left;}
.menubg{clear:left; background-color:#6FA9C7; width:202px;}
.menu{float:left; clear:left; font:bold 11px Helvetica, Arial, sans-serif;}
.menu li {
margin:0px 0px 0px 0px;
    list-style:none;
    }
.menu a, .menu a:visited {
    width:186px;
    height:22px;
    margin:0px 0px 2px -32px;
    position:relative;
    display:block;
    color:#cbe7f5;
    text-decoration:none;
    background:url(../img/menubg2.jpg) no-repeat;
    padding:4px 0 0 8px;
    }
*html .menu a, .menu a:visited {
    width:186px;
    height:22px;
    margin:0px 0px 2px -32px;
    position:relative;
    display:block;
    color:#cbe7f5;
    text-decoration:none;
    background:url(../img/menubg2.jpg) no-repeat;
    padding:4px 0 0 8px;
    }
.menu a:hover, .menu a:active,
.menu li.current_page_item a, .menu li.current_page_item a:visited  {
    background:url(../img/menubg1.jpg) no-repeat;
    text-decoration:none;
    }   
.bot{clear:left;}

 





Bu sayfa hakkındaki yorumlar:
Yorumu gönderen::17.07.2012, 06:43 (UTC)
inthecss
inthecss
Kapalı

Basit ama fena değil. :)



Bu sayfa hakkında yorum ekle:
İsmin:
Mesajınız:
 
 
 
• BlogAlp • Link Takas • Link Takas
Gazete oku
=> Sen de ücretsiz bir internet sitesi kurmak ister misin? O zaman burayı tıkla! <=