Neyi Atlıyorum Acaba? Alttaki Div'in Alanı Yukarıda Görünüyor

28-09-2020, 11:14:05

Altta olan bülten bloğunun arkaplanı yukarıda kalıyor, bültenin kendisi olması gereken yerde. Bu arkaplan neden yukarıda görünüyor acaba? Görsel: https://prnt.sc/up4i60 Yani kedi-cinsleri-sol ve kedi-cinsleri-sag class'larını olduğu divlerin altında olması gerekiyor, şurada: https://prnt.sc/up4jlk

Sorunlu sayfa: https://miyavliyo.com/kedi-cinsleri/

28-09-2020, 11:20:50

#2

spely_co

Aşağıdaki sınıfda float vermişsin. Ondan dolayı bu sorunu yaşıyorsunuz. Float yerine grid yapısını kullanmanızı tavsiye ederim.

.kedi-cinsleri-sag{
width: 81%;
//float: right;
}

28-09-2020, 11:22:21

#3

spely_co

Bigchefstarys adlı üyeden alıntı: mesajı görüntüle

Aşağıdaki sınıfda float vermişsin. Ondan dolayı bu sorunu yaşıyorsunuz. Float yerine grid yapısını kullanmanızı tavsiye ederim.

.kedi-cinsleri-sag{
width: 81%;
//float: right;
}

Gerçi sen orada niye float kullandın oda ayrı bir olay grid'e de gerek yokmuş float görünce ben grid yapmaya çalıştığını zannettim.

Sorun float

28-09-2020, 11:35:09

#4

SkyGhostAir

Bigchefstarys adlı üyeden alıntı: mesajı görüntüle

Gerçi sen orada niye float kullandın oda ayrı bir olay grid'e de gerek yokmuş float görünce ben grid yapmaya çalıştığını zannettim.

Sorun float

Kaldırınca şu hale geliyor: https://prnt.sc/up4yj0 Öncesinde bende vermemiştim ancak kaymalar vardı, onları düzlettim bu sefer bu şekilde oldu. Şimdi de kaldıramıyorum görseldeki gibi oluyor.

Durum tam olarak bu;

28-09-2020, 11:51:54

#5

spely_co

SkyGhostAir adlı üyeden alıntı: mesajı görüntüle

Kaldırınca şu hale geliyor: https://prnt.sc/up4yj0 Öncesinde bende vermemiştim ancak kaymalar vardı, onları düzlettim bu sefer bu şekilde oldu. Şimdi de kaldıramıyorum görseldeki gibi oluyor.

Durum tam olarak bu;

Detaylı baktım Sorun şu şekilde

.kedi-cinsleri-sol ve .kedi-cinsleri-sag daki floatları iptal et.
.kedi-cinsleri-sol ve .kedi-cinsleri-sag diğe belirttiğin iki HTML etiketini bir divin içine al ve o dive display flex tanımla, çok sağlıksız bir yapı olsada seni kurtaracaktır. Fakat mobilde ciddi zararlarını göreceksin.

<div style="display:flex">
 <div class="kedi-cinsleri-sol"></div>
 <div class="kedi-cinsleri-sag"></div>
</div>

28-09-2020, 12:30:01

#6

SkyGhostAir

Bigchefstarys adlı üyeden alıntı: mesajı görüntüle

Gerçi sen orada niye float kullandın oda ayrı bir olay grid'e de gerek yokmuş float görünce ben grid yapmaya çalıştığını zannettim.

Sorun float

Bigchefstarys adlı üyeden alıntı: mesajı görüntüle

Detaylı baktım Sorun şu şekilde

.kedi-cinsleri-sol ve .kedi-cinsleri-sag daki floatları iptal et.
.kedi-cinsleri-sol ve .kedi-cinsleri-sag diğe belirttiğin iki HTML etiketini bir divin içine al ve o dive display flex tanımla, çok sağlıksız bir yapı olsada seni kurtaracaktır. Fakat mobilde ciddi zararlarını göreceksin.

<div style="display:flex">
 <div class="kedi-cinsleri-sol"></div>
 <div class="kedi-cinsleri-sag"></div>
</div>

Ek bir div açıp style vermeden .kedi-cinsleri-sagiçin float değerini kaldırıp ona display:flex verince sorun çözüşmüş oldu. Böylesi sağlıklı mı?