• Welcome to Simple Machines Community Forum. Please login or sign up.
November 28, 2021, 12:27:14 PM

News:

Join the Facebook Fan Page.


Css Temel Terimleri

Started by Arbalot, June 12, 2006, 03:18:16 AM

Previous topic - Next topic

BuЯЯЯЯaK

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


BuЯЯЯЯaK

July 29, 2008, 06:09:11 AM #61 Last Edit: July 29, 2008, 06:11:47 AM by [Burak]
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

BuЯЯЯЯaK

Ş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 :)


Gogen

Quote from: [Burak] on July 29, 2008, 06:09:11 AM


:after , :before

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



after : sonra      before: önce olmasın  :-\

BuЯЯЯЯaK

Gördüğün gibi kodlamayı yaparken sorun yok yanlışlıkla yazıldığı belli dimi ???

Gogen

Evet belli. Bunu söylemek için yazdım zaten.

Two Face

September 07, 2008, 03:14:36 AM #66 Last Edit: September 07, 2008, 03:23:40 AM by Two Face
repeat: Resmin bütün zemine yayılmasını sağlar.

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


/* 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;
}

´cnrdzn

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




Two Face

September 07, 2008, 07:57:00 AM #68 Last Edit: September 07, 2008, 07:58:55 AM by Two Face
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..

´cnrdzn

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

Two Face

Quote from: c1n4R 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

Cok tesekkürLer.. tam istedigim gibi oLdu..

PureLove™

merhaba,
seçim kutularının rengini hangi kodla ayarlayabilirim?

- -

Herkesi İnsan Hakları Konusunda Düşünmeye Çağırıyoruz...
Hayat, İclal Aydın ile güzeldir.
www.iclalaydinfan.com

Evo™

İ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.

.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.

PureLove™

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 :))
- -

Herkesi İnsan Hakları Konusunda Düşünmeye Çağırıyoruz...
Hayat, İclal Aydın ile güzeldir.
www.iclalaydinfan.com

Evo™

Aşağıdaki kod yeterli olurmu bilmiyorum ama denersin. Ayrıca başarılar :)
.jump
{
    background: transparent;
}

PureLove™

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
- -

Herkesi İnsan Hakları Konusunda Düşünmeye Çağırıyoruz...
Hayat, İclal Aydın ile güzeldir.
www.iclalaydinfan.com

jimraynor

Css validatoru tavsiye ediyor musunz peki
hxxp:www.futboltahminleri.net [nonactive]
hxxp:www.forumfutbol.com [nonactive]
hxxp:www.footballpictures.net [nonactive]

Paragaya

Bu Temadaki çerveve nasıl yapabiliriz ?
Geri Döndüm :D...... :)

Tp.Net Turkish Moderator... ;)

«['BrKDmRcN']»

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

_ImmorTaL_


Advertisement: