Ana Sayfa

Blackinci » CSS » Margin Özellikleri Ve Css3 Margin Yenilikleri
Üye Paneli

Kayıt Ol Şifremi Unuttum?


Give Me Everything

CSS Hayat İşte Genel Photoshop MyBB Temalar Özgür Yazım

«    May 2012    »
PtSaÇrPrCuCtPz
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 


blackinci.com da bir forum sayfası olsun mu?
Evet Olsun
Hayır Olmasın
Kararsızım
Fikrim yok

admin paneli, ajax, background, css, CSS3, dle, F1, form, forum, giris paneli, gölge, gölgeli yazı, highslide, iphone, md, mybb, mybbdestek, novaboard, oval, Seri 5, seri2, tasarim, tema, transform, vbulletin, Yarış, özellik

Eylül 2010 (4)
Ağustos 2010 (1)
Haziran 2010 (1)
Mart 2010 (4)
Şubat 2010 (2)
Ocak 2010 (1)
Makale Detayları
blackinci
18 Nisan 2008
CSS
Yazdır
5812 Kez Okunmuş
15 Yorum Yapılmış
 (Oy Sayısı: 22)


Benzer Konular

Margin Özellikleri Ve Css3 Margin Yenilikleri
Margin Özellikleri Ve Css3 Margin Yenilikleri

Margin padding koduna benzetilir benzedikleri doğrudur ama işlevsel olarak birbirlerinden farklıdır "padding" eksi (-) değer alamazken margin eksi (-) değer alabilir ve padding kodu gibi itme kodu değildir boşlukları hesaplayıp hizalama yapabilir tabi bizim verdiğimiz değerde boşluk bırakabilir margin padding kodunun aksine kutunun yada bir elementin içinden değil dışından hesap yapar. Örneklerle margin kodunu nasıl işlediğini görelim
css 2.1 de bir elemente, kutuya veya sayfanın kendisinin 4 kısmına değer verebiliyoruz bunlar
margin-top
margin-right
margin-bottom
margin-left
sayısal değerlerlerin yanı sıra elementi, kutuyu veya sayfayı ortalamak için auto kullanılabilir Örnek Ön İzleme

margin-top bir elemente, kutuya yada sayfanın kendisine üstten boşluk verebiliriz yada eksi (-) değer verebiliriz Örnek Ön İzleme
Aynı şekilde diğer kısımlara boşluk verebilir yada hizalayabiliriz tek tek kullanmak yerine kısaltma kullanabiliriz örnek kullanım
p {margin: 2cm 4cm 1cm 3cm}

Örnek Ön İzleme
Veya Her yön için aynı değerde boşluk verebiliriz örnek kullanım
p {margin: 2cm;}

Css 3 Margin Yenilikleri


Css 2.1 de sadece dört yöne değer verebilirken artık css 3 te bu sayı 16 ya çıktı şuan hiç bir tarayıcı desteklemesede css3 ü yakından takip etmeye devam ediyoruz her tarayıcının kat etmesi gereken daha çok yol var. Bu etki yönleri için bir resim çizdim Anlamamızı daha kolaylaştırması için
Margin Özellikleri Ve Css3 Margin Yenilikleri

Üstteki resimdeki çizginin bir element, kutu yada sayfa olduğunu düşün noktalı alanlar ise bizim ayrı ayrı değer verebileceğimiz alanlar css3 gerçektende çok güzel bir şekilde ilerliyor. Resimde görülüldüğü gibi köşelere değer verebiliyoruz yönlerin isimleri ise şu şekilde
top-left-corner => Üst Sol Köşe
top-left => Üst Sol
top-center => Üst Orta
top-right => Üst Sağ
top-right-corner => Üst Sağ Köşe

left-top => Sol Üst
left-middle => Sol Orta
left-bottom => Sol Alt

right-top => Sağ Üst
right-middle => Sağ Orta
right-bottom => Sağ Alt

bottom-left-corner =>Alt Sol Köşe
bottom-left => Alt Sol
bottom-center => Alt orta
bottom-right => Alt Sağ
bottom-right-corner => Alt Sağ Köşe

Sanırım css3 için daha çok beklicez ama yeri geldikce css3 ten bahsetmeye çalışıcam keşke uygulamalı olarakta görebileceğimiz bir tarayıcı olsaydı
19 May 2008 15:36 5emrebursali_2 demiş ki:
maalesef bozdu siteyi
18 May 2008 15:24 4blackinci demiş ki:
.indentmenu{
font: bold 13px Arial;
width: 85%; /*leave this value as is in most cases*/
margin: 0 auto;
}

.indentmenu ul{
margin: 0;
padding: 0;
float: left;
border: 1px solid #564c66; /*dark purple border*/
border-width: 1px 0;
background: black url(images/indentbg.gif) center center repeat-x;
list-style-type:none;
}

.indentmenu ul li{
float: left;
}

.indentmenu ul li a{
float: left;
color: white; /*text color*/
padding: 5px 11px;
text-decoration: none;
border-right: 1px solid #564c66; /*dark purple divider between menu items*/
}

.indentmenu ul li a:visited{
color: white;
}

