Forum'da ara:
Ara


« Önceki başlık :: Sonraki başlık »  
Yazar Mesaj
Mesaj25.06.2008, 10:51 (UTC)    
Mesaj konusu: 15 Dakikada Css Design Li Siteniz Olsun..

15 Dakikada Css Design Li Siteniz Olsun..



Sitemize Css Desing Uygulandığını Düşünerek Başlıyoruz İşimize Eğer Uygulanmadıysa
http://www.bedava-sitem.com/forum/viewtopic.php?t=77003 Adresinden Sitenize Css Desing İçin Hazırlayın Saten Bizim İçin Önemli Olan Yerleri Ben Burada Tekrarlıyacağım ( Çoğunu Tekrarlıyacağım )

1. Adım

Tasarım Ayarlarına Tıklıyoruz Ve Navigasyonun baslığına

Kod:
<style type="text/css">
<!--
td.nav {visibility:hidden;}
--> </style>

Yapıştırıyoruz Ve Navigasyon Başlğında ==> <style type="text/css"> Yazısı Çıkıyor ( Eğer Bu Yazının Aynısı Çıkmaz İse Tekrar Deneyin Wink )

2. Adım

İçerik bölümünün altındaki bilgi (mesela Copyright) Bölümüne ( Alttaki Site Ortalama Kodunu Ekliyoruz )


Kod:
<style type="text/css">
<!--
html, body {
text-align: center;
}
-->
</style>


3. Adım ( En Son Adım )

Yine Tasarım Ayarlarını Seçiyoruz Gelişmiş Ayarlar Diyoruz Tasarımın üzerindeki yazı Bölümüne Şu Kodların Olması Gerekir ;

Kod:
<style type="text/css">
<!--
td.nav {visibility:hidden;}
--> </style>
<style type="text/css">
<!--
body{background-image:url( ARKA PLAN URLESİ BURAYA );background-attachment: fixed}
-->
</style>


3, Adım Devam

Şimdi Tasarım Üzerine Yazı Bölümüne Eklenecekler
Başlık Resmi + Arka Fon + Menü ( İcon )
Bunları Nereden Bulacağız Diyorsanız Başlık Resmini En Kısa Zamanda yapmak için şu adresten yapabilirsiniz => http://h-master.net/web2.0/index.php

Arka Fon Size Kalmış İstediğiniz Resmi Ekliyebilirsiniz Wink ( Sitelerde Dolaşırken Vs Gördüğünüz Fonları Kullana Bilir Ve Özel Yapabilirsiniz )

Menü (İcon)= Önceden Bedava Sitemde Menüler Vardı Forum Çöktüğünden Dolayı Gitti Sizin Bunu Googlede Nevigasyon Menü Olarak Aratmanız Gerekir
Adresinden Veya Javascipt Sitelerinden Bulabilirsiniz Ben Yukarıdaki Linkten Kullandım Tavsiye Ederim Hepsi Birbirinden Harika Wink

3 Kod İle Sitemiz Css Design Li Hale Geltirebiliyoruz Şimdi Kodu Size Hazır Hale Getiriyorum Yerlerini Değiştirip Kullanabilirsiniz Wink
( Bunları Yapan Arkadaşlar Yerleri Kendinize Göre Ayarladıktan Sonra Tasarım Üzerine Yazıyı Silin Direk Bunu Yapıştırın )

<style type="text/css">
<!--
td.nav {visibility:hidden;}
--> </style>
<style type="text/css">
<!--
body{background-image:url( ARKA PLAN URLESİNİ BURAYA YAPIŞTIRINIZ );background-attachment: fixed}
-->
</style>
<div align="center"><img alt="" src="BAŞLIK RESİM URLSİ" /></div>

<style type="text/css">

