Resimler Yan yana Sıralanmıyor

Bu konuyu okuyanlar

mali2012

Asistan
Katılım
10 Eyl 2012
Mesajlar
145
Reaksiyon puanı
9
Puanları
18
Arkadaşlar merhaba. "admin.php" sayfasından veritabanına resim ve başlık ekliyorum. Kök dizindeki "resimgalerisi.php" sayfasına da bu resimleri veritabanından çekiyorum. Resimleri ekledikçe alt alta ekleniyor. "<div>" e "row" ve "col" vermeme rağmen yine de yan yana olmuyor. Resim ekliyorum. Bakabilirsiniz.
Mesaj otomatik birleştirildi:

Kodları koymayı unutmuşum. Kusura bakmayın. :)

PHP:
<?php
    $resim = $db->query("SELECT * FROM resimlerekle ORDER BY cokluresimekle_id DESC LIMIT 3");
    ?>

    <?php foreach ($resim as $resimkoy) { ?>

    <!-- <div style="border:1px solid black; height:50px; color:white; line-height:50px; text-align:center;"><?php /* echo $resimkoy["cokluresimekle_baslik"]; */ ?></div> -->
    <div class="row no-gutters" style="border:1px solid black;">
    <div class="col">
    
    <img style="max-width:266px;" <?php echo $resimkoy; ?> src='../../../upload/cokluresim/<?php echo $resimkoy["cokluresimekle_resim"]; ?>'><br>
    <span style="text-align:center; background-color:#17a2b8; color:#fff; max-width:266px;  max-height:35px; line-height:35px;"><?php echo $resimkoy["cokluresimekle_baslik"]; } ?></span>
    
    </div>
    </div>
 

Ekli dosyalar

  • adsiz 3.png
    adsiz 3.png
    153.6 KB · Görüntüleme: 222
Son düzenleme:

chnkyn

Öğrenci
Katılım
11 Ocak 2018
Mesajlar
85
Reaksiyon puanı
14
Puanları
8
Yaş
30
row görüyorum ve bootstrap kullanıyorsan, block eleman özelliğindedir.

Aslında row clasına veya no-gutters classına display:inline-block özelliği verirsen yan yana ekler.Biraz boşluklar görülebilir.Onları da yok etmek için float:left özelliği verebilirsin
 

Web Kartalı

Asistan
Katılım
3 Ağu 2017
Mesajlar
176
Reaksiyon puanı
112
Puanları
43
hem resime boyun vermişsin hem yan yana olsun istiyorsun :)resim class ında img-responsive kullanmanızı öneririm.. resim colonlara göre boyutlanmalı ki sayfa tarasımında esnek olsun ..

birde col-lg-4 yada col-md-3 gibi class detaylarını belirtip telefon mobil durumlarını belirtmenizde fayda var
 

mali2012

Asistan
Katılım
10 Eyl 2012
Mesajlar
145
Reaksiyon puanı
9
Puanları
18
"row" div'ine
HTML:
"style="display:inline-block;"
ekledim, yine de yan yana görüntülenmedi. Yukarıdaki resim ile aynı.
HTML:
<?php
    $resim = $db->query("SELECT * FROM resimlerekle ORDER BY cokluresimekle_id DESC LIMIT 3");
    ?>

    <?php foreach ($resim as $resimkoy) { ?>

    <!-- <div style="border:1px solid black; height:50px; color:white; line-height:50px; text-align:center;"><?php /* echo $resimkoy["cokluresimekle_baslik"]; */ ?></div> -->
    
    <!--
    <div class="row no-gutters" style="border:1px solid black;">
    -->
    
    <div class="row no-gutters">
    <div class="col">
    <img style="max-width:266px; height:auto;" <?php echo $resimkoy; ?> src='../../../upload/cokluresim/<?php echo $resimkoy["cokluresimekle_resim"]; ?>' />
    <div style="width:266px; height:35px; line-height:35px; background-color:#17a2b8; text-align:center; color:#fff; border:1px solid black;"><?php echo $resimkoy["cokluresimekle_baslik"]; } ?></div>
    </div>
    </div>
 

mali2012

