Kodları lütfen aşağıdaki butonları kullanarak renklendirin. Örnek: <php> echo "Selam Dünya"; </php>
Yardım
karakter kaldı

Boyuta Göre Otomatik Şekil Alan Div'ler

Başlık olarak tam olarak nasıl yazarım bilemedim.
Açıklama kısmında da zorlanmamak için paint ile birşeyler karalamak istedim.
Dosya olarak bir resim ekledim yinede anlatmak istiyorum.

bir resim sistemi için tasarım yapmaya çalışıyorum.
css konusunda pek tecrübeli sayılmam.
soruma gelince şöyle anlatmaya çalışayım.

genişlikleri sabit olacak şekilde resmin boyutuna göre yüksekliğini otomatik olarak alacak şekilde sıralaması ise bir önceki divin bitiş noktasına göre nereden başlayacağını otomatik algılayan bir div yapmak istiyorum.
eğer ekleyeceğim resim anlatmama yeterli değilse başka resimlerde çizmeye çalışabilirim.

resmi kelimeler ile anlatmaya çalışayım birazda.
üst kısımlar haricin orta kısım asıl yapmak istediğim kısım
yan yana 4 adet divden oluşacak
bu divlerin genişlikleri sabit yükseklikleri değişken olacak
yükseklikler resmin ebatları ile doğru orantılı olarak büyüyecek yada kısalacak.
sanırım yazıdan çok yapmak istediğimi eklediğim resim anlatacaktır.

Ekli Dosyalar

+0
-0
Cevaba KatılıyorumKatılmıyorum 		Cevap Yaz Yorum Yaz Arşivime Ekle Takip Et

Doğru Cevap

  • bilisimtr adlı üyenin fotoğrafı
    10 yıl önce yazılmış
    bilisimtr
    27 cevap - 6 soru
    2 kolon ve 3 alt kolona ihtiyacın var bir tane sol, bir tane sağ kısım ve sağ kısmın içindede 3 tane kolon oluşturmalısın. Aşağıdaki gibi halledebilirsin. 

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
.sol
{
	width:250px;
	float:left;
	margin-right:10px;
	
}

.sol .kategori a
{
	width:100%;
	display:block;
	
}

.sag
{
	width:900px;
	
}

.sag .sag1,.sag .sag2,.sag .sag3
{
	float:left;
	width:180px;
	margin-left:5px;	
}


</style>
<body>

<div class="sol">
	<div class="kategori">
    <a href="#">Kategori1</a>
    <a href="#">Kategori2</a>        
    </div>
    <div class="resim">
        <img src="http://simalkimya.com/resim/resim1.jpg"> 
        <span> Başlık</span>
    </div>
</div>

<div class="sag">
	<div class="sag1">
    	<div class="resim">
            <img src="http://cagritulumoglu.com/blog/wp-content/uploads/2011/05/need-for-speed-run-oyunu-poster-resim-180x160.jpg"> 
            <span> Başlık</span>
        </div>
        <div class="resim">
            <img src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/71116_126687504057091_6743114_n.jpg"> 
            <span> Başlık</span>
        </div>
        <div class="resim">
            <img src="http://www.sakaryarehberim.com/pictures/firmalar/resim14635.jpg"> 
            <span> Başlık</span>
        </div>
    </div>
    <div class="sag2">
    	<div class="resim">
            <img src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/187195_100001648584106_1660012_n.jpg"> 
            <span> Başlık</span>
        </div>
        <div class="resim">
            <img src="http://img.antoloji.com/i/e/200609/2252_b_9632.jpg"> 
            <span> Başlık</span>
        </div>
    </div>
    <div class="sag3">
        <div class="resim">
            <img src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/71116_126687504057091_6743114_n.jpg"> 
            <span> Başlık</span>
        </div>
        <div class="resim">
            <img src="http://www.cocukvizyon.com/img/etkinlikimg/1301-1400/1377_1.jpg"> 
            <span> Başlık</span>
        </div>
    </div>
</div>

