Forum'da ara:
Ara


« Önceki başlık :: Sonraki başlık »  
Yazar Mesaj
Mesaj29.07.2010, 05:38 (UTC)    
Mesaj konusu: CSS Dropdown Menü Siteye Nasıl Eklenir?

Arkadaşlar ben CSS Tasarım olarak aşağıdaki tasarımı kullanmaktayım.
İsterseniz siteme giripte bakabilirsiniz:
www.pwrlevel.tr.gg
Ama sitemdeki Ürünler menüsünü aşağı açılan menü yapmak istiyorum yada yeni bir menü tasarımı yapıp şimdiki menümün yerine kullanmak isityorum.
Yardımcı olursanız sevinirim.


Tasarımın Üzerindeki Yazı:
Kod:

<div id="wrapper">
   <div id="header">
      <div id="logo">
         <h2><a href="http://pwrlevel.tr.gg/Power-Level.htm"> <font color=white><center>POWER LEVEL</center></font> </a></h2>
         <p>Ve Daha Fazlası İçin Bizi Seçin</p>
      </div>
   </div>
   <!-- end #header -->
   <div id="menu">
      <ul>
         <li class="current_page_item"><a href="http://pwrlevel.tr.gg/">Ana Sayfa</a></li>
         <li><a href="http://pwrlevel.tr.gg/Urunler.htm">Ürünler</a></li>
         <li><a href="http://pwrlevel.tr.gg/Odeme-Secenekleri.htm">Ödeme Şekli</a></li>
         <li><a href="http://pwrlevel.tr.gg/Calisma-Seklimiz.htm">Çalışma Saati</a></li>
         <li><a href="http://www.isyazilim.com/lc_request.aspx?VisitorID=2441119&SiteGuid=ec068ba8-4e47-4e5d-99f0-6a345df3dbed&lang=tr&SessionID=ex1iyp55zopfejfx4s4puv45">İletişim</a></li>
      </ul>
   </div>
   <!-- end #menu -->
   <div id="page">


Tasarımın Altındaki Yazı:
Kod:

<div id="content">
         
         <div class="post">
            <div class="entry">               
                             
               
                              <p class="links"><a href="http://pwrlevel.tr.gg/Urunler.htm" class="more">Daha Fazlası İçin Tıklayınız</a>        </p>
            </div>
         </div>
         <div style="clear: both;"> </div>
      </div>
      <!-- end #content -->
      <div id="sidebar">
         <ul>
            <li>
               
            
                </li>
              </li>
         </ul>
      </div>
      <!-- end #sidebar -->
      <div style="clear: both;"> </div>
   </div>
   <!-- end #page -->
</div>
<div id="footer-content">
   <div class="column1">
      <p>

<li><h2>Referanslarımız</h2></li>
<li>I_KuRSuN_I --- ( Titan )</li>
<br></br>
<br></br>
<br></br>
<li>Kur Bilgisi: 1 $=1.51 TL</li>
           </p>
   </div>
   <div class="column2">
      <ul class="list">
           
            <li><strong><a href="http://www.maxoloji.com/SPCalculator.shtml">SP Hesaplama</a></strong></li>
            <li><strong><a href="http://sro.db.mmosite.com/tools/weapon/index.shtml">Silah Hesaplama</a></strong></li>
            <li><strong><a href="http://sro.db.mmosite.com/tools/armor/index.shtml">Giysi Hesaplama</a></strong></li>
<li><a href="http://www.sroking.com/down/SROKing2.0.32_3.exe">SROKing 2.0.32_3</a></li>
<li><a href="http://www.gezginler.net/modules/mydownloads/visit.php?lid=887">DirectX 9 - Haziran 2010</a></li>
<li><a href="http://www.gamershell.com/download.html?id=56926&mirror=6&cat=demo&filename=SilkroadOnline_GlobalOfficial_v1_240.zip&ts=1280310891&auth=1d5b1q6j">Silkroad Online Legend V Heroes of Alexandria</a></li>


      </ul>
   </div>
</div>
<div id="footer">
   <p>TELİF HAKKI © 2010 PWRLEVEL - TÜM HAKLARI SAKLIDIR</p>
</div>
<!-- end #footer -->


CSS Kodu:
Kod:

h1#title{display: none;}h2#title span {display: none;}div.header{display: none;}li.nav_element{list-style-type: none;}li.nav_element{display: none;}