.indentmenu ul li a:hover, .indentmenu ul li .current{
color: white !important; /*text color of selected and active item*/
padding-top: 3px; /*shift text down 1px for selected and active item*/
padding-bottom: 3px; /*shift text down 1px for selected and active item*/
background: black url(images/indentbg2.gif) center center repeat-x;
}

uzunluğu 100% verdiğin için zaten sağa ve sola yaslamış oluyorsun üstteki kodlar işini görür
18 May 2008 13:27 3emrebursali_2 demiş ki:
o zaman kodları vereyim sana blackinci


<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*Paylaşım: MyBBDestek.Com (Batur) */

.indentmenu{
font: bold 13px Arial;
width: 100%; /*leave this value as is in most cases*/
}

.indentmenu ul{
margin: 0;
padding: 0;
float: left;
width: 100%; /*width of menu*/
border: 1px solid #564c66; /*dark purple border*/
border-width: 1px 0;
background: black url(images/indentbg.gif) center center repeat-x;
}

.indentmenu ul li{
display: inline;
}

.indentmenu ul li a{
float: left;
color: white; /*text color*/
padding: 3px 31.9px;
text-decoration: none;
border-right: 1px solid #564c66; /*dark purple divider between menu items*/
}

.indentmenu ul li a:visited{
color: white;
}

.indentmenu ul li a:hover, .indentmenu ul li .current{
color: white !important; /*text color of selected and active item*/
padding-top: 3px; /*shift text down 1px for selected and active item*/
padding-bottom: 3px; /*shift text down 1px for selected and active item*/
background: black url(images/indentbg2.gif) center center repeat-x;
}

</style>







işte bunu css ye eklıyorum mybb de buton yapacam ama saola dayalı ortalı olması lazım
18 May 2008 00:30 2blackinci demiş ki:
kodları görmem lazım margin ile ortalamak için auto kullanabilirisin
17 May 2008 18:43 1emrebursali_2 demiş ki:
slm blackinci ben bu css butonları tam olarak ortalamak istiyorum nasıl yapacağım aynı html deki gibi center yazınca ortalanıyor ya öyle ama css de olmuyor bir türlü yapamadım umarım yardımcı olursun şimdiden tşkler
◄ Geri 1 2 İleri ►

Sessiz Kalma Sende Yorum Yap

Son Yapılan 10 Yorum
  • Konu
  • Yazar
  • Yorum
  • CSS3 Kutu Elementlerine Gölge Verme Box ...
  • demiş ki 
  • çok sağol üstad çok güzel anlatım olmuş. :)
  • Blackinci Seri 5 MyBB teması
  • blackinci demiş ki 
  • tamer,
    Resim görebilirsem daha yardımcı olurum
  • Blackinci Seri 5 MyBB teması
  • tamer demiş ki 
  • hocam temanın çok başarılı fakat saol taraf boşlukda sosyal medya yazısı çıkıyor bunu nasıl kaldırabilirim
  • Css ile Aktif Menü Buton Yapımı
  • blackinci demiş ki 
  • Webmaster,
    Ben daha önce bir defa mybb için ücretli tema hazırladım ama hiç satmadan tekrar ücretsiz olarak dağıttım şuan için soruyorsanız mybb yi bıraktım... başka bir forum sistmei ile ilgileniyorum.
    Kendiniz bir fiyat biçmek adına bilgi edinmek için soruyorsanız bu yaptığınız grafiklere, yazdığınız kodlara ve harcadığınız emeğe göre değişir ama şuan için ücretli tema yapmanızı tavsye etmem zira mybb nin vbulletin gibi ücretli olacağı dedikoduları dolaşıyor eğer bu gerçekleşirse işte ozaman güzel olur ve ücretli temaların önü açılmış olur ozaman daha rahat ve güvenilir tema hazırlayıp satabilirsiniz iyi günler.
  • Css ile Aktif Menü Buton Yapımı
  • Webmaster demiş ki 
  • Merhabalar
    Blackinci MyBB temalarını ücretli olursa ne kadar ücrete hazırlıyorsunuz? Buradan belirtirseniz sevinirim
    İyi günler
  • Css ile Aktif Menü Buton Yapımı
  • blackinci demiş ki 
  • Kadir Kaya,
    Bedava forum sistemi sunun sitelerin sistemi nasıl işliyor bilemiyorum ama gözükmemesi normaldir bu tür siteler çok kısıtlı çalışırlar.
  • Css Balon Büyüyen Menü
  • demiş ki 
  • Facebook un tasarımı senin sitenin tasarımının yanında halt yemiş hatta dünyanın bütün siteleri halt yemiş smile
  • Css ile Aktif Menü Buton Yapımı
  • demiş ki 
  • Usta emeğine sağlık ama tr.gg sitelerinde ve jindo.com sitelerinde çalışmıyor hatta hiç gözükmüyor niye anlayamadım.
  • Blackinci vBulletin Teması Seri 1
  • demiş ki 
  • Saol Güzel :)

Yukarı İletişim RSS Takip İstatistikler Site İçeriği

Copyright © 2007 - 2011 DLE Blackinci Edition Seri 2