lostyazilim
tr.link

Kendiliğinden oluşan ve gideremediğim margin boşluğu

8 Mesajlar 2.229 Okunma
acebozum
tr.link

WmOptimize WmOptimize Üyeliği Durdurulmuş Banlı Kullanıcı
  • Üyelik 01.11.2015
  • Yaş/Cinsiyet 37 / E
  • Meslek WebProgramlama
  • Konum İstanbul Anadolu
  • Ad Soyad H** F**
  • Mesajlar 410
  • Beğeniler 151 / 174
  • Ticaret 3, (%100)
Selamun Aleyküm,
Bir script yazmaya başlacaktım ancak tasarımda sorun çıktı div oluşturuyorum. Divlerim arasında otomatik oluşan bir boşluk oluyor. Bu boşluklar sağ ve alt kısımda oluyor bunu görmek için sanki bir meni kopyalar gibi mausumu üzerine çekince oluşan mavilikten anladım.
Bunu nasıl giderebilirim. Margin değerlerini ne olursa olsun bu boşlukları alıyorum.



Bahsettiğim bu aralardaki mavi yaklaşık 2-3 pixellik boşluklardır.

Sorunu ancak float:left özelliği ile çözebildim ancak buda tasarımı farklı şekilde bozuyor.

Ek Olarak: Sorunu çözmek için okadar uğraştım ancak buraya mesaj attıktan sonra kendim bulabildim.

Çözüm şöyle yine float:left özelliğini kullandım. Ama bunu kullandığımda bu divlerin arkasındaki divim onları kapsamıyordu. Yani o verdiğim arkaplan felan yok oluyordu.
bende şöyle yaptım











hem başına hem sonuna eklemem gerekiyormuş onu öğrendim daha önce hep baştarafa ekliyince olmuyordu. Aynı sorunu yaşayan olursa diye konu durmasını istedim.
 

 

wmaraci
reklam

dogukanbatal dogukanbatal dribbble.com/dogukanbatal Kullanıcı
  • Üyelik 30.09.2013
  • Yaş/Cinsiyet 29 / E
  • Meslek UI Designer & Developer
  • Konum İstanbul Avrupa
  • Ad Soyad D** B**
  • Mesajlar 384
  • Beğeniler 126 / 103
  • Ticaret 5, (%100)
CSS dosyasına * { margin: 0; padding: 0; } ekleyip denediniz mi?

Edit: Sorun çözülmüş, görmedim pardon.
 

 

WmOptimize WmOptimize Üyeliği Durdurulmuş Banlı Kullanıcı
  • Üyelik 01.11.2015
  • Yaş/Cinsiyet 37 / E
  • Meslek WebProgramlama
  • Konum İstanbul Anadolu
  • Ad Soyad H** F**
  • Mesajlar 410
  • Beğeniler 151 / 174
  • Ticaret 3, (%100)
dogukanbatal Denedim hocam. seçicilerle bile denedim. ama bu sefer ilk öğeyi en sona attı oda sorun olurdu. Ama yorumun için teşekkür ederim. Ayrıca başka yöntemler varsada bilmek isterim.
 

 

GrafikYazilim06 GrafikYazilim06 WM Aracı Kullanıcı
  • Üyelik 01.06.2016
  • Yaş/Cinsiyet 41 / E
  • Meslek Grafiker, Yazılımcı
  • Konum Ankara
  • Ad Soyad A** K**
  • Mesajlar 188
  • Beğeniler 121 / 63
  • Ticaret 14, (%100)
Bu tür sorunların olmaması ve tüm tarayıcılarda hatasız tasarım için css sıfırlama kodları var. Kullandığınız css kodlarının içine bunları yapıştırıyorsunuz. Fatih Hayrioğlu nun sitesinde detaylı bilgilere ulaşabilirsiniz. Her web tasarımda kullanmakta fayda var bence.
 

 