/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/

body {
   margin: 0;
   padding: 0;
   background: #F7F7F7 url(http://img412.imageshack.us/img412/7962/img01p.jpg) repeat left top;
   font-family: Georgia, "Times New Roman", Times, serif;
   font-size: 14px;
   color: #5A554E;
}

h1, h2, h3 {
   margin: 0;
   padding: 0;
   font-weight: normal;
   color: #32639A;
   font-family: Georgia, "Times New Roman", Times, serif;
}

h1 {
   font-size: 2em;
}

h2 {
   font-size: 2.4em;
}

h3 {
   font-size: 1.6em;
}

p, ul, ol {
   margin-top: 0;
   line-height: 200%;
   font-family: "Trebuchet MS", Georgia, "Times New Roman", Times, serif;
}

ul, ol {
   margin: 0px;
   padding: 0px;
   list-style: none;
}

a {
   text-decoration: underline;
   color: #516C00;
}

a:hover {
   text-decoration: none;
}

h2 a {
   text-decoration: none;
}

#wrapper {
   margin: 0px;
   padding: 0px;
   background: url(http://img121.imageshack.us/img121/3063/img02h.jpg) repeat-x left top;
}

/* Header */

#header {
   width: 1000px;
   height: 235px;
   margin: 0 auto;
   padding: 0px;
   background: url(http://img28.imageshack.us/img28/7131/img03vw.jpg) no-repeat left top;
}

/* Logo */

#logo {
   float: left;
   margin: 0;
   padding: 115px 0px 0px 50px;
   color: #000000;
}

#logo h1, #logo p {
   margin: 0;
   padding: 0;
   font-family: Georgia, "Times New Roman", Times, serif;
}

#logo h1 {
   letter-spacing: -1px;
   text-transform: lowercase;
   font-size: 44px;
}

#logo h1 a {
   color: #FFFFFF;
}

#logo p {
   margin: -30px 0px 0px 0px;
   padding: 26px 0 0 2px;
   font: normal 19px Georgia, "Times New Roman", Times, serif;
   color: #C5E8FF;
}

#logo a {
   border: none;
   background: none;
   text-decoration: none;
   color: #C5E8FF;
}

/* Search */

#search {
   float: right;
   width: 280px;
   height: 60px;
   padding: 20px 0px 0px 0px;
   background: #E2E2E2;
   border-bottom: 4px solid #FFFFFF;
}

#search form {
   height: 41px;
   margin: 0;
   padding: 10px 0 0 20px;
}

#search fieldset {
   margin: 0;
   padding: 0;
   border: none;
}

#search-text {
   width: 170px;
   padding: 6px 5px 2px 5px;
   border: 1px solid #DEDEDE;
   background: #FFFFFF;
   text-transform: lowercase;
   font: normal 11px Arial, Helvetica, sans-serif;
   color: #5D781D;
}

#search-submit {
   width: 50px;
   height: 22px;
   border: none;
   background: #B9B9B9;
   color: #000000;
}

#banner {
   margin-bottom: 20px;
   border: 12px #ECECEC solid;
}

/* Menu */

#menu {
   width: 1000px;
   height: 65px;
   margin: 0 auto;
   padding: 0;
   background: url(http://img822.imageshack.us/img822/5796/img04d.jpg) no-repeat left top;
}

#menu ul {
   float: right;
   margin: 0;
   padding: 0px 25px 0px 0px;
   list-style: none;
   line-height: normal;
}

#menu li {
   float: left;
}

#menu a {
   display: block;
   width: 120px;
   height: 39px;
   margin-left: 10px;
   padding-top: 15px;
   background: url(http://img248.imageshack.us/img248/7104/img05u.jpg) repeat-x left top;
   font-family: Georgia, "Times New Roman", Times, serif;
   text-decoration: none;
   text-align: center;
   font-size: 18px;
   font-weight: normal;
   color: #FFFFFF;
   border: none;
}

#menu a:hover, #menu .current_page_item a {
   text-decoration: none;
}

#menu .current_page_item a {
   background: url(http://img594.imageshack.us/img594/8118/img06g.jpg) no-repeat left top;
   padding-left: 0;
   color: #493E2B;
}

/* Page */

#page {
   width: 900px;
   margin: 0px auto;
   padding: 40px 50px 0px 50px;
   background: #FFFFFF;
}

/* Content */

