Forum'da ara:
Ara


« Önceki başlık :: Sonraki başlık »  
Yazar Mesaj
Mesaj20.08.2008, 08:11 (UTC)    
Mesaj konusu: Değişik Bir Css Tasarim

Öncelikle kodları koyacağımız yerler css bölümü..Css design stilinde tasarım ayarları/gelişmiş bölümünden en alttaki kutu olan css kodu bölümüne aşağıdaki kodları koyuyoruz.
Kod:
h1#title{display: none;}
h2#title span {display: none;}
div.header{display: none;}
li.nav_element{list-style-type: none;}

-body = arkaplan kodudur.# ile yazılan sayı değer yerine başka renkler koyabilirsiniz.
Css kodu bölümüne
body {background-color:#F2F2F2;}
a{color:#000080; font-size: 14px; text-decoration: none;}
a:hover {color: #000080; font-size: 14px; text-decoration: none;}
a:link {color: #000080; font-size: 14px; text-decoration: none;}
a:active {color: #000080; font-size: 14px; text-decoration: none;}
a:visited {color: #000080; font-size: 14px; text-decoration: none;}

3.adım

-bu kodlar menü içindir.
-li.nav_element a = bu menünün ilk hali içindir
-li.nav_element a:hover = bu kodda menünün üstüne gelindiği durum içindir.

Css kodu bölümüne
li.nav_element a{
color:#FFFFFF;
display: block;
margin: 5px;
padding-left: 10px;
text-decoration: none;
width: 120px;
height: 20px;
background-image:url();
background-color:#FDC600;}
li.nav_element a:hover{
color:#FFFFFF;
display: block;
margin: 5px;
padding-left: 10px;
text-decoration: none;
width: 120px;
height: 20px;
background-image:url();
background-color:#F3EA8F;}

4.adım

-bu kodların hepsi yukarıdaki görsel anlatımda gösterilen yerler içindir.

Css kodu bölümüne
* { padding: 0; margin: 0; }
#Testdesign2 {
margin: 0 auto;
width: 922px;}
#Header_oben {
color: #333;
width: 900px;
height: 60px;
float: left;
padding: 10px;
border: 1px solid #80807F;
margin: 10px 0px 0px 0px;
background-image: url();
background: #FDC600;}
#Streifen_oben {
float: left;
width: 900px;
color: #333;
padding: 10px;
border: 1px solid #80807F;
margin: 0px 0px 0px 0px;
background: #F3EA8F;}
#content {
color: #333;
border: 1px solid #80807F;
margin: 0px 0px 0px 0px;
padding: 10px;
height: 320px;
width: 738px;
float: left;
background: #E8E8E3;
overflow:auto;}
#nav_container {
float: right;
color: #333;
border: 1px solid #80807F;
margin: 0px 0px 0px 0px;
padding: 10px;
height: 320px;
width: 140px;
display: inline;
background: #FDF6Da;}
#Streifen_unten {
width: 900px;
clear: both;
color: #333;
border: 1px solid #80807F;
background: #FDC600;
margin: 0px 0px 10px 0px;
padding: 10px;}
#counter{text-align:center;}

5.adım

-bu kodlar css komutlarını tutan divlerdir.
-yazı buraya yazan yerlere istediğiniz yazıları yazabilirsiniz.

Tasarım üzerindeki yazı bölümüne
<div id="Testdesign2">
<div id="Header_oben">yazı buraya</div>
<div id="Streifen_oben">yazı buraya</div>

6.adım

Tasarım altındaki yazı bölümüne
<div id="Streifen_unten">;</div><>yazı buraya</div> alıntdır
______________

Mesaj20.08.2008, 10:38 (UTC)    
Mesaj konusu:

teşekkürler güzel paylaşım bir dahakinde kodları yazarken code butonuna basarsan sevinirim Wink
______________
www.cevreyeduyarlisite.tr.gg
Mesaj20.08.2008, 14:40 (UTC)    
Mesaj konusu:

Merhaba,

Lütfen Tasarım Paylaşımlarınızı Sabit Başlıkalrda Yapınız..

İyi Eğlenceler
...
______________
www.ironarchives.tr.gg
Önceki mesajları göster:   


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