Şimdi Ara

Css ile buton sıralama

Bu Konudaki Kullanıcılar:
2 Misafir - 2 Masaüstü
5 sn
8
Cevap
0
Favori
2.945
Tıklama
Daha Fazla
İstatistik
  • Konu İstatistikleri Yükleniyor
0 oy
Öne Çıkar
Sayfa: 1
Giriş
Mesaj
  • Merhaba arkadaşlar,

    benim mysql veritabanında bir kaç tane verim var. Ben bu verilerin güzelce dizilmiş butonlar haline gelmesini istiyorum. Php'de foreach döngüsü ile verileri buton(lar)a dönüştürdüm. Ama dizme konusunda sıkıntı oldu. Benim istediğim dizme şekli aynı alış-veriş sitelerindeki gibi :

    |Veri1| |Veri2| |Veri3|

    |Veri4| |Veri5| |Veri6|

    Yani yan yana olacak ama aralarda boşluklar olacak sonra biraz boşlukla aşağıya geçecek. Orada ise yine aynı yan yana boşluklu.

    Ben bu boşlukları margin-left ve margin-top ile yapabiliyorum ama hepsi sayfanın en üstünde diziliyor. Dizilme yerini (dizilime başlanan yeri) ben ayarlamak istiyorum.

    Umarım anlatabilmişimdir.

    Lütfen yardım edin.

    Cevaplarınız için şimdiden çok teşekkür ederim.

    İyi ramazan ve günler dileğiyle.



  • Örnek html/css kodları yazılmadığı için tahmini cevap veriyorum.

    Sorudan anladığım kadarıyla ikinci üçlü aşağı kaysın istiyorsunuz ama o da yukarıya, diğerlerinin yanına yapışıyor.

      <div class="column menu"> 
    <ul>
    <li>The Flight</li>
    <li>The City</li>
    <li>The Food</li>
    </ul>
    <ul>
    <li>The Museum</li>
    <li>The Nature</li>
    <li>The People</li>
    </ul>
    </div>


    Örnekte
    html ile 3'lü gruplandırma yapılmış, butonlar alt alta dizilmesin, yan yana birbirine yapışsın diye li {float:left;} olarak belirtilmiştir.

    Lütfen şuradaki örneği inceleyin:
    https://jsfiddle.net/aLnt3phq/8/

    İşinizi görmezse kendi fiddle'ınızı da oluşturabilirsiniz.
  • quote:

    Orijinalden alıntı: voenetto

    Örnek html/css kodları yazılmadığı için tahmini cevap veriyorum.

    Sorudan anladığım kadarıyla ikinci üçlü aşağı kaysın istiyorsunuz ama o da yukarıya, diğerlerinin yanına yapışıyor.

      <div class="column menu"> 
    <ul>
    <li>The Flight</li>
    <li>The City</li>
    <li>The Food</li>
    </ul>
    <ul>
    <li>The Museum</li>
    <li>The Nature</li>
    <li>The People</li>
    </ul>
    </div>


    Örnekte
    html ile 3'lü gruplandırma yapılmış, butonlar alt alta dizilmesin, yan yana birbirine yapışsın diye li {float:left;} olarak belirtilmiştir.

    Lütfen şuradaki örneği inceleyin:
    https://jsfiddle.net/aLnt3phq/8/

    İşinizi görmezse kendi fiddle'ınızı da oluşturabilirsiniz.

    Merhaba,

    kod için teşekkürler. Ama ben yan yana yapışmasını istemiyorum.

    Size resimli örnek vereyim :

    Css ile buton sıralama


    Css ile buton sıralama


    Lütfen yardım edin.

    Cevaplarınız için çok teşekkür ederim.

    İyi ramazan ve günler dileğiyle.
  • Egen ccaann E kullanıcısına yanıt
    Resimde gösterdiğiniz alışveriş sitesindeki kutucuklar yan yana diziliyor, sığmayınca da alta geçiyor.

    Cevap aynı. O kutuların her birine (Örneğin <div class="kutu"> olsun), css ile "float:left" yazarsanız zaten bunu elde edersiniz.

    .kutu { float: left;}


    Aralarında ne kadar boşluk olacağını da padding veya margin ile ayarlarsınız.
  • quote:

    Orijinalden alıntı: voenetto

    Resimde gösterdiğiniz alışveriş sitesindeki kutucuklar yan yana diziliyor, sığmayınca da alta geçiyor.

    Cevap aynı. O kutuların her birine (Örneğin <div class="kutu"> olsun), css ile "float:left" yazarsanız zaten bunu elde edersiniz.

    .kutu { float: left;}


    Aralarında ne kadar boşluk olacağını da padding veya margin ile ayarlarsınız.

    Merhaba,

    peki ben kendim dizilime başlanan yeri ayarlamak istiyorum onu nasıl yapmalıyım?

    Lütfen yardım edin.

    Cevaplarınız için şimdiden çok teşekkür ederim.

    İyi ramazan ve günler dileğiyle.
  • quote:

    Orijinalden alıntı: Egen ccaann


    quote:

    Orijinalden alıntı: voenetto

    Resimde gösterdiğiniz alışveriş sitesindeki kutucuklar yan yana diziliyor, sığmayınca da alta geçiyor.

    Cevap aynı. O kutuların her birine (Örneğin <div class="kutu"> olsun), css ile "float:left" yazarsanız zaten bunu elde edersiniz.

    .kutu { float: left;}


    Aralarında ne kadar boşluk olacağını da padding veya margin ile ayarlarsınız.

    Merhaba,

    peki ben kendim dizilime başlanan yeri ayarlamak istiyorum onu nasıl yapmalıyım?

    Lütfen yardım edin.

    Cevaplarınız için şimdiden çok teşekkür ederim.

    İyi ramazan ve günler dileğiyle.

    http://fatihhayrioglu.com/yenilenmis-flex-modulu/
  • margin-left kullanılır kardeşim
    hangi tarafa alacaksan o yönü yaz
    örnek yazıyorum

    <!DOCTYPE HTML>
    <html>
    <head>
    <style type="text/css">
    .deneme
    {
    background-color:dodgerblue;
    margin-left:30px;
    width:500px;
    height:200px;
    }

    </head>
    <body>
    <div class="deneme"></div>
    </body>
    </html>



    < Bu mesaj bu kişi tarafından değiştirildi erenonan -- 19 Haziran 2017; 9:45:0 >
  • 
Sayfa: 1
- x
Bildirim
mesajınız kopyalandı (ctrl+v) yapıştırmak istediğiniz yere yapıştırabilirsiniz.