Resimler Yan yana Sıralanmıyor

mali2012 · 4 Eylül 2020

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: 4 Eylül 2020

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>

chnkyn · 4 Eylül 2020

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ı · 4 Eylül 2020

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 · 6 Eylül 2020

"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 · 7 Eylül 2020

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>

chnkyn · 7 Eylül 2020

mali2012 dedi ki:

"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: 7 Eylül 2020

mali2012 dedi ki:

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 · 7 Eylül 2020

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.

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 · 9 Eylül 2020

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 } ?>

chnkyn · 9 Eylül 2020

Ö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 · 9 Eylül 2020

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.

chnkyn · 9 Eylül 2020

third-child diye bir seçici yok.eğer son eleman ise :last-child kullanabilirsin

mali2012 · 10 Eylül 2020

Evet

"third-child" yok. Yalnız bu seferde şöyle oldu.

Mesaj otomatik birleştirildi: 10 Eylül 2020

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

chnkyn · 10 Eylül 2020

yazdığım yorumu silemedim bi türlü

mali2012 · 11 Eylül 2020

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 } ?>

chnkyn · 11 Eylül 2020

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 · 11 Eylül 2020

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 · 11 Eylül 2020

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 } ?>

chnkyn · 11 Eylül 2020

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 · 13 Eylül 2020

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 } ?>

chnkyn · 13 Eylül 2020

height ve max-height özellikleri ekleyebilirsin

mali2012 · 13 Eylül 2020

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.

chnkyn · 13 Eylül 2020

TEAMVIEWER ILE BIRINDEN YARDIM ISTE.

Resimler Yan yana Sıralanmıyor

Bu konuyu okuyanlar

Asistan

Ekli dosyalar

Öğrenci

Asistan

Asistan

Asistan

Ekli dosyalar

Öğrenci

Asistan

Asistan

Ekli dosyalar

Öğrenci

Asistan

Ekli dosyalar

Öğrenci

Asistan

Ekli dosyalar

Öğrenci

Asistan

Ekli dosyalar

Öğrenci

Asistan

Asistan

Ekli dosyalar

Öğrenci

Asistan

Ekli dosyalar

Öğrenci

Asistan

Ekli dosyalar

Öğrenci

Benzer konular