İmg istenilen yerde durmuyor

Fatihts09 · 10 Ekim 2024

Pence yarı boyutundayken böyle ama tam ekrana alınca resim sağa kayıyor ve ben hep soldaki gibi sola hizalı kalsın istiyorum.

Kodu böyle.

BigDesigner · 14 Ekim 2024

Özellikle translate özelliği doğru şekilde tanımlanmalı ve diğer bazı küçük düzeltmeler yapılabilir. İşte düzenlenmiş hal:

CSS:

body {
    background-color: #131314;
}

header {
    background-color: #1e1f20;
    padding: 20px;
    text-align: center;
}

#baslik {
    width: 350px;
    padding-right: 9%;
    transform: translateX(-70%);
    margin: -50px;
}

translate özelliğini transform: translateX(-70%); olarak düzelttim. translate tek başına kullanılamaz, transform özelliği ile birlikte kullanılır.

##

CSS kodunun sola yaslı kalması için #baslik seçicisine float: left; veya text-align: left; ekleyebiliriz. Ayrıca, transform özelliği ile sola yaslamayı istediğiniz için bu özelliği kaldırabiliriz. İşte sola yaslı olacak şekilde düzenlenmiş hali:

CSS:

body {
    background-color: #131314; /* Sayfanın arka plan rengini koyu gri olarak ayarlar */
}

header {
    background-color: #1e1f20; /* Başlığın arka plan rengini koyu kırmızıya yakın bir renkte ayarlar */
    padding: 20px;            /* Başlığın etrafına 20 piksel boşluk ekler */
    text-align: left;         /* Başlık içeriğini sola hizalar */
}

#baslik {
    width: 350px;             /* Başlık kutusunun genişliğini 350 piksel olarak ayarlar */
    padding-right: 9%;        /* Başlık kutusunun sağ tarafına %9 oranında iç boşluk ekler */
    margin: -50px;            /* Başlık kutusuna -50 piksel genel boşluk ekler, yani yukarı ve sola doğru 50 piksel kaydırır */
    float: left;              /* Başlık kutusunu sayfanın soluna yaslar */
}

Artık #baslik her zaman sola yaslı şekilde duracaktır.

İmg istenilen yerde durmuyor

Ayrıntılı düzenleme

Fatihts09

Decapat

BigDesigner

Centipat

Benzer konular

Technopat Haberler

Yeni konular

Yeni mesajlar

Gizliliğinize önem veriyoruz