Semantic UI

Mustafa_64 · 4 Ocak 2015

Arkadaşlar SemanticUI Framework'ünde kart şeklinde resim ve bilgisi olan bir tasarım buldum fakat bu tasarımların her ikisini de yan yana getiremiyorum. Yardımcı olursanız sevinirim.

KOD:

<div class="ui card"><a class="image" href="#"><img src="/images/avatar/large/steve.jpg"></a><div class="content"><a class="header" href="#">Steve Jobes</a><div class="meta"><a class="time">Last Seen 2 days ago</a></div></div></div>

Norego · 4 Ocak 2015

Kod:

<div class="ui grid">

      <div class="eight wide column">
               <div class="ui card">
                        <a class="image" href="#"><img src="/images/avatar/large/steve.jpg"></a>
                        <div class="content">
                                <a class="header" href="#">Steve Jobes</a>
                                <div class="meta">
                                       <a class="time">Last Seen 2 days ago</a>
                                 </div>
                         </div>
               </div>
      </div>

      <div class="eight wide column">
               <div class="ui card">
                        <a class="image" href="#"><img src="/images/avatar/large/steve.jpg"></a>
                        <div class="content">
                                <a class="header" href="#">Steve Jobes</a>
                                <div class="meta">
                                       <a class="time">Last Seen 2 days ago</a>
                                 </div>
                         </div>
               </div>
      </div>

</div>

16 lik grid sistemi kullanıyormuş framework. Wide classı adından belli olduğu gibi geniş grid için kaldırırsan biraz daha dar olur sanırım. Eight de 8 gridi birden kaplıyor. İstersen eight yerine istediğin sayıyı yazarak ana div içi toplam 16'ya denk gelecek şekilde ayarlayabilirsin.

Mustafa_64 · 4 Ocak 2015

Peki bir deneyelim. İlginiz için teşekkürler.

Denedim fakat benim demek istediğim boyutu değil. Ben bu tasarımın her eklediğimde aşağı doğru gitmesini istemiyorum. Yani her eklediğimde yan yana dizilsin istiyorum.

Norego · 5 Ocak 2015

Yaptığınız tasarımı göremediğim için bir şey diyemiyorum. Ek olarak SemanticUI'de yabancıyım, sitesinden biraz baktım classlarına sadece. Projeyi onlinea çıkarıp linki paylaşırsan daha net cevaplayabilirim.

Mustafa_64 · 5 Ocak 2015

Şöyle bir şey yapmak istemiştim. http://semantic-ui.com/views/card.html Biraz aşağı inersen sitede
Kartlar

Grup bir kart örneği

Şeklinde yan yana dizilmiş örneği. Onu yapmaya çalışmıştım farklı bir tarzıyla ama bunları düzenledikten sonra kodda istediğim tasarımı elde ettim. İlginiz için tekrar teşekkür ederim.

Mustafa_64 · 5 Ocak 2015

Bana Technopat.net anasayfasındaki haber scripti veya buna benzer jquery scriptler lazım. Yardımcı olursanız sevinirim.

Norego · 5 Ocak 2015

Technopat zaten Wordpress altyapısını kullanıyor. Benzer bir çok tema var alıp kullanabileceğiniz. Ücretsiz olarak da 100'lerce seçenek mevcut Wordpress'te.

Mustafa_64 · 5 Ocak 2015

Anladım. Teşekkürler.

Bulut Uzer · 6 Ocak 2015

Mustafa_64 dedi:
Şöyle bir şey yapmak istemiştim. Card | Semantic UI Biraz aşağı inersen sitede
Kartlar

Grup bir kart örneği

Demek istediğini anladım. Oluşturduğun düzende kolonların margin değerini tek olarak vermelisin. Yani "margin: 0px 5px;" yaptığın zaman sağ ve soldan kendi aralığını ayarlar ve kolonların genişliğini de ayarladıktan sonra işini bitirmiş olursun. Tabi bunu sabit bir oran için düşünürsek. Mesela "960px" genişliğinde bir kapsayıcı için. Bu genişliğe göre ayarlaman lazım kolon genişliklerini. Bu yüzden tasarım responsive olmayacaksa genişliği "960px" göre ayarlamak gerekli. Aşağıda bir tane örnek hazırladım. İnceleyerek düzenleyebilirsin. Böylelikle nasıl ilerleyeceğini de anlarsın. Ayrıca responsive yapılarda eğer kendi yapını oluşturmayacaksan Jquery Masonry öneririm. Kolay gelsin.

JsFiddle

Mustafa_64 · 7 Ocak 2015

Teşekkür ederim ilginiz için. Hallettim.

Fakat ben haber scripti arıyorum. Yani slider şeklinde değil. Sabit resimlerin çekildiği ve bu resimlerin üzerinde açıklamaları yer alan bir script arıyorum. Örnek olarak Teknoloji tutkunu Technopatların ortak adresi: Technopat.net! bu sitedekine benzer scriptler. Yardımcı olursanız sevinirim.

Semantic UI

Ayrıntılı düzenleme

Mustafa_64

Hectopat

Norego

Hectopat

Mustafa_64

Hectopat

Norego

Hectopat

Mustafa_64

Hectopat

Mustafa_64

Hectopat

Norego

Hectopat

Mustafa_64

Hectopat

Bulut Uzer

Kilopat

Mustafa_64

Hectopat

Benzer konular

Technopat Haberler

Yeni konular

Yeni mesajlar

Gizliliğinize önem veriyoruz