#MainMenu
{
height:32px;
background: url('http://www.fileden.com/files/2007/6/19/1190933/bmid_070.gif');
margin:0;
border:0px none;
}
#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:#000000 url('http://www.fileden.com/files/2007/6/19/1190933/bright_070.gif') no-repeat right top;
margin:0;
padding:0;
text-decoration:none;
border:0px none;
display:block;
float:left
}
#tab a span
{
display:block;
background:url('http://www.fileden.com/files/2007/6/19/1190933/bleft_070.gif') no-repeat left top;
font-family:Arial, Helvetica, sans-serif;
font-size:11;
color:#000000;
font-weight:bold;
line-height:32px; padding-left:15px; padding-right:15px; padding-top:0; padding-bottom:0
}
#tab a:hover, #tab li.item_active a
{
background-position:right bottom;
border-color:#FF9300;
}
#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:0px solid ;
background: url('http://www.fileden.com/files/2007/6/19/1190933/bmid_070.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;
padding:0;
display:block;
border:0px solid ;
color:#000000;
background:url('http://www.fileden.com/files/2007/6/19/1190933/bleft_070.gif') no-repeat left top;
font-weight:bold;
font-style:normal;
text-decoration:none
}
.dropmenudiv a span
{
float:left;
display:block;
line-height:32px;
background:url('http://www.fileden.com/files/2007/6/19/1190933/bright_070.gif') no-repeat right top;
font-family:Arial, Helvetica, sans-serif;
font-size:11;
color:#000000; padding-left:15px; padding-right:15px; padding-top:0; padding-bottom:0
}
.dropmenudiv a span
{
float:none;
}
.dropmenudiv a:hover
{
border:0px solid #FF9300;
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>




<script type="text/javascript" src="http://h1.ripway.com/kristaldunya/chromero.js"></script>
<style>
#MainMenu
{
height:32px;
background: url("http://www.fileden.com/files/2007/6/19/1190933/bmid_070.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:#000000 url("http://www.fileden.com/files/2007/6/19/1190933/bright_070.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_070.gif") no-repeat left top;
padding:0 15px 0 15px;
font-family:Arial, Helvetica, sans-serif;
font-size:11;
color:#000000;
font-weight:bold;
line-height:32px;
}
#tab a:hover,#tab li.item_active a
{
background-position:right bottom;
border-color:#FF9300;
}
#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 ;
background: url("http://www.fileden.com/files/2007/6/19/1190933/bmid_070.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;
padding:0;
display:block;
border:0 solid ;
color:#000000;
background:url("http://www.fileden.com/files/2007/6/19/1190933/bleft_070.gif") no-repeat left top;
font-weight:bold;
font-style:normal;
text-decoration:none;
}
.dropmenudiv a span
{
float:left;
display:block;
line-height:32px;
background:url("http://www.fileden.com/files/2007/6/19/1190933/bright_070.gif") no-repeat right top;
padding:0 15px 0 15px;
font-family:Arial, Helvetica, sans-serif;
font-size:11;
color:#000000;
}
.dropmenudiv a span
{
float:none;
}
.dropmenudiv a:hover
{
border:0 solid #FF9300;
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">
<div id="tab">
<ul>
<li class="item_active"><a href="Anasayfa.htm"><span>Anasayfa</span></a></li>
<li><a href="100.htm"><span>Chat</span></a></li>
<li><a href="#"><span>Html Kodlar</span></a></li>
<li><a href="#"><span>Javascipt</span></a></li>
<li><a href="#"><span>Oyunlar</span></a></li>
<li><a href="#"><span>Programlar</span></a></li>
<li><a href="#"><span>Sitemiz Hakkında</span></a></li>
<li><a href="#"><span>S.S.S</span></a></li>
<li><a href="#"><span>Diğer İçerik</span></a></li>
<li><a href="#"><span>İletisim</span></a></li>
<li><a href="#"><span>Ziyaretci Defteri</span></a></li>
</ul>
</div>
</div>


BUNLARI OKUYUNUZ ÖNEMLİ NOTLAR ;
Yeşil Yazılı Olan Yerde Yazmakta Örneğin ; ARKA PLAN URLESİNİ BURAYA YAPIŞTIRINIZ Dediğim Yerleri Ve Diğer Yerleri Kendinize Göre Ayarlayın

Turuncu Yazılı Yere Kendi Menünüzü Yapıştırınız Ben Kendi Menümü Yapıştırdım Vede # Olan Yerlere Örneğin www.siteadı.tr.gg/100.htm <== İse sadece 100.htm <== Yazıyorsunuz Oraya
Bunlar Tasarım Üzerine Yazı Bölümüne Yapıştırılması Vede Her Sayfaya Menü Gizleme Kodu Eklenmesi Gerekir Wink

Evet Bukadar Arkadaşlar En Önemli Adımımız 2 Ve 3 Lardı Şimdi Gelelim Benim Yaptığım 15 Dkkalık Css Design 'e



Örnek Görünüm;

Kod:
<style type="text/css">
<!--
td.nav {visibility:hidden;}
--> </style>
<style type="text/css">
<!--
body{background-image:url(http://www.wapdunyasi.com/WAPDUNYASI/images/wap_bg.gif);background-attachment: fixed}
-->
</style>
<div align="center"><img alt="" src="http://80.190.202.79/pic/e/explor/site3.jpg" /></div>
<style type="text/css">

#MainMenu
{
   height:32px;
   background: url('http://www.fileden.com/files/2007/6/19/1190933/bmid_070.gif');
   margin:0;
   border:0px none;
}
#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:#000000 url('http://www.fileden.com/files/2007/6/19/1190933/bright_070.gif') no-repeat right top;
   margin:0;
   padding:0;
   text-decoration:none;
   border:0px none;
   display:block;
   float:left
}
#tab a span
{
   display:block;
   background:url('http://www.fileden.com/files/2007/6/19/1190933/bleft_070.gif') no-repeat left top;
   font-family:Arial, Helvetica, sans-serif;
   font-size:11;
   color:#000000;
   font-weight:bold;
   line-height:32px; padding-left:15px; padding-right:15px; padding-top:0; padding-bottom:0
}
#tab a:hover, #tab li.item_active a
{
   background-position:right bottom;
   border-color:#FF9300;
}
#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:0px solid ;
   background: url('http://www.fileden.com/files/2007/6/19/1190933/bmid_070.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;
   padding:0;
   display:block;
   border:0px solid ;
   color:#000000;
   background:url('http://www.fileden.com/files/2007/6/19/1190933/bleft_070.gif') no-repeat left top;
   font-weight:bold;
   font-style:normal;
   text-decoration:none
}
.dropmenudiv a span
{
   float:left;
   display:block;
   line-height:32px;
   background:url('http://www.fileden.com/files/2007/6/19/1190933/bright_070.gif') no-repeat right top;
   font-family:Arial, Helvetica, sans-serif;
   font-size:11;
   color:#000000; padding-left:15px; padding-right:15px; padding-top:0; padding-bottom:0
}
.dropmenudiv a span
{
   float:none;
}
.dropmenudiv a:hover
{
   border:0px solid #FF9300;
   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>




<script type="text/javascript" src="http://h1.ripway.com/kristaldunya/chromero.js"></script>
<style>
#MainMenu
{
   height:32px;
   background: url("http://www.fileden.com/files/2007/6/19/1190933/bmid_070.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:#000000 url("http://www.fileden.com/files/2007/6/19/1190933/bright_070.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_070.gif") no-repeat left top;
   padding:0 15px 0 15px;
   font-family:Arial, Helvetica, sans-serif;
   font-size:11;
   color:#000000;
   font-weight:bold;
   line-height:32px;
}
#tab a:hover,#tab li.item_active a
{
   background-position:right bottom;
   border-color:#FF9300;
}
#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 ;
   background: url("http://www.fileden.com/files/2007/6/19/1190933/bmid_070.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;
   padding:0;
   display:block;
   border:0 solid ;
   color:#000000;
   background:url("http://www.fileden.com/files/2007/6/19/1190933/bleft_070.gif") no-repeat left top;
   font-weight:bold;
   font-style:normal;
   text-decoration:none;
}
.dropmenudiv a span
{
   float:left;
   display:block;
   line-height:32px;
   background:url("http://www.fileden.com/files/2007/6/19/1190933/bright_070.gif") no-repeat right top;
   padding:0 15px 0 15px;
   font-family:Arial, Helvetica, sans-serif;
   font-size:11;
   color:#000000;
}
.dropmenudiv a span
{
   float:none;
}
.dropmenudiv a:hover
{
   border:0 solid #FF9300;
   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">
   <div id="tab">
      <ul>
         <li class="item_active"><a href="#"><span>Anasayfa</span></a></li>
         <li><a href="#"><span>Chat</span></a></li>
         <li><a href="#"><span>Html Kodlar</span></a></li>
         <li><a href="#"><span>Javascipt</span></a></li>
         <li><a href="#"><span>Oyunlar</span></a></li>
         <li><a href="#"><span>Programlar</span></a></li>
         <li><a href="#"><span>Sitemiz Hakkında</span></a></li>
         <li><a href="#"><span>S.S.S</span></a></li>
         <li><a href="#"><span>Diğer İçerik</span></a></li>
         <li><a href="#"><span>İletisim</span></a></li>
         <li><a href="#"><span>Ziyaretci Defteri</span></a></li>
      </ul>
   </div>
</div>


Emeğe Saygı
Mesaj25.06.2008, 10:53 (UTC)    
Mesaj konusu:

PayLaşım İçin Teşekkürler Wink
______________
Arkamdan Konuşanlar, Arkamda Takılmaya Devam Etsin !
Mesaj25.06.2008, 10:54 (UTC)    
Mesaj konusu:

c-aptain yazmış:
PayLaşım İçin Teşekkürler Wink

Bende Emeğe Saygı Duyduğun İçin Teşekür Ederim Wink
Mesaj25.06.2008, 10:54 (UTC)    
Mesaj konusu:

@Programcity

Paylaşım için tş ederim Wink
Mesaj25.06.2008, 10:56 (UTC)    
Mesaj konusu:

falog yazmış:
@Programcity

Paylaşım için tş ederim Wink


Rica Ederim Dostum Wink
Mesaj25.06.2008, 11:03 (UTC)    
Mesaj konusu: tşk mert

paylaşım için saol kanka mert bilmeyenlerin çok işine yarıyacaktır
Gerçi Bende Anlamıoprum cssden ama snn sayende yavaş yavaş öğreniozz saolasınn.
Mesaj25.06.2008, 11:06 (UTC)    
Mesaj konusu: Re: tşk mert

koyumuz-eskibalcik yazmış:
paylaşım için saol kanka mert bilmeyenlerin çok işine yarıyacaktır
Gerçi Bende Anlamıoprum cssden ama snn sayende yavaş yavaş öğreniozz saolasınn.

Teşekürler Wink

Bu Yöntemi Hacker Friendin Yöntemine Çeviricem Kızdı Bana BU yÖNTEM işGENCEYMİŞ Embarassed


En son programcity tarafından 25.06.2008 11:06:33 tarihinde değiştirildi, toplam 1 kere değiştirildi
Mesaj25.06.2008, 11:10 (UTC)    
Mesaj konusu:

Kanaat notun yükselmeye başladı Mr. Green

Ben neden kızayım, ama kolayı ve doğrusu varken, zor ve yanlış olanı yapmak pek akıl kârı değil...
Mesaj25.06.2008, 11:12 (UTC)    
Mesaj konusu:

hackerfriend yazmış:
Kanaat notun yükselmeye başladı Mr. Green

Ben neden kızayım, ama kolayı ve doğrusu varken, zor ve yanlış olanı yapmak pek akıl kârı değil...


Ben Bunu Böyle Hazırlamıştım Ekledim Senin Yöntemi Düzenleyip Vereceğim O Yöntem Daha Kısa Doğru Söylüyosun Embarassed
Mesaj25.06.2008, 11:22 (UTC)    
Mesaj konusu:

Paylaşım için teşekkürler.
Mesaj25.06.2008, 18:47 (UTC)    
Mesaj konusu:

Çok işime yaradı ellerine sağlık,senin sayende ccs tasarım hazırlamayı öğrendim çok saol Wink Wink Smile
Mesaj26.06.2008, 10:58 (UTC)    
Mesaj konusu:

yaa arkadaşım bn senin dediklerini yaptım ama su linkleri bi türlü yapamadım nasıl olcak bi anlatsana mesela sayfalarımı değiştire girdim ana sayfaya resim koyuyorum gözükmüyo neden?
Mesaj26.06.2008, 11:11 (UTC)    
Mesaj konusu:

ufukburomobilya yazmış:
yaa arkadaşım bn senin dediklerini yaptım ama su linkleri bi türlü yapamadım nasıl olcak bi anlatsana mesela sayfalarımı değiştire girdim ana sayfaya resim koyuyorum gözükmüyo neden?


anlatımı eksiksiz yerine getirdiğinden emin ol
menü gizleme v.s gibi kdları koyduğpuna ve asıl yerine koyduğundan emin ol.
______________
İmzanız 3 satırı geçmemelidir.
Mesaj26.06.2008, 11:21 (UTC)    
Mesaj konusu:

SAOL Wink Very Happy
______________
Mesaj26.06.2008, 11:30 (UTC)    
Mesaj konusu:

Çok Teşekkürler Dostum Wink
______________

DURMAK DEĞİL ÇALIŞMAK LAZIM, OLMAK DEĞİL VAR OLMAK LAZIM,
PAYLAŞIMA DEVAM!!!!
Önceki mesajları göster:   


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