Forum'da ara:
Ara


« Önceki başlık :: Sonraki başlık »  
Yazar Mesaj
Mesaj02.06.2011, 19:03 (UTC)    
Mesaj konusu: css menüler .....

önizleme yapabilmek için http://www.cssdesk.com/ girip kodu yapiştirin ayrıca bu sitede kod denemelerı tasarım denemeleri yapabilirsiniz.


Yatay turuncu menü:
Kod:

  <style type="text/css">
        <!--
        #tdturuncumenu {
        height: 47px;
        width: auto;
        }
        #tdturuncumenu ul {
        list-style-type: none;
        padding: 0px;
        }
        #tdturuncumenu li {
        float: left;
        display: block;
        background-image: url(http://img.webme.com/pic/t/tasarim-dunya/tdturuncumenu1.png);
        height: 47px;
        width: 177px;
        text-align: center;
        }
        #tdturuncumenu a {
        text-decoration: none;
        text-align: center;
        color: #FFFFFF;
        font-size: 25px;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        padding-top: 10px;
        --></style>
        <div id="tdturuncumenu">
        <ul>
        <li><a href="#">Anasayfa</a></li>
        <li><a href="#">Z.Defteri</a></li>
        <li><a href="#">Hakkimda</a></li>
        <li><a href="#">Eglence</a></li>
        </ul>
        </div>


yatay yeşil menü:
Kod:

<style type="text/css">
#tdyesilmenu {
height: 46px;
width: auto;
}
#tdyesilmenu ul {
list-style-type: none;
padding: 0px;
}
#tdyesilmenu li {
float: left;
}
#tdyesilmenu a {
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
display: block;
background-image: url(http://img.webme.com/pic/t/tasarim-dunya/yesilmenu1.png);
height: 36px;
width: 177px;
text-align: center;
padding-top:10px;
}
#tdyesilmenu a:hover {
background-image: url(http://img.webme.com/pic/t/tasarim-dunya/yesilmenu2.png);
}
</style>
<div id="tdyesilmenu">
<ul>
<li><a href="#">Anasayfa</a></li>
<li><a href="#">Z. Defteri</a></li>
<li><a href="#">İletisim</a></li>
<li><a href="#">Hakkimizda </a></li>
</ul>
</div>


yatay acık mavi:
Kod:

<style type="text/css">
<!--
td-mavimenu {
height: 46px;
width: auto;
}
#td-mavimenu ul {
list-style-type: none;
}
#td-mavimenu li {
float: left;
}
#td-mavimenu a {
display: block;
height: 33px;
width: 177px;
text-align: center;
background-image: url(http://img.webme.com/pic/t/tasarim-dunya/td-mavimenu1.png);
text-decoration: blink;
color: #000000;
font-style: italic;
padding-top: 13px;
}
#td-mavimenu a:hover {
background-image: url(http://img.webme.com/pic/t/tasarim-dunya/td-mavimenu2.png);
}
--></style>
<div id="td-mavimenu">
<ul>
<li><a href="#url">Ana Sayfa</a></li>
<li><a href="#url">Z. Defteri</a></li>
<li><a href="#url">İletisim</a></li>
</ul>
</div>



yatay koyu mavi

Kod:
<style type="text/css">
<!--
ss {
height: auto;
width: auto;
margin-right: auto;
margin-left: auto;
}
#govde ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#govde li {
float: left;
}
#govde li {
color: #000000;
text-decoration: none;
}
#govde li {
line-height: 45px;
color: #000000;
text-decoration: none;
display: block;
padding-right: 8px;
padding-left: 8px;
background-color: #0080C0;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: dashed;
border-right-style: dashed;
border-bottom-style: dashed;
border-left-style: dashed;
}
#govde a:hover {
line-height: 55px;
background-color: #0080C0;
}
#govde a:hover {
line-height: 55px;
background-color: #0080C0;
}
-->
</style>
<div id="govde">
<ul>
<li><a href="#url">Ana Sayfa</a></li>
<li><a href="#url">İletişim</a></li>
<li><a href="#url">Hakkımızda</a></li>
<li><a href="#url">Eglence</a></li>
<li><a href="#url">Oyunlar </a></li>
</ul>
</div>