</body>
    • S_HA_DO_W adlı üyenin fotoğrafı S_HA_DO_W
      Hocam güzel cevabınız için teşekkür ederim.
      fakat şöyle bir sıkıntı var
      sag1 sag2 sag3 vs. vs. diye gitmişsiniz fakat
      bu resimler anasayfada ne kadar içerik varsa çıkacak
      yani 10-15 ile kısıtlı değil içerik girdikçe resimler alt alta devam edecek.
      twitter daki gibi sayfa sonuna geldikçe otomatik diğer sayfa altından devam edecek.
      php ile döngü içerisine bile soksam hit arttıkça bu sorgudaki ekstra yük bir süre sonra sorun çıkaracak.

      bunu

      <div class="resimler">
      <div class="resim">
      <img src="http://*****">
      <span>Başlık</span>
      </div>

      <img src="http://*****">
      <span>Başlık</span>
      </div>

      <img src="http://*****">
      <span>Başlık</span>
      </div>

      <img src="http://*****">
      <span>Başlık</span>
      </div>

      <img src="http://*****">
      <span>Başlık</span>
      </div>

      <img src="http://*****">
      <span>Başlık</span>
      </div>

      <img src="http://*****">
      <span>Başlık</span>
      </div>

      <img src="http://*****">
      <span>Başlık</span>
      </div>

      <img src="http://*****">
      <span>Başlık</span>
      </div>

      <img src="http://*****">
      <span>Başlık</span>
      </div>

      <img src="http://*****">
      <span>Başlık</span>
      </div>

      <img src="http://*****">
      <span>Başlık</span>
      </div>


      </div>

      diye devam edecek şekilde ayarlamak istiyorum.
      10 yıl önce yazılmış
    • S_HA_DO_W adlı üyenin fotoğrafı S_HA_DO_W
      sitede acemi olduğumdan üsteki mesaj yanlış oldu özür dilerim. düzenlemeyi bulamadım.. 

      <div class="resimler"> 

<div class="resim"> 
<img src="http://*****"> 
<span>Başlık</span> 
</div> 

<div class="resim"> 
<img src="http://*****"> 
<span>Başlık</span> 
</div> 

<div class="resim"> 
<img src="http://*****"> 
<span>Başlık</span> 
</div> 

<div class="resim"> 
<img src="http://*****"> 
<span>Başlık</span> 
</div> 

<div class="resim"> 
<img src="http://*****"> 
<span>Başlık</span> 
</div> 

<div class="resim"> 
<img src="http://*****"> 
<span>Başlık</span> 
</div> 

<div class="resim"> 
<img src="http://*****"> 
<span>Başlık</span> 
</div> 

<div class="resim"> 
<img src="http://*****"> 
<span>Başlık</span> 
</div> 

<div class="resim"> 
<img src="http://*****"> 
<span>Başlık</span> 
</div> 

<div class="resim"> 
<img src="http://*****"> 
<span>Başlık</span> 
</div> 

<div class="resim"> 
<img src="http://*****"> 
<span>Başlık</span> 
</div> 

<div class="resim"> 
<img src="http://*****"> 
<span>Başlık</span> 
</div>

</div>
      10 yıl önce yazılmış
    • bilisimtr adlı üyenin fotoğrafı bilisimtr
      istediğin kadar alt alta sıralayabilirsin fakat içerik çok fazla olduğu zaman dediğiniz gibi kasar. Bunu jquery ve php ile çözebilirsin alta gelindiğinde devamını göstermesi için.
      10 yıl önce yazılmış
    • S_HA_DO_W adlı üyenin fotoğrafı S_HA_DO_W
      evet hocam o yüzden if kontrolü dahi olsa ekstradan yük binmesin diye kullanmadan tek bir sorgu ile resimleri aynı div isimleri ile sıralamak istiyorum.
      incelediğim bir site vardı ismini unuttum saatlerdir onu arıyorum
      aynı üste kullandığım gibi bir div yapısı vardı.
      css dosyasınıda incelemiştim ama not almamışım dalgınlıkla
      çok aradım aynı siteyi bulamadım yine :(
      10 yıl önce yazılmış
    • bilisimtr adlı üyenin fotoğrafı bilisimtr
      örnekleri inceleyebilirsin.

      http://www.serpito.com/scroll-down-auto-load-data/
      http://www.9lessons.info/2009/07/load-data-while-scroll-with-jquery-php.html
      10 yıl önce yazılmış
    • S_HA_DO_W adlı üyenin fotoğrafı S_HA_DO_W
      hocam siz beni yanlış anladınız ben bunu biliyorum zaten bunda sorun yok
      demek istediğim şey farklı
      demek istediğim olay tek bir ana div içinde diğer yan yana gelecek divleri sag1 sag2 sag3 olarak değilde sadece sag olarak kullanıp aynı görüntüyü elde etmek demek istediğim buydu.
      eğer sag1 sag2 sag3 diye gidersem buda php ile ekstra kontrol ile yazdırmam gerekecek.
      10 yıl önce yazılmış
    • bilisimtr adlı üyenin fotoğrafı bilisimtr
      sag1, sag2, sag3 vermen şart değilki. aynı divler kalsın fakat üçünede tek class adı verebilirsin.
      10 yıl önce yazılmış
    • S_HA_DO_W adlı üyenin fotoğrafı S_HA_DO_W
      teşekkür ederim hocam.
      şuanda iş yerinde olduğum deneme şansım olmuyor eve gidince deneyeceğim yardım için çok teşekkür ederim.
      10 yıl önce yazılmış

Cevaplar

Hiç cevap bulunamadı.