wmaraci
wmaraci

HapyMan HapyMan Full Stack Developer Kullanıcı
  • Üyelik 14.05.2016
  • Yaş/Cinsiyet 32 / E
  • Meslek What do you do exactly ?
  • Konum İstanbul Avrupa
  • Ad Soyad T** T**
  • Mesajlar 561
  • Beğeniler 171 / 208
  • Ticaret 0, (%0)
hocam merhaba ;

bu css kodu:




bu html kodu :











buda test adresi : TEST

başka yöntem varsa bilmek isterim demişsiniz diye attım. yanlış anlaşılmasın. :cool:
 

 

WmOptimize WmOptimize Üyeliği Durdurulmuş Banlı Kullanıcı
  • Üyelik 01.11.2015
  • Yaş/Cinsiyet 37 / E
  • Meslek WebProgramlama
  • Konum İstanbul Anadolu
  • Ad Soyad H** F**
  • Mesajlar 410
  • Beğeniler 151 / 174
  • Ticaret 3, (%100)
HapyMan Hocam teşekkür ederim ancak ben bunun float left'ten başka seçeneği varmı demek istedim. Yani display:inline-block yaptım arada boşluk bıraktı float sız bir seçenek var mıdır acaba ?
 

 

HapyMan HapyMan Full Stack Developer Kullanıcı
  • Üyelik 14.05.2016
  • Yaş/Cinsiyet 32 / E
  • Meslek What do you do exactly ?
  • Konum İstanbul Avrupa
  • Ad Soyad T** T**
  • Mesajlar 561
  • Beğeniler 171 / 208
  • Ticaret 0, (%0)
WmOptimize hocam float kodu sıralı elementlerin bir öncekine göre nasıl hareket edeceğini belirtmek için kullanılır.

inline-blok komutu ise bulunduğu yeri kapsayan dış elementin özelliğinin aynısını almasını sağlar.

yani yanyana sıralama işlemini yapmak için float gerekli çünkü bir öncekinin yanına geç diyoruz. bu işlemi javascript ile yaptırabiliriz fakat çok fazla kod yazmamız gerekir. bir diğer seçenek ise içeriği kullanacağımız yere mixitup veya isotope gibi grid sistemi koymamız gerekir.

bu tür grid sistemlerinin csslerini incelerseniz göreceksinizdir, yanyana sıralama da float left yine vardır.
 

 

WmOptimize WmOptimize Üyeliği Durdurulmuş Banlı Kullanıcı
  • Üyelik 01.11.2015
  • Yaş/Cinsiyet 37 / E
  • Meslek WebProgramlama
  • Konum İstanbul Anadolu
  • Ad Soyad H** F**
  • Mesajlar 410
  • Beğeniler 151 / 174
  • Ticaret 3, (%100)
HapyMan Hocam evet haklısınız. Ancak benim demek istediğim olay şu inline-blok komutu divin sadece kapladığı alanı veya belirtilen genişliği ve yüksekliği alıyor. Benim demek istediğim inline-block ile yapılan 5 kutu yan yana gelir ve boşluk bırakmadığın zaman mantıken bir bütün halinde oması gerekir. Tek bir divmiş gibi gözükmesi gerekirken otomatik bir boşluk bırakıyor. Yani sorun yan yana gelmemesi değil inline-blok yapınca yan yana geliyor ancak sorun otomatik boşluk bırakmasında ve marginlerini sıfırlayınca da gitmiyor. Neyse son olarak size teşekkürlerimi sunayım ve bu konuda muzdarip olanlara float:left uygulamaları gerektiğini belirtelim :)
HapyMan

kişi bu mesajı beğendi.

wmaraci
wmaraci
Konuyu toplam 1 kişi okuyor. (0 kullanıcı ve 1 misafir)
Site Ayarları
  • Tema Seçeneği
  • Site Sesleri
  • Bildirimler
  • Özel Mesaj Al