ai.Wxby
Kilopat
- Katılım
- 11 Nisan 2016
- Mesajlar
- 241
- Çözümler
- 1
Daha fazla
- Cinsiyet
- Diğer
- Profil Kapağı
- 1524848434
Merhabalar,
Üzerinde çalıştığım projede bir kısmı halledemiyorum. Çok uğraştım çözmek için ama bir türlü algılayamıyorum. Nerede hata yaptığımı anlayamadım. Bir de size danışmak istedim. Yapmak istediğim şey; div içerisine her satırda 3 kart olacak şekilde dizilim yapmak.
HTML yapım:
content-demos (kapsayıcı div):
demo kartı:
Not: Rahat rahat anlayabilin diye renkleri daha canlı yaptım.
Yorum satırı haline ya da bulanık hale getirdiklerim test aşamasında yazdığım ya da sorunla alakası olmayan kısımlar. Sorun olduğunu düşündüğüm kısımları gösterdim. Tarayıcıda çalıştırdığım ortaya çıkan görüntü böyle:
Mor (content-demos yani kapsayıcı div) alan:
İç boşluk olarak 5 piksel verdim ki kartlar köşelere yaslanmasın. Gap vermemim amacıysa kartlar arasında 5 piksellik boşluk istemem. Bunun sebebi de kartların birbirine yapışmasını önlemek.
Pembe (kart) alan:
İç boşluğu 10 piksel verdim ki içerik, card alanının köşelerine yapışmasın. Gelelim en önemli kısım olan width değerine; amacım satır başına 3 kart koyabilmek. Bunun için kart elemanlarının genişlik değerini 100% / 3 yaptım. Normalde kartın, kapsayıcı alanındaki kalan genişliğe 100% yayılması, ondan sonra da kalan piksel değerini 3'e bölerek kendi genişliğine aktarması lazım. Fakat burada bunu yapmıyor. Hiçbir şekilde tek satırda 3 kartı yerleştiremiyorum.
Çözmek için kapsayıcı alandaki (content-demos) gap değerini kaldırdım ve her şey istediğim gibi oldu. Ama gap değerini kaldırınca da bu sefer kartlar yapışık oluyor. Başka çözüm yolu olarak kartlara margin değerini atadım fakat değişen bir şey olmadı. Yine satır başına 2 karta düştü. Ne yaparsam yapayım kartlara boşluk verdiğim an her şey bozuluyor. Her şeyi denedikten sonra aklıma kartların genişliğini ayarlamak geldi. Eğer kartların genişliğini cal(100% / 3) ile değil de kendi manuel olarak verirsem şunlar oluyor;
- width: 33.33% olduğunda değişen bir şey olmuyor, zira aynı işlemi manuel olarak yapıyorum.
- width: 33% olduğunda işler biraz değişiyor. Her şey tamam gibi oluyor. Kartlar arası boşluk, ana alan boşluğu, satır başına 3 kart... Kısaca her şey tamam gibi görünüyor fakat şöyle bir görüntü ortaya çıkıyor:
Kapsayıcı alanın sağ tarafına ekstra boşluk ekleniyor çünkü kart genişliği 33.33 * 3'ten 99.99 değil; 33 * 3'ten 99 oluyor. Dikkatli bakıldığında sağ taraf boşluğunun, sol taraf boşluğundan daha geniş olduğu görülebilir. Bu benim gibi takıntılı bir insanı çok sinirlendiriyor. Dahası, tarayıcının genişliğini daraltmaya başladığımda bu sefer yine satır başına 2 ye düşüyor:
Ben genişlikleri piksel değerinden verseydim evet, query'lerle birlikte çözünürlüğe göre ayarlamam gerekirdi fakat hem % birimi hem de calc() kullanıyorum. Buna rağmen otomatik ayarlarken sapıtıyor.
Benim göremediğim ne var acaba? Yardımcı olabilir misiniz lütfen? Şu an meşgulüm belki bu gece dönemeyebilirim ama sabah kesinlikle yazdıklarınıza döneceğim. Şimdiden teşekkürler.
Üzerinde çalıştığım projede bir kısmı halledemiyorum. Çok uğraştım çözmek için ama bir türlü algılayamıyorum. Nerede hata yaptığımı anlayamadım. Bir de size danışmak istedim. Yapmak istediğim şey; div içerisine her satırda 3 kart olacak şekilde dizilim yapmak.
HTML yapım:
content-demos (kapsayıcı div):
demo kartı:
Not: Rahat rahat anlayabilin diye renkleri daha canlı yaptım.
Yorum satırı haline ya da bulanık hale getirdiklerim test aşamasında yazdığım ya da sorunla alakası olmayan kısımlar. Sorun olduğunu düşündüğüm kısımları gösterdim. Tarayıcıda çalıştırdığım ortaya çıkan görüntü böyle:
Mor (content-demos yani kapsayıcı div) alan:
İç boşluk olarak 5 piksel verdim ki kartlar köşelere yaslanmasın. Gap vermemim amacıysa kartlar arasında 5 piksellik boşluk istemem. Bunun sebebi de kartların birbirine yapışmasını önlemek.
Pembe (kart) alan:
İç boşluğu 10 piksel verdim ki içerik, card alanının köşelerine yapışmasın. Gelelim en önemli kısım olan width değerine; amacım satır başına 3 kart koyabilmek. Bunun için kart elemanlarının genişlik değerini 100% / 3 yaptım. Normalde kartın, kapsayıcı alanındaki kalan genişliğe 100% yayılması, ondan sonra da kalan piksel değerini 3'e bölerek kendi genişliğine aktarması lazım. Fakat burada bunu yapmıyor. Hiçbir şekilde tek satırda 3 kartı yerleştiremiyorum.
Çözmek için kapsayıcı alandaki (content-demos) gap değerini kaldırdım ve her şey istediğim gibi oldu. Ama gap değerini kaldırınca da bu sefer kartlar yapışık oluyor. Başka çözüm yolu olarak kartlara margin değerini atadım fakat değişen bir şey olmadı. Yine satır başına 2 karta düştü. Ne yaparsam yapayım kartlara boşluk verdiğim an her şey bozuluyor. Her şeyi denedikten sonra aklıma kartların genişliğini ayarlamak geldi. Eğer kartların genişliğini cal(100% / 3) ile değil de kendi manuel olarak verirsem şunlar oluyor;
- width: 33.33% olduğunda değişen bir şey olmuyor, zira aynı işlemi manuel olarak yapıyorum.
- width: 33% olduğunda işler biraz değişiyor. Her şey tamam gibi oluyor. Kartlar arası boşluk, ana alan boşluğu, satır başına 3 kart... Kısaca her şey tamam gibi görünüyor fakat şöyle bir görüntü ortaya çıkıyor:
Kapsayıcı alanın sağ tarafına ekstra boşluk ekleniyor çünkü kart genişliği 33.33 * 3'ten 99.99 değil; 33 * 3'ten 99 oluyor. Dikkatli bakıldığında sağ taraf boşluğunun, sol taraf boşluğundan daha geniş olduğu görülebilir. Bu benim gibi takıntılı bir insanı çok sinirlendiriyor. Dahası, tarayıcının genişliğini daraltmaya başladığımda bu sefer yine satır başına 2 ye düşüyor:
Ben genişlikleri piksel değerinden verseydim evet, query'lerle birlikte çözünürlüğe göre ayarlamam gerekirdi fakat hem % birimi hem de calc() kullanıyorum. Buna rağmen otomatik ayarlarken sapıtıyor.
Benim göremediğim ne var acaba? Yardımcı olabilir misiniz lütfen? Şu an meşgulüm belki bu gece dönemeyebilirim ama sabah kesinlikle yazdıklarınıza döneceğim. Şimdiden teşekkürler.