Dikey acık mavi menüü

Kod:

<style type="text/css">
<!--
ss {
height: auto;
width: 500px;
margin-right: auto;
margin-left: auto;
}
#govde ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#govde a {
color: #000000;
text-decoration: none;
display: block;
}
#govde a {
padding-top: 5px;
padding-bottom: 5px;
padding-left: 3px;
background-color: #0099FF;
}
#govde a:hover {
background-color: #007297;
}
#govde a:hover {
font-weight: bold;
text-decoration: none;
}
-->
</style>
</head>
<body>
<div id="govde">
<ul>
<li><a href="#url">Ana Sayfa</a></li>
<li><a href="#url">İletişim</a></li>
<li><a href="#url">Hakkımızda</a></li>
<li><a href="#url">Eğlence</a></li>
<li><a href="#url">Oyunlar </a></li>
</ul>
</div>
</body>
</html>


kullanmak serbest yayınlamak yasak Very Happy
______________
@tr.gg dısı link yasak
Mesaj02.06.2011, 19:05 (UTC)    
Mesaj konusu:

Tmm'da Bu Kod'un Site Değerlendirme Alanında Ne İşi Var .. Forumda Html Kodlar Başlığını Boşuna Mı Açmışlar..! Yada Kendine Ait Başlık Aç Paylaşımlarını Oradan Yap...!
______________
Mesaj02.06.2011, 19:08 (UTC)    
Mesaj konusu:

catlak-blog yazmış:
Tmm'da Bu Kod'un Site Değerlendirme Alanında Ne İşi Var .. Forumda Html Kodlar Başlığını Boşuna Mı Açmışlar..! Yada Kendine Ait Başlık Aç Paylaşımlarını Oradan Yap...!


kardeş kafanmı güzel içkimi içtin sen allah aşkına Very Happy Very Happy
______________
@tr.gg dısı link yasak
Mesaj02.06.2011, 19:09 (UTC)    
Mesaj konusu:

catlak-blog yazmış:
Tmm'da Bu Kod'un Site Değerlendirme Alanında Ne İşi Var .. Forumda Html Kodlar Başlığını Boşuna Mı Açmışlar..! Yada Kendine Ait Başlık Aç Paylaşımlarını Oradan Yap...!


Kardeş Çok Özür Dilerim K.Bakma Bugün Benim Kafa Giitmiş...Nereye Ne Yazdığımıda Bilmiyorum ... Tekrar Kusura Bakma
______________
Mesaj02.06.2011, 19:10 (UTC)    
Mesaj konusu:

catlak-blog yazmış:
catlak-blog yazmış:
Tmm'da Bu Kod'un Site Değerlendirme Alanında Ne İşi Var .. Forumda Html Kodlar Başlığını Boşuna Mı Açmışlar..! Yada Kendine Ait Başlık Aç Paylaşımlarını Oradan Yap...!


Kardeş Çok Özür Dilerim K.Bakma Bugün Benim Kafa Giitmiş...Nereye Ne Yazdığımıda Bilmiyorum ... Tekrar Kusura Bakma


tamam sorun degil Very Happy Very Happy Mr. Green Mr. Green Mr. Green
______________
@tr.gg dısı link yasak
Mesaj03.06.2011, 10:34 (UTC)    
Mesaj konusu:

gri yatay menu

