Blackinci » CSS » Margin Özellikleri Ve Css3 Margin Yenilikleri

(Oy Verenler: 15)

Margin Özellikleri Ve Css3 Margin Yenilikleri

436 Kere Okunmuş

CSS blackinci 18 Nisan 2008 Haberi Yazdır

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

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

Bu Konuda 8 Yorum Yapılmış
Bu Konuda 8 Yorum Yapılmış

	emrebursali_2	17 May 2008 18:43 Alıntı Yap #1
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

	blackinci	18 May 2008 00:30 Alıntı Yap #2
kodları görmem lazım margin ile ortalamak için auto kullanabilirisin

	emrebursali_2	18 May 2008 13:27 Alıntı Yap #3
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

	blackinci	18 May 2008 15:24 Alıntı Yap #4
.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

	emrebursali_2	19 May 2008 15:36 Alıntı Yap #5
maalesef bozdu siteyi

	blackinci	19 May 2008 15:39 Alıntı Yap #6
Devam Eden Kodlarıda ona göre yazman lazım yada düzeltmen

	Burak	11 Haziran 2008 23:15 Alıntı Yap #7
Merhaba ben resim lere link verdim ve bu resimlerin sayfa ilk açıldığında -10px olmasını üstüne geldiğimizde ise resmin tamamının çıkmasını istiyorum ama güzel bi kaynak bulamadım yardımcı olabilirmisiniz

	blackinci	12 Haziran 2008 20:33 Alıntı Yap #8
bunu iki şekilde yapabilirsiniz 1 js 2 css JavaScript ile alttaki şekilde yapabilirsiniz <img src="bir.png" border="0" onMouseOver="this.src='iki.png';" onMouseOut="this.src='bir.png';"> CSS ile alttaki bağlantılardan faydalanabilirsiniz http://www.blackinci.com/css/33-css-ile-yatay-menu-yapimi.html http://www.blackinci.com/css/14-css-ile-aktif-menu-buton-yapimi.html http://www.blackinci.com/css/25-balon-buyuyen-menu.html