Forum'da ara:
Ara


« Önceki başlık :: Sonraki başlık »  
Yazar Mesaj
Mesaj10.08.2008, 19:56 (UTC)    
Mesaj konusu: Css tasarımlar(Menü gizleme kodu olmadan süper tasarımlar yp

Sizde çeşitli Layout lar üzerinde değişiklikler yaparak süper tasarımlar yapabilirsiniz örnek tasarım (kendi sitenize göre düzenleyebilirsiniz) tek yapmanız gereken css design i seçip verdiğim kodları uygun yerlere koymak

tasarımın üstüne
Kod:
 <!-- Begin Wrapper -->
   <div id="wrapper">
   
         <!-- Begin Header -->
         <div id="header">
         </style>
<div align="center"><img alt="" src="http://img.webme.com/pic/n/nett-oguzhanarsiv/banner145.gif" /></div>    
    </div>
       <!-- End Header -->
      
       <!-- Begin Navigation -->
         <div id="navigation">
      
             <script type="text/javascript" src="http://h1.ripway.com/kristaldunya/chromees.js"></script>
<style>
#MainMenu
{
   height:36px;
   background: #FFFFFF url("http://www.fileden.com/files/2007/6/19/1190933/bmid_113.gif");
   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;
   padding:0;
}
#tab a
{
   background: url("http://www.fileden.com/files/2007/6/19/1190933/bright_113.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://www.fileden.com/files/2007/6/19/1190933/bleft_113.gif") no-repeat left top;
   padding:0 22px 0 22px;
   font-family:Arial, Helvetica, sans-serif;
   font-size:11;
   color:#FFFFFF;
   font-weight:bold;
   line-height:36px;
}
#tab a:hover,#tab li.item_active a
{
   background-position:right bottom;
   border-color:;
}
#tab a:hover span,#tab li.item_active a span
{
   background-position:left bottom;
   color:#FFFFFF;
   font-weight:bold;
   font-style:normal;
   text-decoration:none;
}
.dropmenudiv
{
   position:absolute;
   top:0;
   float:left;
   display:block;
   visibility:hidden;
   border:0 solid ;
   background: #FFFFFF url("http://www.fileden.com/files/2007/6/19/1190933/bmid_113.gif");
   color:#FFFFFF;
   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;
   padding:0;
   display:block;
   border:0 solid ;
   color:#FFFFFF;
   background:url("http://www.fileden.com/files/2007/6/19/1190933/bleft_113.gif") no-repeat left top;
   font-weight:bold;
   font-style:normal;
   text-decoration:none;
}
.dropmenudiv a span
{
   float:left;
   display:block;
   line-height:36px;
   background:url("http://www.fileden.com/files/2007/6/19/1190933/bright_113.gif") no-repeat right top;
   padding:0 22px 0 22px;
   font-family:Arial, Helvetica, sans-serif;
   font-size:11;
   color:#FFFFFF;
}
.dropmenudiv a span
{
   float:none;
}
.dropmenudiv a:hover
{
   border:0 solid ;
   background-position:left bottom;
   font-weight:bold;
   font-style:normal;
   text-decoration:none;
   color:#FFFFFF;
}
.dropmenudiv a:hover span
{
   background-position:right bottom;
   color:#FFFFFF;
   font-weight:bold;
}

</style>
<div id="MainMenu">
   <div id="tab">
      <ul>
         <li class="item_active"><a href="#"><span>Home</span></a></li>
         <li><a href="#"><span>About</span></a></li>
         <li><a href="#"><span>Contact</span></a></li>
      </ul>
   </div>
</div>       
            
       </div>
       <!-- End Navigation -->
      
         <!-- Begin Faux Columns -->
       <div id="faux">
      
             <!-- Begin Left Column -->
             <div id="leftcolumn">
      
                   
      
             </div>
             <!-- End Left Column -->
      
             <!-- Begin Right Column -->
             <div id="rightcolumn">

tasarımın altına
Kod:
</p>
             
            <div class="clear"></div>
            
             </div>
             <!-- End Right Column -->
            
            <div class="clear"></div>
            
         </div>      
         <!-- End Faux Columns -->

         <!-- Begin Footer -->
         <div id="footer">
             
              Sende Css tasarım yapabilirsin      

         </div>
       <!-- End Footer -->
      
   </div>
   <!-- End Wrapper -->


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;}
/*
      Created by Keith Donegan of Code-Sucks.com
    
     E-Mail: Keithdonegan( at )gmail.com
    
     You can do whatever you want with these layouts,
     but it would be greatly appreciated if you gave a link
     back to http://www.code-sucks.com
    
*/

* { padding: 0; margin: 0; }

body {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 13px;
}
#wrapper {
 margin: 0 auto;
 width: 922px;
}
#faux {
 background: url(faux-3-2-col.gif);
 margin-bottom: 0px;
 overflow: auto; /* Paul O Brien Fix for IE www.pmob.co.uk */
 width: 100%
}
#header {
 color: #333;
 width: 902px;
 padding: 10px;
 height: 100px;
 margin: 10px 0px 0px 0px;
 background: #D1DBDB;
}
#navigation {
 color: #333;
 padding: 10px;
 margin: 0px 0px 0px 0px;
 background: #ABBEBE;
}
#leftcolumn {
 display: inline;
 color: #333;
 margin: 10px;
 padding: 0px;
 width: 195px;
 float: left;
}
#rightcolumn {
 float: right;
 color: #333;
 margin: 10px;
 padding: 0px;
 width: 683px;
 display: inline;
 position: relative;
}
#footer {
 width: 902px;
 clear: both;
 color: #333;
 background: #ABBEBE;
 margin: 0px 0px 10px 0px;
 padding: 10px;
}
.clear { clear: both; background: none; }

______________
Mesaj10.08.2008, 20:10 (UTC)    
Mesaj konusu:

paylaşım için tesekkkürler ellerine sağlık...
______________
Mesaj11.08.2008, 07:24 (UTC)    
Mesaj konusu:

sanalyavuz yazmış:
paylaşım için tesekkkürler ellerine sağlık...


saol başka yorum yokmu? Arrow Wink
______________
Mesaj12.08.2008, 07:49 (UTC)    
Mesaj konusu:

b-s-chat yazmış:
ellerine sağlık paylaşımınız güzel...
Teşekkürler

Wink

okdar kişi girmiş hiçkimse yorum yapmıyor...
______________
Önceki mesajları göster:   


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