Kod:
  <script type="text/javascript" src="chrome.js"></script>  <style type="text/css"> #MainMenu  {    width:100%;    height:26px;    background: url("");    margin:0;    border:0; } #tab  {    margin:0;    top:0; } #tab ul  {    margin:0;    padding:0;    list-style:none;    float:left; } #tab li  { display:inline;    float:left;    margin:0 0 0 0 ;    padding:0; } #tab a  {    background:#000000 url("http://img.webme.com/pic/o/osmantalay/bright_036.gif") no-repeat right top;    margin:0;    padding:0;    text-decoration:none;    border:0;    display:block;    float:left; } #tab a span  {    display:block;    background:url("http://img.webme.com/pic/o/osmantalay/bleft_036.gif") no-repeat left top;    padding:0 18px 0 16px;    font-family:Arial, Helvetica, sans-serif;    font-size:11;    color:#000000;    font-weight:bold;    line-height:26px; } #tab a:hover,#tab li.item_active a  {    background-position:right bottom;    border-color:#000000; } #tab a:hover span,#tab li.item_active a span  {    background-position:left bottom;    color:#000000;    font-weight:bold;    font-style:normal;    text-decoration:none; } .dropmenudiv {    position:absolute;    top:0;    float:left;    display:block;    visibility:hidden;    border:0 solid #330066;    background: url("http://img.webme.com/pic/o/osmantalay/bleft_036.gif");    color:#000000;    z-index:100;    text-decoration:none;    padding:0; } .dropmenudiv ul  {    margin:0;    padding:0;    list-style:none; } .dropmenudiv li  {    display:inline;    margin:0;    padding:0; } .dropmenudiv a:link, .dropmenudiv a:visited {    width:180px;    margin:0 0 0 0 ;    padding:0;    display:block;    border:0 solid #000000;    color:#000000;    background:url("http://img.webme.com/pic/o/osmantalay/bleft_036.gif") no-repeat left top;    font-weight:bold;    font-style:normal;    text-decoration:none; } .dropmenudiv a span  {    float:left;    display:block;    line-height:26px;    background:url("http://img.webme.com/pic/o/osmantalay/bright_036.gif") no-repeat right top;    padding:0 18px 0 16px;    font-family:Arial, Helvetica, sans-serif;    font-size:11;    color:#000000; } .dropmenudiv a span  {    float:none; } .dropmenudiv a:hover {    border:0 solid #000000;    background-position:left bottom;    font-weight:bold;    font-style:normal;    text-decoration:none;    color:#000000; } .dropmenudiv a:hover span  {    background-position:right bottom;    color:#000000;    font-weight:bold; }  </style> <div id="MainMenu" style="width: 771px; height: 26px;"> <div id="tab"> <ul>     <li><a href="http://osmantalay.tr.gg" _fcksavedurl="http://osmantalay.tr.gg"><span>Osmantalay</span></a></li>     <li><a href="http://osmantalay.tr.gg" _fcksavedurl="http://osmantalay.tr.gg"><span>Osmantalay</span></a></li>     <li><a href="http://osmantalay.tr.gg" _fcksavedurl="http://osmantalay.tr.gg"><span>Osmantalay</span></a></li>     <li><a href="http://osmantalay.tr.gg" _fcksavedurl="http://osmantalay.tr.gg"><span>Osmantalay</span></a></li>     <li><a href="http://osmantalay.tr.gg" _fcksavedurl="http://osmantalay.tr.gg"><span>Osmantalay</span></a></li>     <li><a href="http://osmantalay.tr.gg" _fcksavedurl="http://osmantalay.tr.gg"><span>Osmantalay</span></a></li> </ul> </div> </div>




mavi yatay menuu
Kod:

<style type="text/css">

/*Credits: CSSpplay */
/*URL: http://www.cssplay.co.uk/menus/pro_six */

