CSS Position Kullanımı

Samhain · 7 Şubat 2022

Selamlar herkese bir login panel yaptım. CSS ile de bir resim ekledim ve konumlandırdım. Arkaplanda bir resim var eklediğim resmi CSS position ile içine yerleştirdim. Fakat Farklı çözünürlükte bir monitörde açtığımda yeri farklı çıkıyor. Neden olabilir?


.item{
height: 500px;
width:500px;
position:relative;
left:5%;   -------5px olarak da denedim aynı
top:40%; -------40px
background-repeat: no-repeat;
background-size: cover;
}

Arkaplan aşağıda gördüğünüz gibi. Resmi dizüstü bilgisayarımda düzenlediğim zaman içinde monitöre geçtiğim zaman taşıyor. Sebebini biliyorum çözünürlükten farklı olduğu için değişkenlik gösteriyor. Her monitörde sabit kalacak şekilde bir kod var mı yoksa resmi photoshop ile arkaplana mı ekleyeyim?

afrika örgüsü · 7 Şubat 2022

Çünkü px boyutlandırma yapıyorsun, ekrana sığdırma yapman gerekiyor.

height: 100%;
width: 100%;
background-position: center;

MyriadL · 7 Şubat 2022

Web sitesi tasarlarken piksel ile değil yüzde ile konumlandırma yapmak daha mantıklı. Önceden pikselle yapmış olduğum site benim ekranım dışında herkeste kötü gözüküyor böyle durumla karşılaşmamak için %li birimler kullanmanızı tavsiye ederim.

Samhain · 7 Şubat 2022

afrika örgüsü dedi:
Çünkü px boyutlandırma yapıyorsun, ekrana sığdırma yapman gerekiyor.
height: 100%; width: 100%; background-position: center;

Bu kod kısmen işime yaradı diyebilirim. Top ve left satırındaki yüzdelerle ince ayar yapmaya devam ediyorum. Konumu öncekine göre çok az fark ediyor. Bir tablo yapıp içine gömersem belki sabit yapabilirim. Emin değilim. Yardım için teşeşkkürler.

afrika örgüsü · 7 Şubat 2022

Samhain dedi:
Bu kod kısmen işime yaradı diyebilirim. Top ve left satırındaki yüzdelerle ince ayar yapmaya devam ediyorum. Konumu öncekine göre çok az fark ediyor. Bir tablo yapıp içine gömersem belki sabit yapabilirim. Emin değilim. Yardım için teşeşkkürler.

Top ve left sileceksin

Procon1337 · 7 Şubat 2022

Arkaplan statik bir resimken o resme göre konumlandırmak çok zor olacaktır, arka plan resmine göre login panel konumlandırmak yerine daha genel bir arkaplana geçmek daha mantıklı şuanda.

Samhain · 7 Şubat 2022

Procon1337 dedi:
Arkaplan statik bir resimken o resme göre konumlandırmak çok zor olacaktır, arka plan resmine göre login panel konumlandırmak yerine daha genel bir arkaplana geçmek daha mantıklı şuanda.

Sanırım öyle yağacağım yada koyacağım resim yani logoyu photshop ile arkaplanla birleştireceğim biraz kalite de kayıp olabilir belki ama bana da sonradan mantıklı gelmedi iki resmi oturtmaya çalışmak.

Procon1337 · 7 Şubat 2022

Samhain dedi:
Sanırım öyle yağacağım yada koyacağım resim yani logoyu photshop ile arkaplanla birleştireceğim biraz kalite de kayıp olabilir belki ama bana da sonradan mantıklı gelmedi iki resmi oturtmaya çalışmak.

Olayın içine çok fazla değişken giriyor, en basitinden ekran en boy oranı değişmesi bile hizayı bozar, ona ayrı çözüm, aynı oranda farklı çözünürlük için ayrı çözüm, CTRL (+) + ile yapılan yakınlaştırma için ayrı çözüm, pencere modu için ayrı çözüm derken liste çok uzar.

İyi çalışmalar.

Gunesibrahim · 19 Şubat 2022

CSS 3 ile gelen yenilikleri takipte kalın, bu tür boyutlandırmalar için px değeri değil de em, rem gibi değerler kullanın. Bu değerlerin farkı şudur; herhangi bir yazıya 13px font-size verirseniz o yazı 13Px'te kalır fakat 13 rem verirseniz pencere ne kadar büyürse yazı da o kadar büyür dinamik bir hal alır.

Samhain · 21 Şubat 2022

Gunesibrahim dedi:
CSS 3 ile gelen yenilikleri takipte kalın, bu tür boyutlandırmalar için px değeri değil de em, rem gibi değerler kullanın. Bu değerlerin farkı şudur; herhangi bir yazıya 13px font-size verirseniz o yazı 13Px'te kalır fakat 13 rem verirseniz pencere ne kadar büyürse yazı da o kadar büyür dinamik bir hal alır.

E çok iyiyimiş. Güncel kalmakta fayda var. Teşekkürler

CSS Position Kullanımı

Ayrıntılı düzenleme

Samhain

Hectopat

afrika örgüsü

Hectopat

MyriadL

Hectopat

Samhain

Hectopat

afrika örgüsü

Hectopat

Procon1337

Gigapat

Samhain

Hectopat

Procon1337

Gigapat

Gunesibrahim

Kilopat

Samhain

Hectopat

Benzer konular

Technopat Haberler

Yeni konular

Yeni mesajlar

Gizliliğinize önem veriyoruz