CSS ile resim ortalamak
Merhaba arkadaşlar,
Ben bir almanca öğretmeni olsam da kendimi web teknolojileri öğrenmekten ve öğrendiklerimi paylaşmaktan alamıyorum.Bu derste size CSS ile bir resmi web sayfamızın her hangi bir yerine nasıl uyarlayabiliriz onu anlatmaya çalışıcam.
Önce sayfamızıda bir tane div açıyoruz ve ID’sini wrapper yapıyoruz.Sonra CSS sayfamızın içine
div#wrapper {background:#fff url(../images/smiley.gif)right center no-repeat;
CSS kodunu yazıyoruz.Bu yazdığımız kodla resme en sağın ortasında dur ve kendini tekrar etme dedik, ayrıca div’imizin arka zemin rengini de fff ile beyaz olarak belirledik.
Resme verebileceğimiz diğer CSS komutları ve açıklamaları aşağıdadır. right center komutunu aşağıdakilerle değiştirerek diğer stilleri test edebilirsiniz.Okuduğunuz için ve yorum yaptığınız için şimdiden teşekkür ederim.
|
Diğer stiller
|
Görevi
|
|
left top
|
Resmi sol üst köşeye uyarlar
|
|
left center
|
Resmi sol kenar ortaya uyarlar
|
|
left bottom
|
Resmi sol dip köşeye uyarlar
|
|
right top
|
Resmi sağ üst köşeye uyarlar
|
|
right center
|
Resmi sağ kenar ortaya yaslar
|
|
right bottom
|
Resmi sağ dip köşeye uyarlar
|
|
center top
|
Resmi üst orta kenara uyarlar
|
|
center center
|
Resmi elementin ortasına uyarlar
|
|
center bottom
|
Resmi dip orta kenara uyarlar
|
|
50% 50%
|
Resmi sağdan –yukardan yarı yarıya ortalar ,center center gibi sonuç verir.
|
|
25% 75%
|
Resmi soldan %25 yukardan %75 uzaklaştırır.
|
|
10px 200px
|
Resmi soldan 10px yukardan 200px uzaklaştırır
|
|
50px 50px
|
Resmi soldan ve yukardan 50’şer px uzaklaştırır.
|
Bir cevap yazın