Simple Machines Community Forum

SMF Support => Türkçe Bölümü (Turkish) => Language Specific Support => Dokümantasyon => Topic started by: Arbalot on June 12, 2006, 03:18:16 AM

Title: Css Temel Terimleri
Post by: Arbalot on June 12, 2006, 03:18:16 AM
1.Css Nedir? (#post_a)
2.Link (#post_b)
3.Liste (#post_c)
4.KIn (#post_d)
5.Font (Yazi Tipi) (#post_e)
6.Text (Metin) (#post_f)
7.Imleç (#post_g)
8.Zemin (#post_k)
9.Tablo (#post_l)
10.Scroll Bar (#post_m)






Css Nedir?
HTML bize metin biçimlendirme alanında çok geniş olanaklar sunar. CSS, uzun yazılışıyla Cascading Style Sheets, veya Türkçesiyle Stil şablonları ise bunu bir adım daha öteye götürür, bize sayfalarımız için global şablonlar hazırlama olanağı verdiği gibi, tek bir harfin stilini; yani renk,  font, büyüklük gibi özelliklerini değiştirmek için de kullanılabilir. Bu tekniğin en önemli özelliği kullanımındaki bu esnekliğidir.
Bir web sayfası içerisinde zaten estetik kuralları gereği yüzlerce renk ve font kullanmayız. Genelde birbiriyle uyumlu birkaç renk ve birkaç font kullanırız ki, bunları her sayfada ayrı ayrı tekrar belirtmek yerine CSS yardımıyla bir sefer tanımlayıp bütün web sayfamızda kullanabiliriz.Bu şekilde güncelleme yaparken de onlarca sayfayı değiştirmekten kurtuluruz.
CSS kodları HTML kodlarının içine yazılırlar. Türüne göre body veya head bölümlerinde yer alabilirler. Bunların dışında harici CSS dosyaları oluşturulup bunlar gerektiğinde HTML belgesi içerisinde çağırılabilirler.
Hemen hemen her konuda olduğu gibi CSS konusunda da Microsoft Internet Explorer ve Netscape farklı yorumlar ortaya koyarlar. Bu noktada her iki browser'ın da aynı/benzer yorumlayacağı kodlar yazmak en uygunudur.

LİNK ÖZELLİKLERİ
a :Linkin, sayfa açıldığında tıklanmadan veya ümleç üzerine getirilmeden önceki durumudur.
a:hover :Linkin imleç üzerine getirildiğindeki durumudur.
a:active :Linkin tıklandığı andaki durumudur.
a:visited :Linkin tıklandıktan sonraki durumudur.


BİÇİMLENDİRME:
color:Linkin rengini belirler.
background-color:Linkin zemin rengini belirler.
background-image:Linkin zeminine resim ekler(Bu animated-gif de olabilir.)
text-decoration:Linkin altının,üstünün vs. çizgili olup olmayacağını belirler.
font-weight:Yazının kalınlık veya inceliğini belirler.
border:Linkin etrafına kenarlık ekler.
display:Linki içeren hücre , satır vb. istenilen alanın seçilmesini sağlar.

LİSTE ÖZELLİKLERİ
disk:Liste biçiminin disk (içi dolu daire) şeklinde olmasını sağlar.
circle : Liste biçiminin çember şeklinde olmasını sağlar.
square : Liste biçiminin kare olmasını sağlar.
decimal : Liste biçiminin rakamlardan oluşmasını sağlar.
lower-roman : Liste biçiminin i,ii,iii gibi küçük roma rakamlarından oluşmasını sağlar.
upper-roman : Liste biçiminin I,II,II gibi büyük roma rakamlarından oluşmasını sağlar.
lower-alpha : Liste biçiminin a,b,c şeklinde küçük harf olmasını sağlar.
upper-alpha : Liste biçiminin A,B,C şeklinde büyük harf olmasını sağlar.
none : Listenin simgesiz olmasını sağlar.
inside : Listenin ikinci satırının en soldan başlamasını sağlar.
Outside : Listenin ikinci satırının ilk satır ile aynı yerden başlamasını sağlar.
list-style-image : Liste biçiminin resim olmasını sağlar.

KIN ÖZELLİKLERİ
position:KInın yerinin belirlenmesini sağlar.
absolute:KInın yerinin pencere esas alınarak belirlenmesini sağlar.
relative: KInın yerinin bir önceki kIn esas alınarak belirlenmesini sağlar.
static:KInın yerinin sabit olarak (Varsayılan olan sol üst köşe) belirlenmesini sağlar.
top:KInın üstten ne kadar aşağıda olması gerektiğini belirler.
left:KInın soldan ne kadar içeride olması gerektiğini belirler.
width:KInın genişliğinin ne kadar olacağını belirler.
height:KInın yüksekliğinin ne kadar olacağını belirler.
overflow:KInın belirtilen yükseklik ve genişliğe sığmayan kısmına ne olacağını belirler.
auto:Otomatik olarak belirlenir.
scroll:Kaydırma çubuğu ekleyerek görünmesini sağlar.
visible : KInı belirtilen boyutların dışına taşırarak sığmayan yerlerin görünmesini sağlar.
hidden:Sığmayan yerleri gizler.
visibility:KInın görünebilirlik ayarını yapar.
visible : KInın görünür olmasını sağlar.
hidden:KInı gizler.
z-index : KInların alttan üste doğru hangi sıra ile gösterileceğini belirler.1 değeri kInın en altta olacağını belirtir.


FONT ÖZELLİKLERİ
font-family:Yazı türünü belirler.(Arial , Verdana gibi.)
font-style:Yazının normal veya sağa eğik olmasını sağlar.
font-variant:Yazının normal veya tümünün büyük harflerden oluşmuş olmasını sağlar.
font-weight:Yazının kalınlık-inceliğini belirler.
font-size:Yazının büyüklüğünü belirler.

TEXT ÖZELLİKLERİ
word-spacing : Kelimeler arasında bırakılacak boşluğu boşluğu belirler.
letter-spacing : Harfler arasında bırakılacak boşluğu boşluğu belirler.
text-decoration : Kelimenin altının , üstünün vs. çizili olup olmayacağını belirler.
underline : Kelimenin altının (Satır altından) çizili olmasını sağlar.
overline : Kelimenin üstünün (Satır üstünden) çizili olmasını sağlar.
line-through : Kelimenin ortasından çizili olmasını sağlar.
blink : Kelimenin yanıp sönmesini sağlar.(Netscape için)
vertical-align : Metnin yatay olarak nasıl hizalanacağını belirler.
text-transform: Kelimelerin büyük harf veya küçük harflerden oluşmasını sağlar.
capitalize : Kelimelerin ilk harflerinin büyük olmasını sağlar.
uppercase : Kelimelerin bütün harflerinin büyük olmasını sağlar.
lowercase : Kelimelerin bütün harflerinin küçük olmasını sağlar.
none : Kelimelerin orjinal metindeki gibi olmasını sağlar.
text-align: Metnin dikey olarak nasıl hizalanacağını belirler.
left : Metni sola yaslar.
right : Metni sağa yaslar.
center : Metni ortalar.
justify : Metni iki yana yaslar.
text-indent : Metnin ilk satırının soldan ne kadar içerden başlayacağını belirler.
line-height : Satırın yüksekliğini ayarlar.(Yüksek değer verildiğinde satırlar arasındaki boşluk artar.)
first-line : Metnin ilk satırının biçimlendirilmesini sağlar.
first-letter : Metnin ilk harfinin biçimlendirilmesini sağlar.

İMLEÇ ÖZELLİKLERİ
crosshair:İmlecin artı işareti şeklinde olmasını sağlar.
auto:İmlecin metinde dikey çizgi ,boş alanda normal ok şeklinde olmasını sağlar.
default:İmlecin hem metinde hem de boş alanda normal ok şeklinde olmasını sağlar.
hand:İmlecin linkte olduğu gibi el şeklinde olmasını sağlar.
move:İmlecin taşıma işareti şeklinde olmasını sağlar.
ne-resize:İmlecin sağa yatık normal ok olmasını sağlar.
nw-resize:İmlecin sola yatık normal ok olmasını sağlar.
se-resize:İmlecin yukardan aşağı doğru ve sağa yatık normal ok olmasını sağlar.
sw-resize:İmlecin yukardan aşağı doğru ve sola yatık normal ok olmasını sağlar.
n-resize:İmlecin aşağıdan yukarıya doğru ince ok şeklinde olmasını sağlar.
s-resize:İmlecin yukardan aşağı doğru ince ok şeklinde olmasını sağlar.
w-resize:İmlecin sola doğru ince ok şeklinde olmasını sağlar.
e-resize:İmlecin sağa doğru ince ok şeklinde olmasını sağlar.
text:İmlecin hem metinde hem de boş alanda metinde olduğu gibi görünmesini sağlar.
wait:İmlecin meşgul animasyonuna dönüşmesini sağlar.
help:İmlecin yardım-soru işaretine dönüşmesini sağlar


ZEMİN ÖZELLİKLERİ
background-color: Zeminin rengini belirler.
#color : Renk adı.
transparent: Zeminin saydam olmasını sağlar.
background-image: Zemine resim yerleştirilmesini sağlar.
url : Zemine yerleştirilen resmin adresi.
background-repeat: Zemine yerleştirilen resmin nasıl yayılacağını belirler.
repeat : Resmin bütün zemine yayılmasını sağlar.
repeat-x : Resmin sol-üstten sağ-üste doğru yayılmasını sağlar.
repeat-y : Resmin sol-üstten sol-alta doğru yayılmasını sağlar.
no-repeat: Resmin yayılmadan orjinal boyutuyla görünmesini sağlar.
background-attachment: Zemindeki resmin , sayfa kaydırma çubuğuyla hareket ettirildiğindeki durumunu belirler.
scroll : Sayfa hareket ettirildiğinde zeminin de kaymasını sağlar.
fixed: Sayfa kaydırılsa da zeminin sabit kalmasını sağlar
background-position: Zemindeki resmin istenilen şekilde yerleştirilmesini sağlar.
top : Resmi yukarı yerleştirir.
center : Resmi ortalar.
bottom : Resmi aşağı yerleştirir.
left : Resmi sola yerleştirir.
right: Resmi sağa yerleştirir.
...px : Resmin soldan istenilen ölçüde içerde olmasını sağlar.


TABLO ÖZELLİKLERİ
margin : Tablo ile pencerenin kenarları arasında bırakılacak boşluğu belirler.
margin-top : Tablo ile pencerenin üst kenarı arasında bırakılacak boşluğu belirler.
margin-right : Tablo ile pencerenin sağ kenarı arasında bırakılacak boşluğu belirler.
margin-bottom : Tablo ile pencerenin alt kenarı arasında bırakılacak boşluğu belirler.
margin-left : Tablo ile pencerenin sol kenarı arasında bırakılacak boşluğu belirler.

padding : Tablo kenarları ile tablo içeriği (Yazı vb.) arasında bırakılacak boşluğu belirler.
padding-top : Tablonun üst kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler.
padding-right : Tablonun sağ kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler.
padding-bottom : Tablonun alt kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler.
padding-left : Tablonun sol kenarı ile tablo içeriği arasında bırakılacak boşluğu belirler.

border : Tablonun kenarlarının şekillendirilmesini sağlar.

border-top : Tablonun üst kenarının şekillendirilmesini sağlar.
border-left : Tablonun sol kenarının şekillendirilmesini sağlar.
border-bottom : Tablonun alt kenarının şekillendirilmesini sağlar.
border-right : Tablonun sağ kenarının şekillendirilmesini sağlar.

border-width :
Tablonun kenarlarının kalınlığını belirler.
border-top-width : Tablonun üst kenarının kalınlığını belirler.
border-right-width : Tablonun sağ kenarının kalınlığını belirler.
border-bottom-width : Tablonun alt kenarının kalınlığını belirler.
border-left-width : Tablonun sol kenarının kalınlığını belirler.

border-style : Tablonun kenarlık türünü belirler.
border-top-style : Tablonun üst kenarlık türünü belirler.
border-right-style : Tablonun sağ kenarlık türünü belirler.
border-bottom-style : Tablonun alt kenarlık türünü belirler.
border-left-style : Tablonun sol kenarlık türünü belirler.

border-color :
Tablonun kenarlarının rengini belirler.
border-top-color : Tablonun üst kenarının rengini belirler.
border-right-color : Tablonun sağ kenarının rengini belirler.
border-bottom-color : Tablonun alt kenarının rengini belirler.
border-left-color : Tablonun sol kenarının rengini belirler.

color : Tabloda geçen metnin rengini belirler.

width : Tablonon genişliğini belirler.

height : Tablonun yüksekliğini belirler.


NOT : Başlık "TABLO" olarak verildi Ancak bu nitelikler başta TD , TR , TH vs. olmak üzere hemen her etiket için kullanılabilir.CSS' yi özel kılan da zaten bu...


KAYDIRMA ÇUBUĞU ÖZELLİKLERİ
scrollbar-face-color :Kaydırma çubuğunun yüzey rengi , aynı zamanda zemini de etkiliyor.
scrollbar-base-color :Kaydırma çubuğununun sol ve üst kenarlıklarını çizgi halinde kaplıyor.
scrollbar-shadow-color :Sağ ve alt kenarlıkların gölge rengi.
scrollbar-highlight-color :Sol ve üst kenarlıkların gölge rengi,aynı zamanda zemini de etkiliyor.
scrollbar-arrow-color :Yön oklarının rengi

Kaydırma çubuğu, sadece Internet Explorer'da geçerlidir.

-Derlenmiştir.
Title: Re: Css Temel Terimleri
Post by: Harzem on June 12, 2006, 05:45:53 AM
Hay maşşallah! Arbalot, seni SMF'nin genel dokümentasyon takımına alalım ;) Eline sağlık güzel olmuş. İstersen özellik isimlerini eğik yapabilirsin, mesela:

scrollbar-shadow-color :Sağ ve alt kenarlıkların gölge rengi.
scrollbar-highlight-color :Sol ve üst kenarlıkların gölge rengi,aynı zamanda zemini de etkiliyor.
scrollbar-arrow-color :Yön oklarının rengi
Title: Re: Css Temel Terimleri
Post by: NeoCooL on June 12, 2006, 06:10:06 AM
Mükemmel bi kaynak oluşturmuşsun bence sabit ellerine sağlık  ;D
Title: Re: Css Temel Terimleri
Post by: spirit31-31 on June 12, 2006, 09:03:05 AM
ooo :) Gözümsün Abi Eline yüreğine sağlık çok güzel olmuş...  :)
Title: Re: Css Temel Terimleri
Post by: STRONGHOLD on June 14, 2006, 02:34:11 PM
Arbolat dostum Süper olmuş...Eline Sağlık  ;D
Title: Re: Css Temel Terimleri
Post by: Sindorf on June 14, 2006, 07:29:12 PM
Arbalot'tan şahane bir çalışma... teşekkürler :) -- Ben hala bunun (CSS) kitabını okuyorum... Bitmedi aylardır... :)
Title: Re: Css Temel Terimleri
Post by: rocker_turan on June 16, 2006, 04:55:44 PM
Çok güzel yararlı bir bilgi olmuş saol...
Title: Re: Css Temel Terimleri
Post by: nailkoese on June 17, 2006, 08:35:05 AM
eline sağlık harikalar yaratmışsın cok işimize yarayacak
Title: Re: Css Temel Terimleri
Post by: uyagan on June 17, 2006, 06:22:28 PM
mükemmel olmuş eline sağlık Arbalot  ;)
Title: Re: Css Temel Terimleri
Post by: SenSa on June 18, 2006, 11:53:41 AM
Arkadaşlar birşey sorcam bu bisim default tema denen şeydeki style.css'de scrollbar kodları yok mu bana mı öyle gelio ?! :( (o kadar style.css'yi kurcaladım zamanında,ama daha şimdi bu konuyu gördüm 10 dklik iş olcaktı arbalot'un sayesinde ;) bi tek scrollbar'ı çözememiştim onuda halledemedim :(


Arkadaşlar buyrun bakın benim style.css:
Code: [Select]
/* Normal, standard links. */
a:link
{
color: #ff8000;
text-decoration: none;
}
a:visited
{
color: #ff8000;
text-decoration: none;
}
a:hover
{
text-decoration: underline;
}

/* Navigation links - for the link tree. */
.nav, .nav:link, .nav:visited
{
color: #000000;
text-decoration: none;
}
a.nav:hover
{
color: #ff8000;
text-decoration: underline;
}

/* Tables should show empty cells. */
table
{
empty-cells: show;
}

/* By default (td, body..) use verdana in black. */
body, td, th , tr
{
color: #000000;
font-size: small;
font-family: verdana, sans-serif;
}

/* The main body of the entire forum. */
body
{
background-color: #fafafa;
margin: 10px;
padding: 0px 30px 20px 30px;
        background-image: url('images/bg.gif');
}

/* Input boxes - just a bit smaller than normal so they align well. */
input, textarea, button
{
color: #ff8000;
font-family: verdana, sans-serif;
}
input, button
{
font-size: 100%;
}

textarea
{
font-size: 100%;
color: #000000;
font-family: verdana, sans-serif;
}

/* All input elements that are checkboxes or radio buttons. */
input.check
{
}

/* Selects are a bit smaller, because it makes them look even better 8). */
select
{
font-size: 90%;
font-weight: small;
color: #0ec4d8;
font-family: verdana, sans-serif;
}

/* Standard horizontal rule.. ([hr], etc.) */
hr, .hrcolor
{
height: 1px;
border: 0;
color: #0ec4d8;
background-color: #0ec4d8;
}

/* No image should have a border when linked */
a img{
border: 0;
}
/* A quote, perhaps from another post. */
.quote
{
color: #000000;
background-color: #D7DAEC;
border: 1px solid #000000;
margin: 1px;
padding: 1px;
font-size: x-small;
line-height: 1.4em;
}

/* A code block - maybe even PHP ;). */
.code
{
color: #000000;
background-color: #dddddd;
font-family: "courier new", "times new roman", monospace;
font-size: x-small;
line-height: 1.3em;
/* Put a nice border around it. */
border: 1px solid #000000;
margin: 1px auto 1px auto;
padding: 1px;
width: 99%;
/* Don't wrap its contents, and show scrollbars. */
white-space: nowrap;
overflow: auto;
/* Stop after about 24 lines, and just show a scrollbar. */
max-height: 24em;
}

/* The "Quote:" and "Code:" header parts... */
.quoteheader, .codeheader
{
color: #000000;
text-decoration: none;
font-style: normal;
font-weight: bold;
font-size: x-small;
line-height: 1.2em;
}

/* Generally, those [?] icons.  This makes your cursor a help icon. */
.help
{
cursor: help;
}

/* /me uses this a lot. (emote, try typing /me in a post.) */
.meaction
{
color: blue;
}

/* The main post box - this makes it as wide as possible. */
.editor
{
width: 96%;
}

/* Highlighted text - such as search results. */
.highlight
{
background-color: black;
font-weight: bold;
color: yellow;
}

/* Alternating backgrounds for posts, and several other sections of the forum. */
.windowbg
{
color: #000000;
background-color: #ECEDF3;
}
.windowbg2
{
color: #000000;
background-color: #F6F6F6;
}
.windowbg3
{
color: #000000;
background-color: #E0E1E8;
}
/* the today container in calendar */
.calendar_today
{
background-color: #FFFFFF;
}

/* These are used primarily for titles, but also for headers (the row that says what everything in the table is.) */
.titlebg, tr.titlebg th, tr.titlebg td, .titlebg2, tr.titlebg2 th, tr.titlebg2 td
{
color: blue;
font-style: small;
background-color: #E9F0F6;
background-image: url(images/titlebg.jpg);
border-bottom: solid 1px #9BAEBF;
border-top: solid 1px #FFFFFF;
background-repeat: repeat-x;
padding-left: 10px;
padding-right: 10px;
}
.titlebg, .titlebg a:link, .titlebg a:visited
{
font-weight: bold;
color: black;
font-style: normal;
}

.titlebg a:hover
{
color: #404040;
}
/* same as titlebg, but used where bold text is not needed */
.titlebg2 a:link, .titlebg2 a:visited
{
color: black;
font-style: normal;
text-decoration: underline;
}

.titlebg2 a:hover
{
text-decoration: underline;
}

/* This is used for categories, page indexes, and several other areas in the forum.
.catbg and .catbg2 is for boardindex, while .catbg3 is for messageindex and display headers*/
.catbg , tr.catbg td , .catbg3 , tr.catbg3 td
{
background-image: url(images/catbg.jpg);
background-color: #E9F0F6;
color: #000000;
padding-left: 10px;
padding-right: 10px;
}
.catbg2 , tr.catbg2 td
{
background-image: url(images/catbg2.jpg);
background-color: #E9F0F6;
color: #000000;
padding-left: 10px;
padding-right: 10px;
}
.catbg, .catbg2, .catbg3
{
border-bottom: solid 1px #E9F0F6;
background-repeat: repeat-x;
}
.catbg, .catbg2
{
font-weight: bold;
}
.catbg3, tr.catbg3 td, .catbg3 a:link, .catbg3 a:visited
{
font-size: 95%;
color: white;
text-decoration: none;
}
.catbg a:link, .catbg a:visited , .catbg2 a:link, .catbg2 a:visited
{
color: white;
text-decoration: none;
}
.catbg a:hover, .catbg2 a:hover, .catbg3 a:hover
{
color: #e0e0ff;
}
/* This is used for tables that have a grid/border background color (such as the topic listing.) */
.bordercolor
{
background-color: #ADADAD;
padding: 0px;
}

/* This is used on tables that should just have a border around them. */
.tborder
{
padding: 1px;
border: 1px solid #ADADAD;
background-color: #fafafa;
}

/* Default font sizes: small (8pt), normal (10pt), and large (14pt). */
.smalltext
{
font-size: x-small;
font-family: verdana, sans-serif;
}
.middletext
{
font-size: 90%;
}
.normaltext
{
font-size: small;
}
.largetext
{
font-size: large;
}


/* Posts and personal messages displayed throughout the forum. */
.post, .personalmessage
{
width: 100%;
overflow: auto;
line-height: 1.3em;
}

/* All the signatures used in the forum.  If your forum users use Mozilla, Opera, or Safari, you might add max-height here ;). */
.signature
{
width: 100%;
overflow: auto;
padding-bottom: 3px;
line-height: 1.3em;
}

/* Sometimes there will be an error when you post */
.error{
color: red;
}


/* definitions for the main tab, active means the tab reflects which page is displayed */
.maintab_first, .maintab_back, .maintab_last, .maintab_active_first, .maintab_active_back, .maintab_active_last
{
background-position: left bottom;
color: white;
text-transform: uppercase;
vertical-align: top;

}
.maintab_back, .maintab_active_back
{
color: white;
text-decoration: none;
font-size:  9px;
vertical-align: top;
padding: 2px 6px 6px 6px;
font-family: tahoma, sans-serif;
}

.maintab_first
{
background-image: url(images/maintab_first.gif);
background-repeat: no-repeat;
width: 10px;
}
.maintab_back
{
background-image: url(images/maintab_back.gif);
background-repeat: repeat-x;
}
.maintab_last
{
background-image: url(images/maintab_last.gif);
background-repeat: no-repeat;
width: 8px;
}
.maintab_active_first
{
background-image: url(images/maintab_active_first.gif);
background-repeat: no-repeat;
width: 6px;
}
.maintab_active_back
{
background-image: url(images/maintab_active_back.gif);
background-repeat: repeat-x;
}
.maintab_active_last
{
background-image: url(images/maintab_active_last.gif);
background-repeat: no-repeat;
width: 8px;
}

/* how links behave in main tab. */
.maintab_back a:link , .maintab_back a:visited, .maintab_active_back a:link , .maintab_active_back a:visited
{
color: white;
text-decoration: none;
}

.maintab_back a:hover, .maintab_active_back a:hover
{
color: #0ec4d8;
text-decoration: none;
}
/* definitions for the mirror tab */
.mirrortab_first, .mirrortab_back, .mirrortab_last, .mirrortab_active_first, .mirrortab_active_back, .mirrortab_active_last
{
background-position: left top;
color: white;
text-transform: uppercase;
vertical-align: top;

}
.mirrortab_back, .mirrortab_active_back
{
color: white;
text-decoration: none;
font-size: 9px;
vertical-align: bottom;
padding: 6px 6px 2px 6px;
font-family: tahoma, sans-serif;
}

.mirrortab_first
{
background-image: url(images/mirrortab_first.gif);
background-repeat: no-repeat;
width: 10px;
}
.mirrortab_back
{
background-image: url(images/mirrortab_back.gif);
background-repeat: repeat-x;
}
.mirrortab_last
{
background-image: url(images/mirrortab_last.gif);
background-repeat: no-repeat;
width: 6px;
}
.mirrortab_active_first
{
background-image: url(images/mirrortab_active_first.gif);
background-repeat: no-repeat;
width: 6px;
}
.mirrortab_active_back
{
background-image: url(images/mirrortab_active_back.gif);
background-repeat: repeat-x;
}
.mirrortab_active_last
{
background-image: url(images/mirrortab_active_last.gif);
background-repeat: no-repeat;
width: 8px;
}

/* how links behave in mirror tab. */
.mirrortab_back a:link , .mirrortab_back a:visited, .mirrortab_active_back a:link , .mirrortab_active_back a:visited
{
color: white;
text-decoration: none;
}

.mirrortab_back a:hover, .mirrortab_active_back a:hover
{
color: #0ec4d8;
text-decoration: none;
}

Of ne beceriksiz insanım ben yaaa  :(  :(  :( 
Title: Re: Css Temel Terimleri
Post by: T@LH@ on June 21, 2006, 05:06:59 PM
Peki arkadaslar ben bölüm acıklamalarını birascık uzun tutmak istiyom yani bir kısımı ana sayfada görünsün tamamıda bölümün üstüne geldiğinde ufak bir kutucuk acılıpı icinden gösterilsin bunu nasıl yapabilirim ?
Title: Re: Css Temel Terimleri
Post by: Arbalot on June 21, 2006, 05:47:32 PM
bunun css ile pek bir alakası yok...
harzem yine iş cıktı sana...
Title: Re: Css Temel Terimleri
Post by: T@LH@ on June 21, 2006, 06:13:42 PM
bunun css ile pek bir alakası yok...
harzem yine iş cıktı sana...

Kusura bakma Arbalot cssde link işlemleri yapıldığı için burada sordum ... Ben o zaman yeni konu olarak acayım ...
Title: Re: Css Temel Terimleri
Post by: pr0xymAn1ac on July 04, 2006, 07:35:40 AM
beyler ben çöl ateşini kullanıyorum forumdaki tüm yazıların altı çizili ben hiç olmasın istiyorum style.css deki tüm underlineları sildim ama nafile sadece kategori isimleri deişti bölüm isimleri üyeler fln hepsi aynı
Title: Re: Css Temel Terimleri
Post by: {••тєηηιѕєя••} on July 04, 2006, 07:38:03 AM
beyler ben çöl ateşini kullanıyorum forumdaki tüm yazıların altı çizili ben hiç olmasın istiyorum style.css deki tüm underlineları sildim ama nafile sadece kategori isimleri deişti bölüm isimleri üyeler fln hepsi aynı
Senin konuna yazdığım cevaba bi göz atarmısın..
underlineleri silmeyeceksin none yapacaksın oluyor.
Title: Re: Css Temel Terimleri
Post by: jackboot on July 10, 2006, 02:36:45 PM
çok faydalı olmuş... teşekkürler..
Title: Re: Css Temel Terimleri
Post by: esert on July 14, 2006, 03:38:48 PM
hay maşallah nazar değmesin arbolat gözünün yağına çift yumurta kırıyım ellerine salık


(ilk mesajıma böle güzel bi topic e yazmak benim için onur  verici :D)
Title: Re: Css Temel Terimleri
Post by: Gang$ta on July 14, 2006, 03:53:33 PM
(https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fimg332.imageshack.us%2Fimg332%2F7606%2Fforum5oc.th.jpg&hash=03ca4da1364c83d992c9cfd17d19bc21) (http://img332.imageshack.us/my.php?image=forum5oc.jpg)
resimde gosterdiğim yerlerin rengini değistirmek için tam olarak ne nereleri değistirmem lazım
Title: Re: Css Temel Terimleri
Post by: Arbalot on July 14, 2006, 03:57:42 PM
1 . si için images klasorunde catbg leri arayacan ve bulup değiştirecen
2. için boardindex.template.php de
Code: [Select]
<td colspan="3" class="windowbg', !empty($settings['seperate_sticky_lock']) ? '3' : '', '">bunu bulup windowsbg olan yeri windowsbg21 yapacan ve style.css de yeni bi değişken tanımlayacan...
Title: Re: Css Temel Terimleri
Post by: Gang$ta on July 14, 2006, 04:23:35 PM
1 . si için images klasorunde catbg leri arayacan ve bulup değiştirecen
2. için boardindex.template.php de
Code: [Select]
<td colspan="3" class="windowbg', !empty($settings['seperate_sticky_lock']) ? '3' : '', '">bunu bulup windowsbg olan yeri windowsbg21 yapacan
buraya kadar tamamda "style.css de yeni bi değişken tanımlayacan..." kısmını anlamadım tam olarak onu nasıl yapıcam?
Title: Re: Css Temel Terimleri
Post by: Arbalot on July 14, 2006, 04:34:04 PM
mesela
Code: [Select]
.windowbg
{
color: #000000;
background-color: #ECEDF3;
}

boyle bi ifade var bunu kopyalayacan bu koddan hemen sonra yapıstıracan
daha sonra .windowbg yazısını .windowbg21 olarak değiştirecen
Title: Re: Css Temel Terimleri
Post by: Gang$ta on July 14, 2006, 04:41:17 PM
sanırım cok kalın kafalıyım :) bu sefer anladım ama deniyelim bi olmazsa yine rahatsız edicem birazcık :P
bide alt bolumlerin renginden vazgectim kalsın orası :) sadece üst taraflar yeter.ayrıca premium forum olayına baktım onuda sadece tek bir yerini yapıcam onada bi kod ayarı yapılcak gibi...
Title: Re: Css Temel Terimleri
Post by: Gang$ta on July 15, 2006, 04:14:35 AM
flood olcak biraz ama Arbalot ustadım ben sadece mp3 bolumunun değil butun forumların üst kısmını değistirmek istiorum... ;)
Title: Re: Css Temel Terimleri
Post by: Arbalot on July 15, 2006, 06:21:42 AM
sen bunu uyguladın mı?
eger uyguladınsa butun bolumler değişmesi lazım.
hatta her  katagoriye farklı bi renk atayabiliyorsun.
bknz: premium forum
Title: Re: Css Temel Terimleri
Post by: Gang$ta on July 15, 2006, 06:49:04 AM
tam olarak son sekli buysa uyguluyorum aksama haberin olur ustad ;)

tam olarak istediğim http://www.geceninrengi.net/forum/index.php gibi
Title: Re: Css Temel Terimleri
Post by: Gang$ta on July 17, 2006, 05:45:27 PM
oldu ya iste budur saolasın Arbalot kardes

EDİT:(https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fimg129.imageshack.us%2Fimg129%2F6073%2Fforum1ci3.th.jpg&hash=985f931b796b78c52e6f3d98a9b9c226) (http://img129.imageshack.us/my.php?image=forum1ci3.jpg)
resimdeki yerlerin rengini nasıl değistirebilirim?aynı sekilde yukardaki login bolumude gri :(

bi de elim değmişken bolumlerin yazılarını birascık buyultmek istedim konularda buyudu bu nasıl düzeltebiliriz
(https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fimg256.imageshack.us%2Fimg256%2F3948%2Fforum2kv3.th.jpg&hash=7cd8441258236ced5ef2546714677511) (http://img256.imageshack.us/my.php?image=forum2kv3.jpg)
Title: Re: Css Temel Terimleri
Post by: SenSa on July 19, 2006, 08:26:48 AM
Arkadaşlar birşey sorcam bu bisim default tema denen şeydeki style.css'de scrollbar kodları yok mu bana mı öyle gelio ?! :( (o kadar style.css'yi kurcaladım zamanında,ama daha şimdi bu konuyu gördüm 10 dklik iş olcaktı arbalot'un sayesinde ;) bi tek scrollbar'ı çözememiştim onuda halledemedim :(

Of ne beceriksiz insanım ben yaaa  :(  :(  :( 

Arkadaşlar bana cewap werecek biri yok mu?
Title: Re: Css Temel Terimleri
Post by: Huzeyfe on July 21, 2006, 10:05:29 AM
harika bir çalışma emeğin için teşekkürler kardeşim
Title: Re: Css Temel Terimleri
Post by: dandik_mail on August 11, 2006, 05:05:08 AM
Quote
/* Normal, standard links. */
a:link, a:visited
{
   color: #005177;
   background-color: transparent;
   text-decoration: none;
}
a:hover
{
   color: #cc3333;
   background-color: transparent;
   text-decoration: none;
}

/* Navigation links - for the link tree. */
.nav, .nav:link, .nav:visited
{
   color: yellow;
   background-color: blue;
   text-decoration: none;
}
a.nav:hover
{
   font-weight: bold;
   color: #cc3333;
   background-color: transparent;
   text-decoration: underline;
}

/* Tables should show empty cells too. */
table
{
   empty-cells: show;
}

/* By default (td, body..) use Verdana in black. */
body, td, th
{
   color: #000000;
   font-size: small;
   font-family: verdana, sans-serif;
}

/* Input boxes - just a bit smaller than normal so they align well. */
input, textarea
{
   font-size: 9pt;
   color: #000000;
   font-family: verdana, sans-serif;
   background-color: #afc6db;
}

/* Checkboxes shouldn't have a background color. */
input.check
{
   background-color: transparent;
}

/* Selects are a bit smaller, because it makes them look even better 8). */
select
{
   font-size: 8pt;
   font-weight: normal;
   color: #000000;
   font-family: verdana, sans-serif;
   background-color: #afc6db;
}

/* Standard horizontal rule.. */
hr
{
   color: #6394bd;
   background-color: transparent;
}
/* A more colorful hr.. */
.hrcolor
{
   height: 1px;
   border: 0;
   color: #6394bd;
   background-color: #6394bd;
}

/* A quote, perhaps from another post. */
.quote
{
   color: yellow;
   background-color: blue;
   border: 1px solid black;
   margin: 1px;
   padding: 1px;
   font-size: x-small;
}

/* A code block - maybe even PHP ;). */
.code
{
   color: #000000;
   background-color: #cccccc;
   border: 1px solid black;
   margin: 1px;
   padding: 1px;
   font-size: x-small;
   line-height: 1.3em;
}

/* The "Quote:" and "Code:" header parts... */
.quoteheader, .codeheader
{
   color: #000000;
   text-decoration: none;
   font-style: normal;
   font-weight: bold;
   font-size: x-small;
   line-height: 1.2em;
}

/* Generally, those [?] icons. */
.help
{
   cursor: help;
   background-color: transparent;
}

/* /me uses this a lot. */
.meaction
{
   color: red;
   background-color: transparent;
}

/* The main post box - this makes it as wide as possible. */
.editor
{
   width: 100%;
}

/* Highlighted text - such as search results. */
.highlight
{
   background-color: yellow;
   font-weight: bold;
   color: black;
}

/* Alternating backgrounds... */
.windowbg
{
   color: #000000;
   background-color: #afc6db;
}
.windowbg2
{
   color: #000000;
   background-color: #f8f8f8;
}

/* Titles - such as table headers. */
.titlebg, tr.titlebg th, tr.titlebg td, .titlebg a:link, .titlebg a:visited, .titlebg2, tr.titlebg2 th, tr.titlebg2 td, .titlebg2 a:link, .titlebg2 a:visited
{
   font-weight: bold;
   font-style: normal;
   color: #ffffff;
   background-color: #6e94b7;
}
.titlebg a:hover, .titlebg2 a:hover
{
   color: #ffffff;
   text-decoration: underline;
}

/* The category headers, page indexes, and such things. */
.catbg, .catbg3
{
   font-weight: bold;
   background-color: #afc6db;
   background-image: url(images/catbg.gif);
   color: #000000;
}

/* The borders around things. */
.bordercolor
{
   background-color: #6394bd;
}
.tborder
{
   border: 1px solid #6394bd;
}

/* Default font sizes. */
.smalltext
{
   font-size: x-small;
}
.normaltext
{
   font-size: small;
}
.largetext
{
   font-size: large;
}
/* No image should have a border when linked */
a img{
   border: 0;
}








arkadaşlar başlaarında tırnak gibi bi işaret olan yazıların anlamlarını yazarmısınız
Title: Re: Css Temel Terimleri
Post by: BesTCooL on August 21, 2006, 09:09:25 PM
ustalar benım sıtede ust mavı alt gri kaldı ben bu CSS ile oynadım bunu duzeltemedım yardımcı olabilir misiniz

sevgigsm.net/forum

/* Normal, standard links. */
.mytopbar
{
        background-image: #606070 ;
}

.mytop
{
       padding: 20px;
       border-top: solid 0px #ffffff;
       border-left: solid 0px #f0f0ff;
       border-bottom: solid 0px #202030;
       border-right: solid 0px #606070;
       background-image: url(images/mytop.jpg);
       background-color: #b5bec9;
       background-repeat: #606070;
       }
.mybar1
{
       padding: 8px;
       border-top: solid 1px #ffffff;
       border-left: solid 1px #f0f0ff;
       border-bottom: solid 1px #202030;
       border-right: solid 1px #606070;
       background-color: #77B6DC;
       }
.mybar
{
       padding: 8px;
       border-top: solid 1px #ffffff;
       border-left: solid 1px #f0f0ff;
       border-bottom: solid 1px #202030;
       border-right: solid 1px #606070;
       background-color: #ccd6dc;
       }
.mypic
{
       padding: 0px;
       border-bottom: solid 1px #ffffff;
       border-right: solid 1px #f0f0ff;
       border-top: solid 1px #202030;
       border-left: solid 1px #606070;
       background-color: #ccd6dc;
       }
a:link , a:visited
{
        color: #000000;
        text-decoration: underline;
}
 a:hover
{
        color: #0000ff;
        text-decoration: underline;
}

/* Navigation links - for the link tree. */
.nav, .nav:link, .nav:visited
{
        color: #000000;
        text-decoration: none;
}
a.nav:hover
{
        font-weight: bold;
        color: #ffffff;
        text-decoration: underline;
}

/* Tables should show empty cells. */
table
{
        empty-cells: show;
}

/* By default (td, body..) use Tahoma in black. */
body, td
{
        color: #000000;
        font-size: small;
        font-family: Tahoma, arial, helvetica, serif;
}

/* The main body of the entire forum. */
body
{
        background-image: url(images/myback.jpg);
        background-repeat: repeat-x;
        background-color: #7e8e9f;
        margin: 10px;
        margin-top: 0px;
        padding: 0px;
}

/* Input boxes - just a bit smaller than normal so they align well. */
input, textarea, button
{
        font-size: 10pt;
        color: #000000;
        font-family: Tahoma, arial, helvetica, serif;
}

/* All input elements that are checkboxes or radio buttons. */
input.check
{
}

/* Selects are a bit smaller, because it makes them look even better 8). */
select
{
        font-size: 9pt;
        font-weight: normal;
        color: #000000;
        font-family: Tahoma, arial, helvetica, serif;
}

/* Standard horizontal rule.. (
, etc.) */
hr, .hrcolor
{
        height: 1px;
        border: 0;
        color: #666666;
        background-color: #666666;
}

/* A quote, perhaps from another post. */
.quote
{
        color: #000000;
        background-color: #C3B8D0;
        border: 1px solid #000000;
        margin: 1px;
        padding: 1px;
        font-size: x-small;
}

/* A code block - maybe even PHP ;). */
.code
{
        color: #000000;
        background-color: #cccccc;
        border: 1px solid #000000;
        padding: 1px;
        font-family: "courier new", helvetica, "times new roman", serif;
        font-size: x-medium;
        width: 99%;
        margin: 1px auto 1px auto;
        white-space: nowrap;
        overflow: auto;
}

/* The "Quote:" and "Code:" header parts... */
.quoteheader, .codeheader
{
        color: #000000;
        text-decoration: none;
        font-style: normal;
        font-weight: bold;
        font-size: x-small;
}

/* Generally, those [?] icons.  This makes your cursor a help icon. */
.help
{
        cursor: help;
}

/* /me uses this a lot. (emote, try typing /me in a post.) */
.meaction
{
        color: red;
}

/* The main post box - this makes it as wide as possible. */
.editor
{
        width: 96%;
}

/* Highlighted text - such as search results ;). */
.highlight
{
        background-color: yellow;
        font-weight: bold;
        color: black;
}

/* Alternating backgrounds for posts, and several other sections of the forum. */
.windowbg
{
        color: #000000;
        background-color: #c5cbd2;
}
.windowbg2
{
        color: #000000;
        background-color: #cdd3da;
}

/* All the signatures used in the forum.  If your forum users use Mozilla, Opera, or Safari, you might add max-height here ;). */
.signature
{
}

/* These are used primarily for titles, but also for headers (the row that says what everything in the table is.) */
a.titlebg, .titlebg, tr.titlebg td, .titlebg a:link, .titlebg a:visited
{
        color: #ffffff;
        font-style: normal;
        background-color: #404e64;
}
a.titlebg:hover, .titlebg a:hover
{
        color: #dfdfff;
}

/* This is used for categories, page indexes, and several other areas in the forum. */

.catbg, .catbg2
{
        background-color: #60a0c0;
        font-weight: bold;
        font-size: 12px;
        color: #000;
}

.mycat, a.mycat
{
        font-weight: bold;
        font-size: 12px;
        color: #ffffff;
        text-decoration: none;
}

a.mycat:hover
{
        color: #d0d0ff;
        text-decoration: none;
}

/* This is used for tables that have a grid/border background color (such as the topic listing.) */
.bordercolor
{
       border-top: solid 1px #ffffff;
       border-left: solid 1px #f0f0ff;
       border-bottom: solid 1px #202030;
       border-right: solid 1px #606070;
       background-color: #404040;
}

/* This is used on tables that should just have a border around them. */
.tborder
{
       border-top: solid 1px #ffffff;
       border-left: solid 1px #f0f0ff;
       border-bottom: solid 1px #202030;
       border-right: solid 1px #606070;
       background-color: #7e8e9f;
        padding: 2px;
}
/* This is used on tables that should just have a border around them. */
.myborder
{
       background-color: #505060;
}

/* Default font sizes: small (8pt), normal (10pt), and large (14pt). */
.smalltext
{
        font-size: x-small;
        font-family: Tahoma, arial, helvetica, serif;
}
.smalltextwhite
{
        color: #ffffff;
        font-size: x-small;
        font-family: Tahoma, arial, helvetica, serif;
}
.smalltextwhite a:link ,.smalltextwhite a:visited , .smalltextwhite a:active
{
        color: #b0e0ff;
        font-size: x-small;
        font-family: Tahoma, arial, helvetica, serif;
}
/* Posts and personal messages displayed throughout the forum. */
.post, .personalmessage
{
   width: 100%;
   overflow: auto;
   line-height: 1.3em;
}

/* All the signatures used in the forum.  If your forum users use Mozilla, Opera, or Safari, you might add max-height here ;). */
.signature
{
   width: 100%;
   overflow: auto;
   padding-bottom: 3px;
   line-height: 1.3em;
}
/* No image should have a border when linked */
a img{
   border: 0;
}
.smalltextwhite a:hover
{
        color: #ffb0b0;
}
.normaltext
{
        font-size: small;
}
.largetext
{
        font-size: large;
}
Title: Re: Css Temel Terimleri
Post by: SenSa on August 22, 2006, 11:51:59 AM
Arkadaşlar birşey sorcam bu bisim default tema denen şeydeki style.css'de scrollbar kodları yok mu bana mı öyle gelio ?! :( (o kadar style.css'yi kurcaladım zamanında,ama daha şimdi bu konuyu gördüm 10 dklik iş olcaktı arbalot'un sayesinde ;) bi tek scrollbar'ı çözememiştim onuda halledemedim :(

Of ne beceriksiz insanım ben yaaa  :(  :(  :( 

Arkadaşlar bana cewap werecek biri yok mu?
Walla kaçıncı kere yazdım sayısını ben bilmiorum arkadaşlar scrollbar için bi el atsanız? :D
Title: Re: Css Temel Terimleri
Post by: oaslan23 on August 23, 2006, 07:33:57 AM
süper döküman saoll
Title: Re: Css Temel Terimleri
Post by: SeYFo on August 31, 2006, 02:03:16 PM
döküman super olmuş eline saglık

izin verirsenız ve yersiz bulmaz isenız bir sey sormak istiyorum
maintab_first maintab_active_back
titlebg catbg vs bunların rengini degiştirmek istiyorum acaba nasıl veyahut hangi programla yapabilirim

saygılar...
Title: Re: Css Temel Terimleri
Post by: Gang$ta on October 01, 2006, 07:40:38 AM
döküman super olmuş eline saglık

izin verirsenız ve yersiz bulmaz isenız bir sey sormak istiyorum
maintab_first maintab_active_back
titlebg catbg vs bunların rengini degiştirmek istiyorum acaba nasıl veyahut hangi programla yapabilirim

saygılar...

paintle bile yapılabilir ama photoshop öneririm ;)
Title: Re: Css Temel Terimleri
Post by: [DooMsDaY] on October 01, 2006, 02:13:22 PM
Dokumanı çalabilir miyim? merak etme belirtirim arbalot diye : )

???????
Title: Re: Css Temel Terimleri
Post by: badman on October 03, 2006, 09:37:09 AM
Arkadaşlar birşey sorcam bu bisim default tema denen şeydeki style.css'de scrollbar kodları yok mu bana mı öyle gelio ?! :( (o kadar style.css'yi kurcaladım zamanında,ama daha şimdi bu konuyu gördüm 10 dklik iş olcaktı arbalot'un sayesinde ;) bi tek scrollbar'ı çözememiştim onuda halledemedim :(

Of ne beceriksiz insanım ben yaaa  :(  :(  :( 

Arkadaşlar bana cewap werecek biri yok mu?
Walla kaçıncı kere yazdım sayısını ben bilmiorum arkadaşlar scrollbar için bi el atsanız? :D

bende bu sorunla karsılastım
Title: Re: Css Temel Terimleri
Post by: jagatai on December 03, 2006, 06:03:51 PM
Ben temamın Arkasında komple mesela http://www.calshop.biz/screensaver/img/Undersea%20Adventure.jpg (http://www.calshop.biz/screensaver/img/Undersea%20Adventure.jpg) bu resmin gözükmesini istiyorum css nin her yerine yazdım ama olmadı bir el atarmısınız.
Title: Re: Css Temel Terimleri
Post by: dreamshower on December 03, 2006, 07:11:27 PM
Arkadaşlar birşey sorcam bu bisim default tema denen şeydeki style.css'de scrollbar kodları yok mu bana mı öyle gelio ?! :( (o kadar style.css'yi kurcaladım zamanında,ama daha şimdi bu konuyu gördüm 10 dklik iş olcaktı arbalot'un sayesinde ;) bi tek scrollbar'ı çözememiştim onuda halledemedim :(

Of ne beceriksiz insanım ben yaaa  :(  :(  :( 

Arkadaşlar bana cewap werecek biri yok mu?
Walla kaçıncı kere yazdım sayısını ben bilmiorum arkadaşlar scrollbar için bi el atsanız? :D

her yeri aradım ettim ama bulamadım. bi yerde görmüştüm uyguladım ama forumun deil de yönetim panelindeki scroolbar deişmişti sonra sıkıldım bıraktm . bi yardım ederseniz fena olmaz ;D
Title: Re: Css Temel Terimleri
Post by: jagatai on December 04, 2006, 06:48:04 AM
Bence yardım etmişken komple css yi türkçeye çevirin nereyi değiştirirsek ne olur gibisinden ;D
Title: Re: Css Temel Terimleri
Post by: reyes on December 05, 2006, 09:11:28 AM
Quote
/* Navigation links - for the link tree. */
.nav, .nav:link, .nav:visited

/* Tables should show empty cells. */
bu sekildeki bolum başilıklarınında cevirisini ekleseniz super bi konu olur ve temalar hakkında fazla sorulkacak soru kalmaz...
Title: Re: Css Temel Terimleri
Post by: Arbalot on December 05, 2006, 04:43:19 PM
reyes o istediğin yakın bir zamanda gelecek.
onun haricinde başka dökümanlarda gelecek...
Title: Re: Css Temel Terimleri
Post by: reyes on December 07, 2006, 10:02:28 AM
SSI bu konu ve benzer dokumanlar birleştirilip sabitlense daha iyi olmaz mı??
Title: Re: Css Temel Terimleri
Post by: reyes on December 07, 2006, 10:05:40 AM
/* The main body of the entire forum. */
body
{   
   background-image: url(images/left.png);
   margin: 0px;
   padding: 0 0 0 0;
}



Kodlarda repeat yok ama resim butun sayfaya yayıllıyor .Neden acaba??
Title: Re: Css Temel Terimleri
Post by: Elmacik on December 07, 2006, 10:19:34 AM
No repeat yazman lazım; çünkü varsayılan (default) değer reapat-x ve repeat-y 'dir.
Yani repeat girilmezse hem enine hem de boyune repeat (tekrar) eder.
Bunu engellemek için:
background-repeat: no-repeat;
kullanabilirsin.
Title: Re: Css Temel Terimleri
Post by: reyes on December 07, 2006, 10:24:05 AM
Saol...
Title: Re: Css Temel Terimleri
Post by: dreamshower on December 08, 2006, 10:29:42 PM
reyes o istediğin yakın bir zamanda gelecek.
onun haricinde başka dökümanlarda gelecek...

sevindirici haber. teşekkürler ve kolay gelsin
Title: Re: Css Temel Terimleri
Post by: Arbalot on December 10, 2006, 04:24:17 AM
tayfun sırf mesaj yazmak için bişiler arıyorsun değil mi?
soyliyeyim
o posisyon değiştirme kodlarının en başında onu belirleyici bir komut var
text-align: Metnin dikey olarak nasıl hizalanacağını belirler.
onu da
text-align: center ; şeklinde kullanacaksın...
Title: Re: Css Temel Terimleri
Post by: Arbalot on December 10, 2006, 04:36:14 AM
eğer gerçekten bilmiyorsan ve öğrenmek istiyorsan soyliyim
font-style:italic
veya
font-style: normal

yine aynı şekile

font-variant: normal
veya
font-variant: small-caps

şeklinde de kullanabilirsin...


sen bunu center a oyle cevap verdiğim için sordun onu da biliyorum.
bir yerde de haklısın ama bu zamanında bu şekilde hazırlanmış su anda bununla ilgilenecek vaktim yok kusura bakma...
Title: Re: Css Temel Terimleri
Post by: Arbalot on December 10, 2006, 05:14:11 AM
bir takım şeyler sizlere yılbaşı hediyesi olur artık...
Title: Re: Css Temel Terimleri
Post by: devedikeni on December 20, 2006, 12:45:17 PM
arkadaşlar ben arka plana resimkoymak istiyorum fakat background images diye bişey bulamadım. kodu nereye ekleyeceğim.
Title: Re: Css Temel Terimleri
Post by: reyes on December 21, 2006, 12:49:35 PM
en yukarılarda background color vardır.onu background image ye cevir....
Title: Re: Css Temel Terimleri
Post by: suskunduygular on January 28, 2007, 07:09:55 PM
gerçekten iyi döküman ;) Gözlerine sağlık :)
Title: Re: Css Temel Terimleri
Post by: MaNyAkTURKLER on February 05, 2007, 12:30:24 PM
Arkadaşlar Mesela Ben Sayfa Kaydırılırsa Zeminin Sabit Kalmasını İstiyorum Fakat Fixed Kodunu Napmalıyım nEreye Koymalıyım Bilmiyorum Yardım Ederseniz Sevinirim...
Title: Re: Css Temel Terimleri
Post by: madturk41 on July 25, 2008, 10:45:07 AM
Arkadaşlar birşey sormak istiyorum herhangi bir sayda css özelliğini kullanarak şöyle bir uygulama varmı ben size ne demek istediğimi şöyle anlatayim
img alt: title ; gibi o sayfada var olan tüm resimlere css'de sabit olan bir kodu resime otamatik ekletdirebilirmiyiz yani bilmem anlatabildim mi ???
Title: Re: Css Temel Terimleri
Post by: BuЯЯЯЯaK on July 25, 2008, 10:48:07 AM
Tam olarak anlasam yardımcı olacam tam olarak sen yapmak istediğini söyle anlIdan direk yolla.
Title: Re: Css Temel Terimleri
Post by: Hoochie Coochie Man on July 25, 2008, 11:11:19 AM
ekleyeceğin şeye bağlı..
Title: Re: Css Temel Terimleri
Post by: ´cnrdzn on July 25, 2008, 11:45:47 AM
 Integrate Lightbox (http://custom.simplemachines.org/mods/index.php?mod=1158) modikasyonu var resimlere rel="lightbox"  ekliyor onu inceleyerek bişeyler yapabilirsin.
Title: Re: Css Temel Terimleri
Post by: madturk41 on July 25, 2008, 05:52:36 PM
Şimdi bende wp var ve burada yayınladığım haberlerde otamatik olarak konu başlıklarının html olarak "alt" bildiğimiz kodu otamatik olarak css yöntemi ile eklemeyi düşünüyorum yada buna yakın birşey eklenen resimlere border gibi var olan terimlerle şekil verebiliyoruz tamam ama şuana kadar istediğimi veren bi kod görmedim css de html olarak yapıyorum tamam ama her konuya tek tek girmektense otamatik olması daha işime gelecek
var olan kod mesela style.css de
Code: [Select]
.post img { max-width: 98%; }
 img, a img {
padding: 3px;
}
bense şöyle birşey diyorum
Code: [Select]
.post img { max-width: 98%; }
 img, a img {
padding: 3px;
       alt: konu adı ;
}
Açıklayıcı oldumu ???

Şöyle bi ingilizce sayfa buldum ama birşey anlamadım ben :S
Adres (http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_21556880.html)
Title: Re: Css Temel Terimleri
Post by: BuЯЯЯЯaK on July 28, 2008, 10:41:31 AM
Gene anlIk istediğinden bişey anlamadım .

Eğer belirli alt taglarına css mi eklicen ne yapacan tam olarak bi anlat resimle göster =)

IMG[alt~="konuadı"]
{
padding: 3px;
}

~= burası direk eşittirde olabilir ama tam hatırlamıyorum .

Bu kod

<img src="http://www.xxx.com/xxx.gif" alt="konuadı" />

Bu img kodunu etkiler diye biliyorum eğer yanlış anladıysam açıkça tekrar anlatırsan yarım edebilirim .
Title: Re: Css Temel Terimleri
Post by: BuЯЯЯЯaK on July 28, 2008, 11:53:02 AM
Bende eksikliklerini hissettiğim şeyleri eklim bari :)

TABLO ÖZELLİKLERİ

outline : Outline de border in özelliğini taşımakla beraber gerçekte dış çerçeve olarak kullanılır .

Örnek :

Kodlama

.tborder
{
   padding: 1px;
   border: 2px solid red;
        outline: 2px solid yellow;
   background-color: #FFFFFF;
}

Görüntü

(https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fimg380.imageshack.us%2Fimg380%2F5129%2Fasssssoa7.jpg&hash=49173ed787bae892e4b08d9d308c6b66)
Title: Re: Css Temel Terimleri
Post by: BuЯЯЯЯaK on July 29, 2008, 05:50:22 AM
TEXT ÖZELLİKLERİ

first-child : Kullandığınız yerde ilk satıra istediğiniz bi özelliği ekleyebilirsiniz .

Örnek :

Kodlama

.post:first-child
{
font-weight:bold;
font-size:15px;
}

Görüntü

Önceki Hali :  Css dersleri

Önceki Hali :  Css dersleri

Title: Re: Css Temel Terimleri
Post by: BuЯЯЯЯaK on July 29, 2008, 06:09:11 AM
TEXT ÖZELLİKLERİ

:after , :before

Bildiğiniz gibi after öncesine before ise sonrasını temsiz ediyor .

Biz bu kodlarla Yazımızın öncesine veya sonrasına istediğimiz birşeyi ekleyebiliyoruz .

Aynı post kodumuzla bi örnek hazırlayak .

.post:before
{
content: "Konu Basladi:) ";
}
.post:after
{
content: "Konu Bitti:( ";
}


Görüntü

Konu içeriği : Bir mumdur iki mumdur :)

Kodumuzu uyguladıktan sonra : Konu Basladi:) Bir mumdur iki mumdur :) Konu Bitti:(



Sanırım bu yolla müzikte ekliyebiliyorduk ama bu konuda tam emin değilim ek bişey varmıydı hatırlamıyorum .


@media aural {
.post:after
{
content: url("muzik.wav");
}
}

Gibi bişey sanırım
Title: Re: Css Temel Terimleri
Post by: BuЯЯЯЯaK on July 30, 2008, 04:12:25 PM
Şimdide css de istediğimiz bi kodu duzenlemeyi anlatak :)

Örneğin arama kodlarındaki butonun arkasına resim koyacaz ama bakıyoruzki ordaki içeriği gireceğimiz yerin kodlarıda input arama bölümündeki buton da input için de :)

O zaman bizim bu arama bölümündeki input u css ye göstermemiz lazım .

O bölümün kodlarına bakalım .

<input type="submit" name="submit" value="', $txt[182], '" style="width: 11ex;" />

Orda type name bide value var value sabit değil onu geçtik name veya type den birisini kullanabiliriz.

Aşağıda benim yaptığım bi kodlama varonu incelerseniz dahada iyi anlayacaksınız .

input[type="submit"]
{
   width:70px;
   height:30px;
   color:#efefef;
        cursor:pointer;
   font-weight:bold;
   padding:2px 2px;
   background:transparent url(images/butonbg.gif) no-repeat left top;
   border:0px;

}
input[type="submit"]:hover
{
   background-position:left bottom;
}

Ben resmi çif yönlü yapmıştım o yüzden hover var siz isterseniz eklemezsiniz.

input[type="submit"] isterseniz type="submit" bu kodu sadece type olarak değiştirebilirsiniz bu yollada bütün inputun içinde type olan kodlara bu css yi uygulamış olabilirsiniz .

Eğer bi tema yazarı ise kısa yoldan bu yol ile temalarınızın butonlarına resim ekleyebilirsiniz :)

 
Title: Re: Css Temel Terimleri
Post by: Gogen on July 31, 2008, 07:28:39 AM


:after , :before

Bildiğiniz gibi after öncesine before ise sonrasını temsiz ediyor .



after : sonra      before: önce olmasın  :-\
Title: Re: Css Temel Terimleri
Post by: BuЯЯЯЯaK on July 31, 2008, 07:41:37 AM
Gördüğün gibi kodlamayı yaparken sorun yok yanlışlıkla yazıldığı belli dimi ???
Title: Re: Css Temel Terimleri
Post by: Gogen on July 31, 2008, 03:48:15 PM
Evet belli. Bunu söylemek için yazdım zaten.
Title: Re: Css Temel Terimleri
Post by: Two Face on September 07, 2008, 03:14:36 AM
repeat: Resmin bütün zemine yayılmasını sağlar.

Kodu asagidaki gibi uyguLadim ama arkapLan tamamen kayboLdu acaba bu konuda yardimci oLabiLirmisiniz?


Code: [Select]
/* The main body of the entire forum. */
body
{
background-color: #0000;
margin: 0px;
padding: 12px 320px 4px 30px;
background-image: url(images/arka.jpg) repeat;
}
Title: Re: Css Temel Terimleri
Post by: ´cnrdzn on September 07, 2008, 03:42:21 AM
soldan sağa doğru tekrarlamasını istiyorsan
background: url(images/arka.jpg) repeat-x;
yukarıdan aşağıya doğru tekrarlamasını istiyorsan
background: url(images/arka.jpg) repeat-y;
şeklinde kullan



Title: Re: Css Temel Terimleri
Post by: Two Face on September 07, 2008, 07:57:00 AM
Resmin asagi dogru indigim zaman gene ayni konumda oLmasini istiyorum ama benim shu anki uyguLamama göre forumda asagi dogru inince koskoca bir bosLuk var..
Resim soL tarafta ve asagi indigim zaman gene ayni konumda durmasini istiyorum..

Bunu nasiL düzeLtebiLirim.. Yardimci oLursaniz sevinirim..
Title: Re: Css Temel Terimleri
Post by: ´cnrdzn on September 07, 2008, 01:07:57 PM
background: url(images/arka.jpg) repeat-x;
background-attachment:fixed;

şeklinde kullan o zaman background'un x konumunda tekrarlanacak ve  sayfa aşağı - yukarı doğru kaldığında pozisyonu sabit olacak yada istersen background: #renkkodun url(images/arka.jpg) repeat-x; şeklinde ekle kullan #renkkodun'u resme göre ayarla
Title: Re: Css Temel Terimleri
Post by: Two Face on September 09, 2008, 07:33:11 AM
background: url(images/arka.jpg) repeat-x;
background-attachment:fixed;

şeklinde kullan o zaman background'un x konumunda tekrarlanacak ve  sayfa aşağı - yukarı doğru kaldığında pozisyonu sabit olacak yada istersen background: #renkkodun url(images/arka.jpg) repeat-x; şeklinde ekle kullan #renkkodun'u resme göre ayarla

Cok tesekkürLer.. tam istedigim gibi oLdu..
Title: Re: Css Temel Terimleri
Post by: PureLove™ on November 09, 2008, 02:26:37 PM
merhaba,
seçim kutularının rengini hangi kodla ayarlayabilirim?
(https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fimg377.imageshack.us%2Fimg377%2F2501%2Fyenibitmapresmicg1.png&hash=f08607e06f7a13b6913dec0efe9672e7) (http://imageshack.us)
(https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fimg377.imageshack.us%2Fimg377%2Fyenibitmapresmicg1.png%2F1%2Fw309.png&hash=61b2b35316027749be1de6cf02dec690) (http://g.imageshack.us/img377/yenibitmapresmicg1.png/1/)
Title: Re: Css Temel Terimleri
Post by: Evo™ on November 10, 2008, 10:38:13 AM
İxlam şöyle yapabilirsin. Deneme amaçlı ben sadece bölümlerin adını kırmızı yaptım.
style.css ye aşağıdakine benzer kafana göre bir isim belirle mesela ben jump demiştim.
Code: [Select]
.jump
{
color: red;
}
Daha sonra display.template.php'ni aç gösterdiğin yer orasıysa veya başka bir yerse aynısını onlarada uygularsın.
Code: (Bul) [Select]
<select name="jumpto" id="jumpto" onchange="if (this.selectedIndex > 0 &amp;&amp; this.options[this.selectedIndex].value) window.location.href = smf_scripturl + this.options[this.selectedIndex].value.substr(smf_scripturl.indexOf('?') == -1 || this.options[this.selectedIndex].value.substr(0, 1) != '?' ? 0 : 1);">
Code: (Değiştir) [Select]
<select class="jump" name="jumpto" id="jumpto" onchange="if (this.selectedIndex > 0 &amp;&amp; this.options[this.selectedIndex].value) window.location.href = smf_scripturl + this.options[this.selectedIndex].value.substr(smf_scripturl.indexOf('?') == -1 || this.options[this.selectedIndex].value.substr(0, 1) != '?' ? 0 : 1);">
Görüntüsü aşağıdaki gibi olacaktır.
Title: Re: Css Temel Terimleri
Post by: PureLove™ on November 10, 2008, 10:40:45 AM
bunu boş bir zamanımda deneyeyim ancak yazı rengini değil arkaplanını transparent yapmak istiyorum. (şimdi sınava gitmek zorundayım ne kadar çalışkanım görüyorsunuz :))
Title: Re: Css Temel Terimleri
Post by: Evo™ on November 10, 2008, 10:44:57 AM
Aşağıdaki kod yeterli olurmu bilmiyorum ama denersin. Ayrıca başarılar :)
Code: [Select]
.jump
{
    background: transparent;
}
Title: Re: Css Temel Terimleri
Post by: PureLove™ on November 11, 2008, 05:11:03 PM
2.0 kullandığımı yazmayı yine unutmuşum malesef. artık imzama eklesem iyi olacak 2.0 kullanıyorum diye :D bu kodlar yok bulamadım. Evalution tavsiyelerini tekrar bekliyorum
teşekkürler
Title: Re: Css Temel Terimleri
Post by: jimraynor on March 04, 2009, 06:47:14 AM
Css validatoru tavsiye ediyor musunz peki
Title: Re: Css Temel Terimleri
Post by: Paragaya on March 04, 2009, 01:14:10 PM
Bu Temadaki (http://custom.simplemachines.org/themes/index.php?lemma=107) çerveve nasıl yapabiliriz ?
Title: Re: Css Temel Terimleri
Post by: «['BrKDmRcN']» on March 04, 2009, 01:36:28 PM
B4en çerçeve göremedim
http://smf.smfthemes.org/Themes/Aa_New_Damage/images/main_bg.gif
bunu koymuş sonra ust alt orta yapmış çerçeve gibi görünmüş xD
Title: Re: Css Temel Terimleri
Post by: _ImmorTaL_ on August 01, 2010, 11:43:32 AM
Teşekkürler
Title: Re: Css Temel Terimleri
Post by: korsanTURK on October 27, 2010, 06:34:31 PM
teşekkürler