#content {
   float: left;
   width: 570px;
   padding: 0px 0px 0px 0px;
}

.post {
   margin-bottom: 15px;
}

.post-bgtop {
}

.post-bgbtm {
}

.post .title {
   margin-bottom: 10px;
   padding: 12px 0 0 0px;
   letter-spacing: -.5px;
   font-size: 36px;
   color: #493E2B;
}

.post .title a {
   color: #493E2B;
   border: none;
}

.post .meta {
   margin: -10px 0px 0px 0px;
   padding: 0px 0px 10px 0px;
   letter-spacing: -1px;
   font-size: 23px;
   font-weight: normal;
   color: #6E8D3D;
   font-family: Georgia, "Times New Roman", Times, serif;
}

.post .meta .date {
   float: left;
}

.post .meta .posted {
   float: right;
}

.post .meta a {
}

.post .entry {
   background: url(http://img210.imageshack.us/img210/4098/img08g.jpg) no-repeat left top;
   padding: 25px 0px 0px 0px;
   text-align: justify;
}

.links {
   padding-top: 20px;
}

.more {
   padding-left: 16px;
   background: url(http://img804.imageshack.us/img804/4198/img10.gif) no-repeat left 3px;
   text-decoration: underline;
   font-size: 12px;
   font-weight: normal;
}

.comments {
   padding-left: 18px;
   background: url(http://img594.imageshack.us/img594/5139/img11e.gif) no-repeat left 4px;
   text-decoration: underline;
   font-size: 12px;
   font-weight: normal;
}


/* Sidebar */

#sidebar {
   float: right;
   width: 273px;
   padding: 0px;
   color: #787878;
}

#sidebar ul {
   margin: 0;
   padding: 0;
   list-style: none;
}

#sidebar li {
   margin: 0;
   padding: 0;
}

#sidebar li ul {
   margin: 0px 0px;
   padding-bottom: 20px;
}

#sidebar li li {
   line-height: 35px;
   margin: 0px;
   padding: 2px 0px;
   border-left: none;
}

#sidebar li li span {
   height: 19px;
   margin-right: 16px;
   padding: 4px 12px;
   background: #3D2A0B url(http://img685.imageshack.us/img685/3401/img12u.jpg) repeat-x left top;
   font-size: 12px;
   color: #FFFFFF;
}

#sidebar li li span a {
   color: #FFFFFF;
}

#sidebar h2 {
   height: 65px;
   background: url(http://img268.imageshack.us/img268/6002/img09c.jpg) no-repeat left bottom;
   letter-spacing: -.5px;
   font-size: 28px;
   color: #493E2B;
}

#sidebar p {
   margin: 0 0px;
   padding: 0px 0px 30px 0px;
   text-align: justify;
}

#sidebar p strong {
   color: #4A3E29;
}

#sidebar a {
   border: none;
}

#sidebar a:hover {
}

/* Calendar */

#calendar {
}

#calendar_wrap {
   padding: 20px;
}

#calendar table {
   width: 100%;
}

#calendar tbody td {
   text-align: center;
}

#calendar #next {
   text-align: right;
}

/* Footer */

#footer-content {
   width: 900px;
   height: 255px;
   margin: 0 auto;
   padding: 60px 50px 0px 50px;
   background: url(http://img802.imageshack.us/img802/1199/img15.jpg) no-repeat left top;
   font-size: 12px;
   color: #887450;
}

#footer-content .column1 {
   float: left;
   width: 570px;
}

#footer-content .column2 {
   float: right;
   width: 273px;
}

#footer-content h2 {
   padding-bottom: 10px;
   font-size: 22px;
   color: #E3D2B6;
}

#footer-content strong {
   color: #E3D2B6;
}

#footer-content a {
   color: #AA8B55;
}

#footer-content a:hover {
   color: #AA8B55;
}

.list li {
   margin-bottom: 6px;
}

#footer {
   height: 50px;
   margin: 0 auto;
   padding: 0px 0 15px 0;
   font-family: Arial, Helvetica, sans-serif;
}

#footer p {
   margin: 0;
   line-height: normal;
   font-size: 12px;
   text-align: center;
   color: #82A2B9;
}

#footer a {
   text-decoration: underline;
   color: #82A2B9;
}
Mesaj29.07.2010, 11:37 (UTC)    
Mesaj konusu:

forumun css bölümünü incelemeni öneririm
Önceki mesajları göster:   


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