#pro6 ul {margin:0 auto; padding:0; list-style:none; display:table; white-space:nowrap; list-style:none; height:35px; position:relative; background:#fff; font-size:11px;}
#pro6 li {display:table-cell; margin:0; padding:0;}
#pro6 li a {display:block; float:left; height:35px; line-height:30px; color:#333; text-decoration:none; font-family:arial, verdana, sans-serif; font-weight:bold; text-align:center; padding:0 0 0 10px; cursor:pointer; background:url(http://img.webme.com/pic/o/osmantalay/pro_six_0a.gif) no-repeat;}
#pro6 li a b {float:left; display:block; padding:0 25px 5px 15px; background:url(http://img.webme.com/pic/o/osmantalay/pro_six_0b.gif) no-repeat right top;}
#pro6 li.current a {color:#fff; background:url(http://img.webme.com/pic/o/osmantalay/pro_six_2a.gif) no-repeat;}
#pro6 li.current a b {background:url(http://img.webme.com/pic/o/osmantalay/pro_six_2b.gif) no-repeat right top;}
#pro6 li a:hover {color:#fff; background: url(http://img.webme.com/pic/o/osmantalay/pro_six_1a.gif) no-repeat;}
#pro6 li a:hover b {background:url(http://img.webme.com/pic/o/osmantalay/pro_six_1b.gif) no-repeat right top;}
#pro6 li.current a:hover {color:#fff; background: url(http://img.webme.com/pic/o/osmantalay/pro_six_2a.gif) no-repeat; cursor:default;}
#pro6 li.current a:hover b {background:url(http://img.webme.com/pic/o/osmantalay/pro_six_2b.gif) no-repeat right top;}

</style>

<!--[if IE]>
<style type="text/css">
#pro6 ul {display:inline-block;}
#pro6 ul {display:inline;}
#pro6 ul li {float:left;}
#pro6 {text-align:center;}
</style>
<![endif]-->

</head>

<body>
<div id="pro6">
<ul>

<li><a href="#nogo"><b>Home</b></a></li>
<li><a href="#nogo"><b>Privacy Policy</b></a></li>
<li><a href="#nogo"><b>Products</b></a></li>
<li><a href="#nogo"><b>Where to find us</b></a></li>
<li class="current"><a href="#nogo"><b>Contact us</b></a></li>
<li><a href="#nogo"><b>Search</b></a></li>
</ul>
</div>
</body>
</html>



bunun adı yok adını sız koyun
Kod:

<style type="text/css">
/*Credits: CSSpplay */
/*URL: http://www.cssplay.co.uk/menus/pro_nine */

.pro9 {padding:0 0 0 32px; margin:0; list-style:none; height:30px; position:relative;}
.pro9 li {float:left;}
.pro9 li a {display:block; float:left; height:30px; line-height:29px; background:url(http://img.webme.com/pic/o/osmantalay/pro_nine_0a.gif) no-repeat; color:#000; text-decoration:none; font-size:11px; font-family:arial, verdana, sans-serif; font-weight:bold; text-align:center; padding:0 0 0 12px; cursor:pointer;}
.pro9 li a b {float:left; display:block; padding:0 12px 0 0; background:url(http://img.webme.com/pic/o/osmantalay/pro_nine_0.gif) right top;}
.pro9 li.current a {color:#fff; background:url(http://img.webme.com/pic/o/osmantalay/pro_nine_2a.gif) no-repeat;}
.pro9 li.current a b {background:url(http://img.webme.com/pic/o/osmantalay/pro_nine_2.gif) right top;}
.pro9 li a:hover {color:#fff; background:url(http://img.webme.com/pic/o/osmantalay/pro_nine_1a.gif) no-repeat;}
.pro9 li a:hover b {background:url(http://img.webme.com/pic/o/osmantalay/pro_nine_1.gif) right top;}
.pro9 li.current a:hover {color:#fff; background:url(http://img.webme.com/pic/o/osmantalay/pro_nine_2a.gif) no-repeat; cursor:default;}
.pro9 li.current a:hover b {background:url(http://img.webme.com/pic/o/osmantalay/pro_nine_2.gif) right top;}

</style>
</head>

<body>
<ul class="pro9">
<li><a href="#nogo"><b>Home</b></a></li>
<li><a href="#nogo"><b>Privacy Policy</b></a></li>
<li><a href="#nogo"><b>Products</b></a></li>

<li class="current"><a href="#nogo"><b>Where to find us</b></a></li>
<li><a href="#nogo"><b>Contact us</b></a></li>
<li><a href="#nogo"><b>Search</b></a></li>
</ul>
</body>
</html>

______________
@tr.gg dısı link yasak
Önceki mesajları göster:   


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