Css ile buton sıralama

Aşağı Git Tüm Forumlar Web Tasarım - Programlama Tasarım ve grafik Web Tasarım ve Hazır Kodlar Css ile buton sıralama

Bu konudaki kullanıcılar: 1 misafir

6
Cevap 2964
Tıklama 0
Öne Çıkarma

1. sayfa

Css ile buton sıralama

Cevap Yaz

Egen ccaann

7 yıl

Teğmen

Konu Sahibi

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.

voenetto

7 yıl

Çavuş

Ö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.

Bu mesaja 1 cevap geldi.

Egen ccaann

7 yıl

Teğmen

Konu Sahibi

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 :

< Resime gitmek için tıklayın >

< Resime gitmek için tıklayın >

Lütfen yardım edin.

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

İyi ramazan ve günler dileğiyle.

Bu mesaja 1 cevap geldi.

voenetto

7 yıl

Çavuş

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.

Bu mesaja 1 cevap geldi.

Bu mesajda bahsedilenler: @Egen ccaann

Egen ccaann

7 yıl

Teğmen

Konu Sahibi

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.

Bu mesaja 1 cevap geldi.

Parola_18

7 yıl

Binbaşı

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/

erenonan

7 yıl

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 >

Cevap Yaz

1. sayfa

Tüm Forumlar Web Tasarım - Programlama Tasarım ve grafik Web Tasarım ve Hazır Kodlar Css ile buton sıralama