• 15-07-2021, 00:16:54
    #10
    blap adlı üyeden alıntı: mesajı görüntüle
    O yuvarlakların olduğu büyük div için display:flex align-items:center yazarsan olur gibi bir de min slider itemlerini iç içe yazmışsın onları ayır. Divler iç içe girmiş.
    CalixtusJr adlı üyeden alıntı: mesajı görüntüle
    float:left
    margin: 0px 0px 10px 0px

    tamamdır geçmiş olsun.

    Olmadı maalesef hepsini yaptım ama aynı şekil sağa sola kaymaktan başka birşey olmuyor
  • 15-07-2021, 00:20:06
    #11
    blap adlı üyeden alıntı: mesajı görüntüle
    O yuvarlakların olduğu büyük div için display:flex align-items:center yazarsan olur gibi bir de min slider itemlerini iç içe yazmışsın onları ayır. Divler iç içe girmiş.
    divlerden kaynaklanıyormuş hocam sağoalsın
  • 15-07-2021, 00:37:09
    #12
    Kapsayıcı div'i display:flex yap. Ardından justify-content ile yatayda eşit aralıklı ya da tam ortaya hizalama yapabilirsin. Dikeyde de align-items:center ile ortalayabilirsin. Bahsettiğin tasarım için ise bu şekilde flex yapısı ile halledebilrsin. Kodlarının durumu için ise vsCode kullanıyorsan düzeltmek istediğin alanı seç ve format document de. Tüm kodları formatlayarak daha düzenli hale getirir.
  • 15-07-2021, 00:39:18
    #13
    poineandlimos adlı üyeden alıntı: mesajı görüntüle
    Kapsayıcı div'i display:flex yap. Ardından justify-content ile yatayda eşit aralıklı ya da tam ortaya hizalama yapabilirsin. Dikeyde de align-items:center ile ortalayabilirsin. Bahsettiğin tasarım için ise bu şekilde flex yapısı ile halledebilrsin. Kodlarının durumu için ise vsCode kullanıyorsan düzeltmek istediğin alanı seç ve format document de. Tüm kodları formatlayarak daha düzenli hale getirir.
    Deneme yanılma birşeyler yapıyordum oldu hocam sağolun
  • 16-07-2021, 06:39:02
    #14
    divlerini kontrol et kardeşim ondan olabilir
  • 19-07-2021, 00:31:26
    #15
    <style type="text/css">
        .slider {
            width: 640px;
            margin: 0 auto;
        }
        .slider > div {
            margin: 0 auto;
            width: 640px;
            height: 340px;
            background-color: #eee;
        }
        .slider > ul {
            list-style: none;
            margin: 0;
            padding: 0;
            margin-top: 5px;
            display: flex;
            justify-content: center;
        }
        .slider > ul li {
            margin-right: 5px;
            background-color: #eee;
            width: 80px;
            height: 60px;
        }
        .slider > ul li:last-child {
            margin-right: 0;
        }
    </style>
    
    <div class="slider">
        <div><!-- Preview Image --></div>
        <ul>
            <li><!-- Thumb Image --></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>