Asistan
Katılım
10 Eyl 2012
Mesajlar
145
Reaksiyon puanı
9
Puanları
18
Daha önce resmin aşağısına başlık koymak istiyordum. Aslında benim yapmak istediğim tam olarak da buydu. Resmin üzerine gelince "sil" ve "düzenle" çıkmasıydı. Şimdi yaptım onu. Yalnız resmin adını nereye yazacağım bilemedim. Resmin aşağısına almak istedim ama yukarıdaki css lerden etkileniyor ve bir türlü resmin aşağısına indiremedim.
PHP:
<style>

figure {
  float: left;
  position: relative;
  padding: 3px;
  margin-right: 15px;
  margin-bottom: 1.35em;
  background: #fff;
  -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.35);
  -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.35);
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.35);
}
 
figcaption {
  width: 266px;
  position: absolute;
  background: rgba(0,0,0,0.6);
  font-size: 1.2em;
  color: #fff;
  padding: 10px 16px;
  opacity: 0;
  left: 3px;
  bottom: -10%;
  -webkit-transition: all 0.44s ease;
  -moz-transition: all 0.44s ease;
  -o-transition: all 0.44s ease;
  transition: all 0.44s ease;
}

figcaption a { color: #cce1ef; }

figcaption a:hover { color: #a9cbe1; }
 
figure:hover figcaption { opacity: 1; bottom: 5px; }
 
figcaption.light {
  background: rgba(255,255,255,0.6);
  font-size: 1.2em;
  color: #444;
  -webkit-transition: all 0.44s ease;
  -moz-transition: all 0.44s ease;
  -o-transition: all 0.44s ease;
  transition: all 0.44s ease;
}

figcaption.light a { color: #60a7d7; }
figcaption.light a:hover { color: #4d92c0; }

#topbar { position: fixed; top: 0; width: 100%; height: 45px; z-index: 999; background: #1b1b1b; border-bottom: 1px solid #575656; padding-left: 35px; }
#topbar a { line-height: 45px; font-size: 1.4em; font-weight: bold; color: #fff; }
 
#wrapper { width: 1000px; margin: 0 auto; padding-top: 70px; }
#gallery { padding: 0px 15px; display: block; }

<!-- Yukarısı sil ve düzenle için -->


</style>

    <?php
    $resim = $db->query("SELECT * FROM resimlerekle ORDER BY cokluresimekle_id DESC LIMIT 3");
    ?>

    <?php foreach ($resim as $resimkoy) { ?>

    <!-- <div style="border:1px solid black; height:50px; color:white; line-height:50px; text-align:center;"><?php /* echo $resimkoy["cokluresimekle_baslik"]; */ ?></div> -->
    
    <!--
    <div class="row no-gutters" style="border:1px solid black;">
    -->
    
    <div>
    <figure>
    <img style="max-width:266px; height:auto;" <?php echo $resimkoy; ?> src='../../../upload/cokluresim/<?php echo $resimkoy["cokluresimekle_resim"]; ?>' /><br>
    <figcaption>
    <div style="float:left;">Sil</div>
    <div style="float:right;">Düzenle</div>
    </figcaption>
    </figure>
    </div>
    
    <div style="border:1px solid black; text-align:center; color:#fff;"><a href='index.php'><?php echo $resimkoy["cokluresimekle_baslik"]; } ?></a></div>
 

Ekli dosyalar

  • adsiz 5.jpg
    adsiz 5.jpg
    78.4 KB · Görüntüleme: 210

chnkyn

Öğrenci
Katılım
11 Ocak 2018
Mesajlar
85
Reaksiyon puanı
14
Puanları
8
Yaş
30
"row" div'ine
HTML:
"style="display:inline-block;"
ekledim, yine de yan yana görüntülenmedi. Yukarıdaki resim ile aynı.
HTML:
<?php
    $resim = $db->query("SELECT * FROM resimlerekle ORDER BY cokluresimekle_id DESC LIMIT 3");
    ?>

    <?php foreach ($resim as $resimkoy) { ?>

    <!-- <div style="border:1px solid black; height:50px; color:white; line-height:50px; text-align:center;"><?php /* echo $resimkoy["cokluresimekle_baslik"]; */ ?></div> -->
   
    <!--
    <div class="row no-gutters" style="border:1px solid black;">
    -->
   
    <div class="row no-gutters">
    <div class="col">
    <img style="max-width:266px; height:auto;" <?php echo $resimkoy; ?> src='../../../upload/cokluresim/<?php echo $resimkoy["cokluresimekle_resim"]; ?>' />
    <div style="width:266px; height:35px; line-height:35px; background-color:#17a2b8; text-align:center; color:#fff; border:1px solid black;"><?php echo $resimkoy["cokluresimekle_baslik"]; } ?></div>
    </div>
    </div>

html tagların yan yana listelenmesi css ile alakalıdır.Eğer display:inline-block verdiysen ve yine hallolmadıysa 2 sorundan kaynaklanıyor olabilir.
1-display inline block demişsin ama div width özelliğine 100% demiş olabilirsin.
2-div'e ait row ve no-gutters classların birinde display:block !important özelliği vermiş olunabilir.
style="display:block !important" olarak ekle.eğer yine yan yana gelmiyor ise, 100% genişlik vermediğinden emin ol.
Mesaj otomatik birleştirildi:

Daha önce resmin aşağısına başlık koymak istiyordum. Aslında benim yapmak istediğim tam olarak da buydu. Resmin üzerine gelince "sil" ve "düzenle" çıkmasıydı. Şimdi yaptım onu. Yalnız resmin adını nereye yazacağım bilemedim. Resmin aşağısına almak istedim ama yukarıdaki css lerden etkileniyor ve bir türlü resmin aşağısına indiremedim.
PHP:
<style>

figure {
  float: left;
  position: relative;
  padding: 3px;
  margin-right: 15px;
  margin-bottom: 1.35em;
  background: #fff;
  -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.35);
  -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.35);
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.35);
}

figcaption {
  width: 266px;
  position: absolute;
  background: rgba(0,0,0,0.6);
  font-size: 1.2em;
  color: #fff;
  padding: 10px 16px;
  opacity: 0;
  left: 3px;
  bottom: -10%;
  -webkit-transition: all 0.44s ease;
  -moz-transition: all 0.44s ease;
  -o-transition: all 0.44s ease;
  transition: all 0.44s ease;
}

figcaption a { color: #cce1ef; }

figcaption a:hover { color: #a9cbe1; }

figure:hover figcaption { opacity: 1; bottom: 5px; }

figcaption.light {
  background: rgba(255,255,255,0.6);
  font-size: 1.2em;
  color: #444;
  -webkit-transition: all 0.44s ease;
  -moz-transition: all 0.44s ease;
  -o-transition: all 0.44s ease;
  transition: all 0.44s ease;
}

figcaption.light a { color: #60a7d7; }
figcaption.light a:hover { color: #4d92c0; }

#topbar { position: fixed; top: 0; width: 100%; height: 45px; z-index: 999; background: #1b1b1b; border-bottom: 1px solid #575656; padding-left: 35px; }
#topbar a { line-height: 45px; font-size: 1.4em; font-weight: bold; color: #fff; }

#wrapper { width: 1000px; margin: 0 auto; padding-top: 70px; }
#gallery { padding: 0px 15px; display: block; }

<!-- Yukarısı sil ve düzenle için -->


</style>

    <?php
    $resim = $db->query("SELECT * FROM resimlerekle ORDER BY cokluresimekle_id DESC LIMIT 3");
    ?>

    <?php foreach ($resim as $resimkoy) { ?>

    <!-- <div style="border:1px solid black; height:50px; color:white; line-height:50px; text-align:center;"><?php /* echo $resimkoy["cokluresimekle_baslik"]; */ ?></div> -->
   
    <!--
    <div class="row no-gutters" style="border:1px solid black;">
    -->
   
    <div>
    <figure>
    <img style="max-width:266px; height:auto;" <?php echo $resimkoy; ?> src='../../../upload/cokluresim/<?php echo $resimkoy["cokluresimekle_resim"]; ?>' /><br>
    <figcaption>
    <div style="float:left;">Sil</div>
    <div style="float:right;">Düzenle</div>
    </figcaption>
    </figure>
    </div>
   
    <div style="border:1px solid black; text-align:center; color:#fff;"><a href='index.php'><?php echo $resimkoy["cokluresimekle_baslik"]; } ?></a></div>

hazır kullandığın css dosyaları var ise, kendi css dosyanı sayfaya en son dahil etmelisin.örneğin bootstrap css dosyasından önce dahil edersen, ve aynı classa farklı özellik vermek istesende bootstrap daha baskın olacaktır.
 

mali2012

Asistan
Katılım
10 Eyl 2012
Mesajlar
145
Reaksiyon puanı
9
Puanları
18
Arkadaşlar ilk resmi normal bir şekilde koyabiliyorum. 1. resme bakabilirsiniz. Sonra ikinci resmi koyduğumda da resimler birbiri içine giriyor. Karmaşık hali için de 2. resme bakabilirsiniz.
Ben resimler yan yana responsive şeklinde sıralansın istiyorum.
adsiz 6.jpg

adsiz 7.jpg

PHP:
<style>

figure {
  width:33%;
  float: left;
  position: relative;
  padding-top: 3px;
  padding-right: 3px;
  padding-bottom: 3px;
  margin-right: 15px;
  margin-bottom: 1.35em;
  background: #fff;
  -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.35);
  -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.35);
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.35);
 
}
 
figcaption {
  width:99%;
  position: absolute;
  background: rgba(0,0,0,0.6);
  font-size: 1.2em;
  color: #fff;
  padding: 10px 16px;
  opacity: 0;
 
  bottom: 0%;
  -webkit-transition: all 0.44s ease;
  -moz-transition: all 0.44s ease;
  -o-transition: all 0.44s ease;
  transition: all 0.44s ease;
}

figcaption a { color: #cce1ef; }

figcaption a:hover { color: #a9cbe1; }
 
figure:hover figcaption { opacity: 1; bottom: 5px; }
 
figcaption.light {
  background: rgba(255,255,255,0.6);
  font-size: 1.2em;
  color: #444;
  -webkit-transition: all 0.44s ease;
  -moz-transition: all 0.44s ease;
  -o-transition: all 0.44s ease;
  transition: all 0.44s ease;
}

figcaption.light a { color: #60a7d7; }
figcaption.light a:hover { color: #4d92c0; }

#topbar { position: fixed; top: 0; width: 100%; height: 45px; z-index: 999; background: #1b1b1b; border-bottom: 1px solid #575656; padding-left: 35px; }
#topbar a { line-height: 45px; font-size: 1.4em; font-weight: bold; color: #fff; }
 
#wrapper { width: 1000px; margin: 0 auto; padding-top: 70px; }
#gallery { padding: 0px 15px; display: block; }


.baslik {
    height:35px;
    line-height:35px;
    text-align:center;
    border:1px solid black;
}


<!-- Yukarısı sil ve düzenle için -->


</style>

    <?php
    $resim = $db->query("SELECT * FROM resimlerekle ORDER BY cokluresimekle_id DESC LIMIT 3");
    ?>

    <?php foreach ($resim as $resimkoy) { ?>

    
    <figure>
    <img style="width:100%;" <?php echo $resimkoy; ?> src='../../../upload/cokluresim/<?php echo $resimkoy["cokluresimekle_resim"]; ?>' /><br>
    <div style="text-align:center;"><?php echo $resimkoy["cokluresimekle_baslik"]; } ?></div>
    <figcaption>
    <div style="float:left;">Sil</div>
    <div style="float:right;">Düzenle</div>
    </figcaption>
    </figure>
 

mali2012

Asistan
Katılım
10 Eyl 2012
Mesajlar
145
Reaksiyon puanı
9
Puanları
18
Arkadaşlar merhaba. Resimleri yan yana koydum. Resimlere "margin-left" ve "padding-left" ile aralarına boşluk verirken ilk resime de boşluk veriyor. Resimleri veritabanından çekiyorum. 2. ve 3. resme boşluk versin ama ilk resme vermesin "margin". Eklediğim fotoğrafa bakabilirsiniz.
HTML:
<style>

    figure {
      width:32.5%;
      float: left;
      position: relative;
      padding-top: 3px;
      margin-left:7px;
      padding-bottom: 3px;
      margin-bottom: 1.35em;
      background: #fff;
      -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.35);
      -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.35);
      box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.35);
      
    }
    
    figcaption {
      width:99%;
      position: absolute;
      background: rgba(0,0,0,0.6);
      font-size: 1.2em;
      color: #fff;
      padding: 10px 16px;
      opacity: 0;
      
      bottom: 0%;
      -webkit-transition: all 0.44s ease;
      -moz-transition: all 0.44s ease;
      -o-transition: all 0.44s ease;
      transition: all 0.44s ease;
    }

    figcaption a { color: #cce1ef; }

    figcaption a:hover { color: #a9cbe1; }
    
    figure:hover figcaption { opacity: 1; bottom: 5px; }
    
    figcaption.light {
      background: rgba(255,255,255,0.6);
      font-size: 1.2em;
      color: #444;
      -webkit-transition: all 0.44s ease;
      -moz-transition: all 0.44s ease;
      -o-transition: all 0.44s ease;
      transition: all 0.44s ease;
    }

    figcaption.light a { color: #60a7d7; }
    figcaption.light a:hover { color: #4d92c0; }

    #topbar { position: fixed; top: 0; width: 100%; height: 45px; z-index: 999; background: #1b1b1b; border-bottom: 1px solid #575656; padding-left: 35px; }
    #topbar a { line-height: 45px; font-size: 1.4em; font-weight: bold; color: #fff; }
    
    #wrapper { width: 1000px; margin: 0 auto; padding-top: 70px; }
    #gallery { padding: 0px 15px; display: block; }
    

<!-- Yukarısı sil ve düzenle için -->


</style>

    <?php
    $resim = $db->query("SELECT * FROM resimlerekle ORDER BY cokluresimekle_id DESC LIMIT 3");
    ?>

    <?php foreach ($resim as $resimkoy) { ?>

    
    <figure>
    <img style="width:100%;" <?php echo $resimkoy; ?> src='../../../upload/cokluresim/<?php echo $resimkoy["cokluresimekle_resim"]; ?>' /><br>
    <figcaption>
    <div style="float:left;">Sil</div>
    <div style="float:right;">Düzenle</div>
    </figcaption>
    </figure>
    <?php } ?>
 

Ekli dosyalar

  • adsiz 9.jpg
    adsiz 9.jpg
    124 KB · Görüntüleme: 124

chnkyn

Öğrenci
Katılım
11 Ocak 2018
Mesajlar
85
Reaksiyon puanı
14
Puanları
8
Yaş
30
Öncelikle image'lere bir class vermelisin.Css tarafında erişmek için kapsayıcı elemanına da bir class vermelisin.

Örneğin :
<figure class="slider">
<img class="slider__item">

şeklinde.Her yeni projede yeniden css yazmak zor.
Ayrıca bu elemanlara css özelliklerini style üzerinden verme,kod karmaşıklığı oluşur.Mümkün mertebe harici css dosyası kullan.

senin sorunun ise şöyle çözülebilir.

//Önce tüm imagelere/itemlere margin ve padding ver.
.slider .slider__item{
padding:1rem;
margin:1rem;
}

//sonra sadece ilkinin margin ve paddingini silmek istersen ( :first-child )
.slider .slider__item:first-child{
padding:0px;
margin:0px;
}
 

mali2012

Asistan
Katılım
10 Eyl 2012
Mesajlar
145
Reaksiyon puanı
9
Puanları
18
Sizin dediğiniz şekilde yaptım ama sonuç şöyle. Yalnız benim kaymamasını istediğim resim üçüncü resim. O yüzden "third-child" olarak yaptım.
 

Ekli dosyalar

  • adsiz 10.jpg
    adsiz 10.jpg
    115.9 KB · Görüntüleme: 172

chnkyn

Öğrenci
Katılım
11 Ocak 2018
Mesajlar
85
Reaksiyon puanı
14
Puanları
8
Yaş
30
third-child diye bir seçici yok.eğer son eleman ise :last-child kullanabilirsin
 

mali2012

Asistan
Katılım
10 Eyl 2012
Mesajlar
145
Reaksiyon puanı
9
Puanları
18
Evet :) "third-child" yok. Yalnız bu seferde şöyle oldu.
Mesaj otomatik birleştirildi:

Bu arada ilk resim en sağdaki, ikincisi ortadaki, üçüncüsü en soldaki.
 

Ekli dosyalar

  • adsiz 12.jpg
    adsiz 12.jpg
    127.8 KB · Görüntüleme: 128
Son düzenleme:

chnkyn

Öğrenci
Katılım
11 Ocak 2018
Mesajlar
85
Reaksiyon puanı
14
Puanları
8
Yaş
30
yazdığım yorumu silemedim bi türlü
 

mali2012

Asistan
Katılım
10 Eyl 2012
Mesajlar
145
Reaksiyon puanı
9
Puanları
18
Arkadaşlar şu resimleri yan yana olacak şekilde nasıl getireceğim. Kenarlara tam olarak yaslanmış şekilde.
CSS:
    <style>

    figure {
      float: left;
      position: relative;
      padding-top: 3px;
      padding-bottom: 3px;
      margin-bottom: 1.35em;
      background:#ef8b8b;
      -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.35);
      -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.35);
      box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.35);
     
    }

   
   
    figcaption {
      width:33.33%;
      position: absolute;
      background: rgba(0,0,0,0.6);
      font-size: 1.2em;
      color: #fff;
      padding: 10px 16px;
      opacity: 0;
      bottom: 0%;
      -webkit-transition: all 0.44s ease;
      -moz-transition: all 0.44s ease;
      -o-transition: all 0.44s ease;
      transition: all 0.44s ease;
    }

    figcaption a { color: #cce1ef; }

    figcaption a:hover { color: #a9cbe1; }
   
    figure:hover figcaption { opacity: 1; bottom: 5px; }
   
    figcaption.light {
      background: rgba(255,255,255,0.6);
      font-size: 1.2em;
      color: #444;
      -webkit-transition: all 0.44s ease;
      -moz-transition: all 0.44s ease;
      -o-transition: all 0.44s ease;
      transition: all 0.44s ease;
    }

    figcaption.light a { color: #60a7d7; }
    figcaption.light a:hover { color: #4d92c0; }

    #topbar { position: fixed; top: 0; width: 100%; height: 45px; z-index: 999; background: #1b1b1b; border-bottom: 1px solid #575656; padding-left: 35px; }
    #topbar a { line-height: 45px; font-size: 1.4em; font-weight: bold; color: #fff; }
   
    #wrapper { width: 1000px; margin: 0 auto; padding-top: 70px; }
    #gallery { padding: 0px 15px; display: block; }  

    <!-- Yukarısı sil ve düzenle için -->


</style>

    <?php
    $resim = $db->query("SELECT * FROM resimlerekle ORDER BY cokluresimekle_id DESC LIMIT 3");
    ?>

    <?php foreach ($resim as $resimkoy) { ?>
   
    <div class="row col-lg-12">
    <figure class="col-lg-4">
    <img style="width:100%;" <?php echo $resimkoy; ?> src='../../../upload/cokluresim/<?php echo $resimkoy["cokluresimekle_resim"]; ?>' /><br>
    <figcaption>
    <div style="float:left;">Sil</div>
    <div style="float:right;">Düzenle</div>
    </figcaption>
    </figure>
    </div>

    <?php } ?>
 

Ekli dosyalar

  • adsiz 13.jpg
    adsiz 13.jpg
    61.7 KB · Görüntüleme: 109

chnkyn

Öğrenci
Katılım
11 Ocak 2018
Mesajlar
85
Reaksiyon puanı
14
Puanları
8
Yaş
30
figure elemanı varsayılan olarak display:block özelliğine sahiptir.Yani her biri 1 satır (tüm genişlik) yer kaplar.
display:inline-block
float:left

verirsen kaplayabileceği alan kadar yer tutar.
Ekstra
width:33% verirsen her biri 3 te 1 yer kaplar.
 

quaresma71

Asistan
Katılım
22 Haz 2017
Mesajlar
430
Reaksiyon puanı
183
Puanları
43
Yaş
51
Hiç colon row işine girmeden img taglerine display: inline-block stili uygulasan ve max-width tanimlasan responsive olması için daha kolay olur
 

mali2012

Asistan
Katılım
10 Eyl 2012
Mesajlar
145
Reaksiyon puanı
9
Puanları
18
Kodu şu hale getirebildim. Şimdi bana en soldaki yani veritabanından çektiğim üçüncü resmi "padding-left:0" vermem lazım. Yaptım ama olmadı.
CSS:
    <style>

    figure {
      width:33.33%;
      float: left;
      position: relative;
      padding-top: 3px;
      padding-bottom: 3px;
      margin-bottom: 1.35em;
      background:#ef8b8b;
      -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.35);
      -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.35);
      box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.35);
      
    }
    
    figcaption {
      width:100%;
      position: absolute;
      background: rgba(0,0,0,0.6);
      font-size: 1.2em;
      color: #fff;
      padding: 10px 16px;
      opacity: 0;
      bottom: 0%;
      -webkit-transition: all 0.44s ease;
      -moz-transition: all 0.44s ease;
      -o-transition: all 0.44s ease;
      transition: all 0.44s ease;
    }

    figcaption a { color: #cce1ef; }

    figcaption a:hover { color: #a9cbe1; }
    
    figure:hover figcaption { opacity: 1; bottom: 5px; }
    
    figcaption.light {
      background: rgba(255,255,255,0.6);
      font-size: 1.2em;
      color: #444;
      -webkit-transition: all 0.44s ease;
      -moz-transition: all 0.44s ease;
      -o-transition: all 0.44s ease;
      transition: all 0.44s ease;
    }

    figcaption.light a { color: #60a7d7; }
    figcaption.light a:hover { color: #4d92c0; }

    #topbar { position: fixed; top: 0; width: 100%; height: 45px; z-index: 999; background: #1b1b1b; border-bottom: 1px solid #575656; padding-left: 35px; }
    #topbar a { line-height: 45px; font-size: 1.4em; font-weight: bold; color: #fff; }
    
    #wrapper { width: 1000px; margin: 0 auto; padding-top: 70px; }
    #gallery { padding: 0px 15px; display: block; }   

    @media screen and (max-width: 768px) {
    figure {
    width:100%;
    }
    }
    
    @media screen and (min-width: 992px) {
    figure {
    width:33.33%;
    
    }
    }
    
    @media screen and (min-width: 1200px) {
    figure {
    width:33.33%;
    }
    }
    
    @media screen and (min-width: 1200px) {
    figure img {
    padding-left:2%;
    }
    }
    
    @media screen and (min-width: 1200px) {
    figure img:nth-last-child(1) {
    padding-left:0%;
    }
    }
    
    <!-- Yukarısı sil ve düzenle için -->

</style>

    <?php
    $resim = $db->query("SELECT * FROM resimlerekle ORDER BY cokluresimekle_id DESC LIMIT 3");
    ?>

    <?php foreach ($resim as $resimkoy) { ?>
    
    <figure class="row no-gutters">
    <img style="width:100%;" <?php echo $resimkoy; ?> src='../../../upload/cokluresim/<?php echo $resimkoy["cokluresimekle_resim"]; ?>' />
    <figcaption>
    <div style="float:left;">Sil</div>
    <div style="float:right;">Düzenle</div>
    </figcaption>
    </figure>

    <?php } ?>
 

Ekli dosyalar

  • adsiz 15.jpg
    adsiz 15.jpg
    129.7 KB · Görüntüleme: 91

chnkyn

Öğrenci
Katılım
11 Ocak 2018
Mesajlar
85
Reaksiyon puanı
14
Puanları
8
Yaş
30
Css seçicileri iyi çalışman lazım.

-ilk elemanı seçme elemanadi:first-child { css kodları }
-son elemanı seçme elemanadi:last-child{ css kodları }

-n. elemanı seçme elemanadi:nth-child(n) { css kodları }

Buna dayanarak daima son elemanın paddingini silmek istiyorsan

figure:last-child { padding-left:0px }

kullanabilirsin.

3.elemana uygulamak istiyorsan
figure:nth-child(3) { padding-left:0px }


-Dikkat etmen gereken nokta, sayfada başka figure tagları var ise onlarda etkilenir.Bunun için figure taglarını bir div (container) içine al ve ona bir class uygula.
-Css seçicilerde id yerine her zaman class kullan.
-Css class verme kuralları için BEM teknolojisini kullan.(önerilir)
 

mali2012

Asistan
Katılım
10 Eyl 2012
Mesajlar
145
Reaksiyon puanı
9
Puanları
18
Arkadaşlar, kodları şu şekilde düzenledim. Artık yan yana geliyor. Yalnız şöyle bir problemim var. Aynı resmi eklediğimde herhangi bir problem yok ama santimetre olarak aynı, çözünürlük olarak aynı olan farklı resimler eklediğimde resimdeki gibi görüntü kayıyor.
Kod:
<style>
    .resim {
    position:relative;
    max-width:33.33%;
    float:left;
    background-color:#61acb7;
    -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.35);
    -moz-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.35);
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.35);
    }
    
    .resim img {
    max-width:100%;
    padding:1%;
    }
    
    @media screen and (max-width: 768px) {
    .resim {
    max-width:100%;
    margin-top:10px;
    }
    }
    
    @media screen and (max-width: 768px) {
    .resim:nth-child(2) {
    max-width:100%;
    margin-top:0px;
    padding:0px;
    }
    }
    
    @media screen and (min-width: 992px) {
    .resim {
    max-width:33.33%;
    
    }
    }
    
    @media screen and (min-width: 1200px) {
    .resim {
    max-width:33.33%;
    }
    }
    
    @media screen and (min-width: 1200px) {
    .resim img {
    padding:1% 1%;
    }
    }
    
    @media screen and (min-width: 1200px) {
    .resim:nth-child(4) {
    max-width:33.33%;
    margin-top:10px;
    }
    }
    
    .resimyazisi {
    height:30px;
    line-height:30px;
    color:#fff;
    text-align:center;
    }
    
    .silduzenle {
    background-color:#000;
    color:#fff;
    opacity:0.6;
    max-width:100%;
    height:35px;
    line-height:35px;
    }
    
    .sil {
    float:left;
    padding-left:40px;
    }
    
    .duzenle {
    float:right;
    padding-right:40px;
    }
    
    <!-- Yukarısı sil ve düzenle için -->


</style>

    <?php
    $resim = $db->query("SELECT * FROM resimlerekle ORDER BY cokluresimekle_id DESC LIMIT 6");
    ?>

    <?php foreach ($resim as $resimkoy) { ?>
    

    <div class="resim">
    <img <?php echo $resimkoy; ?> src='../../../upload/cokluresim/<?php echo $resimkoy["cokluresimekle_resim"]; ?>' />
    <div class="resimyazisi"><?php echo $resimkoy["cokluresimekle_baslik"]; ?></div>   
    <div class="silduzenle">
    <div class="sil">Sil</div>
    <div class="duzenle">Düzenle</div>
    </div>
    </div>
    <?php } ?>
 

Ekli dosyalar

  • adsiz 16.jpg
    adsiz 16.jpg
    121.6 KB · Görüntüleme: 122

chnkyn

Öğrenci
Katılım
11 Ocak 2018
Mesajlar
85
Reaksiyon puanı
14
Puanları
8
Yaş
30
height ve max-height özellikleri ekleyebilirsin
 

mali2012

Asistan
Katılım
10 Eyl 2012
Mesajlar
145
Reaksiyon puanı
9
Puanları
18
6 tane resmi yanyana ekledim. 4. resmi sildiğimde veritabanından ve eklenmiş olduğu klasörden şunun gibi bir görüntüye sebebiyet veriyor. Ne yapmam lazım acaba? Yani ardı sıra eklenmiyor resimler. Silinenin yeri boş kalıyor.
 

Ekli dosyalar

  • adsiz 17.jpg
    adsiz 17.jpg
    85.9 KB · Görüntüleme: 55

chnkyn

Öğrenci
Katılım
11 Ocak 2018
Mesajlar
85
Reaksiyon puanı
14
Puanları
8
Yaş
30
:) TEAMVIEWER ILE BIRINDEN YARDIM ISTE.
 
Üst