Semantic UI

M

Mustafa_64

Hectopat
Katılım
14 Eylül 2014
Mesajlar
53
Daha fazla  
Cinsiyet
Erkek
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>
 
Son düzenleyen: Moderatör:
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.
 
Son düzenleyen: Moderatör:
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.
 
Son düzenleyen: Moderatör:
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.
 
Son düzenleyen: Moderatör:
Şö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.
 
Son düzenleyen: Moderatör:
Bana Technopat.net anasayfasındaki haber scripti veya buna benzer jquery scriptler lazım. Yardımcı olursanız sevinirim.
 
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.
 
Son düzenleyen: Moderatör:
Anladım. Teşekkürler.
 
Son düzenleyen: Moderatör:
Mustafa_64 dedi:
Şöyle bir şey yapmak istemiştim. Card | Semantic UI Biraz aşağı inersen sitede
Kartlar

Grup bir kart örneği
Genişletmek için tıkla...

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
 
Son düzenleyen: Moderatör:
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.
 
Son düzenleyen: Moderatör:
Konuyu cevapla
Menü
Giriş yap
Kaydol
Bu siteyi kullanmak için çerezler gereklidir. Siteyi kullanmaya devam etmek için çerezleri kabul etmelisiniz. Daha Fazlasını Öğren.…