(YARDIM HTML) Ürünün Sağına Buton Eklemek İstiyorum.

08-03-2019, 10:27:01

#1

Glare

Merhabalar.
html sitemde ürünün sağ tarafınına "İncele" butonu eklemek istiyorum ancak istediğim şekili almıyor.
html konusunda bilgili arkadaşlar yardımcı olabilirmi.
08-03-2019, 10:49:31

#2

~~UgurCelik~~

Üyeliği durduruldu

Yanlış yönlendirmek istemem çok emin değilim ama CSS ile o ilgili Div'in içindekileri sola yaslaman lazım.

08-03-2019, 10:55:16

Price class'ının içini;

<div class="price">
  <center><h5>Grand Theft Auto 5</h5></center>


<table>
<tbody><tr>
<td>
<div align="Left"><del>120 TL</del></div>
</td>
<td>
<div align="Right"><h3>50 TL</h3></div>
</td>
</tr>
</tbody>

   <a href="#" class="btn btn-white">İncele</a></table>
<br>

   </div>

Bununla değiştir.

Css'de de;

.btn-white {
    background-color: #252628;
    position: absolute;
    right: 6%;
    padding: 6px;
    color: #fff;
    transition: .5s;
   
   
   
}

.btn-white:hover {
    background-color: #b5b5b5;
}

Bunu eklersen sağ tarafa dayalı bir bicimde buton olustacak her oyun icin

08-03-2019, 11:37:10

#4

Glare
UgurCelik adlı üyeden alıntı: mesajı görüntüle

Yanlış yönlendirmek istemem çok emin değilim ama CSS ile o ilgili Div'in içindekileri sola yaslaman lazım.

Aynen öyleymiş hocam
uA_emrezyt adlı üyeden alıntı: mesajı görüntüle
Price class'ının içini;

<div class="price"> <center><h5>Grand Theft Auto 5</h5></center> <table> <tbody><tr> <td> <div align="Left"><del>120 TL</del></div> </td> <td> <div align="Right"><h3>50 TL</h3></div> </td> </tr> </tbody> <a href="#" class="btn btn-white">İncele</a></table> <br> </div>
Bununla değiştir.

Css'de de;

.btn-white { background-color: #252628; position: absolute; right: 6%; padding: 6px; color: #fff; transition: .5s; } .btn-white:hover { background-color: #b5b5b5; }
Bunu eklersen sağ tarafa dayalı bir bicimde buton olustacak her oyun icin
Süpersiniz hocam tek seferde çözüldü
Birde şu ürünlerin dışına nasıl gölge verebilirim birbirinden ayırmak için

08-03-2019, 12:02:19

uA_emrezyt

Glare adlı üyeden alıntı: mesajı görüntüle

Süpersiniz hocam tek seferde çözüldü

Birde şu ürünlerin dışına nasıl gölge verebilirim birbirinden ayırmak için

Content class'ının yanına bir class eklerseniz;

<div class="shadprice content">
                                                   
 
      <div class=" content-overlay"></div>
   <img class="content-image img-fluid d-block mx-auto" src="./Shop_files/gta5.jpg" alt="gta5">
      <div class="content-details fadeIn-bottom">
      </div>
 
  <div class=" price">
  <center><h5>Grand Theft Auto 5</h5></center>


<table>
<tbody><tr>
<td>
<div align="Left"><del>120 TL</del></div>
</td>
<td>
<div align="Right"><h3>50 TL</h3></div>
</td>
</tr>
</tbody>

                              <a href="#" class="btn btn-white">İncele</a></table>
<br>
                                                        </div>
     
</div>

Bu sekilde shadprice adında class ekleyip;

.shadprice  {
 
      box-shadow: 0 0 2px rgba(0, 0, .3);
   
   
}

Bu sekilde de css düzenlemelerini yaparsanız gölge eklenir

08-03-2019, 12:16:23

Glare

uA_emrezyt adlı üyeden alıntı: mesajı görüntüle

Content class'ının yanına bir class eklerseniz;

<div class="shadprice content">
                                                  
 
      <div class=" content-overlay"></div>
   <img class="content-image img-fluid d-block mx-auto" src="./Shop_files/gta5.jpg" alt="gta5">
      <div class="content-details fadeIn-bottom">
      </div>
 
  <div class=" price">
  <center><h5>Grand Theft Auto 5</h5></center>


<table>
<tbody><tr>
<td>
<div align="Left"><del>120 TL</del></div>
</td>
<td>
<div align="Right"><h3>50 TL</h3></div>
</td>
</tr>
</tbody>

                              <a href="#" class="btn btn-white">İncele</a></table>
<br>
                                                        </div>
    
</div>

Bu sekilde shadprice adında class ekleyip;

.shadprice  {
 
      box-shadow: 0 0 2px rgba(0, 0, .3);
  
  
}

Bu sekilde de css düzenlemelerini yaparsanız gölge eklenir

Sizin söylediğiniz div'de çalışmadı bir üstteki div'de çalıştı ama bu seferde çerçeve ürünün kendisinden büyük oldu.

08-03-2019, 12:22:23

uA_emrezyt

Glare adlı üyeden alıntı: mesajı görüntüle

Sizin söylediğiniz div'de çalışmadı bir üstteki div'de çalıştı ama bu seferde çerçeve ürünün kendisinden büyük oldu.

<div class="col-lg-3 col-md-6 single-product">
                                                    <div class="shadprice content">
                                                   
 
      <div class=" content-overlay"></div>
   <img class="content-image img-fluid d-block mx-auto" src="./Shop_files/gta5.jpg" alt="gta5">
      <div class="content-details fadeIn-bottom">
      </div>
 
  <div class=" price">
  <center><h5>Grand Theft Auto 5</h5></center>


<table>
<tbody><tr>
<td>
<div align="Left"><del>120 TL</del></div>
</td>
<td>
<div align="Right"><h3>50 TL</h3></div>
</td>
</tr>
</tbody>

                              <a href="#" class="btn btn-white">İncele</a></table>
<br>
                                                        </div>
     
</div>
                        </div>

Col kısmını komple boyle degistirirseniz sonuc alacaksınız, bendeki görüntü bu sekilde:

https://prnt.sc/muzizz

08-03-2019, 12:46:52

Glare

uA_emrezyt adlı üyeden alıntı: mesajı görüntüle

<div class="col-lg-3 col-md-6 single-product">
                                                    <div class="shadprice content">
                                                  
 
      <div class=" content-overlay"></div>
   <img class="content-image img-fluid d-block mx-auto" src="./Shop_files/gta5.jpg" alt="gta5">
      <div class="content-details fadeIn-bottom">
      </div>
 
  <div class=" price">
  <center><h5>Grand Theft Auto 5</h5></center>


<table>
<tbody><tr>
<td>
<div align="Left"><del>120 TL</del></div>
</td>
<td>
<div align="Right"><h3>50 TL</h3></div>
</td>
</tr>
</tbody>

                              <a href="#" class="btn btn-white">İncele</a></table>
<br>
                                                        </div>
    
</div>
                        </div>

Col kısmını komple boyle degistirirseniz sonuc alacaksınız, bendeki görüntü bu sekilde:

https://prnt.sc/muzizz

Süper oldu hocam.
Ancak şimdi 4.üründen sonra alt satıra geçince biçim bozuluyor.
Sizide yordum kusura bakmayın zincirleme hata oluşturdum resmen

08-03-2019, 13:04:25

uA_emrezyt

Glare adlı üyeden alıntı: mesajı görüntüle

Süper oldu hocam.
Ancak şimdi 4.üründen sonra alt satıra geçince biçim bozuluyor.
Sizide yordum kusura bakmayın zincirleme hata oluşturdum resmen

<section class="women-product-area section-gap" id="women">
<div class="container">
<div class="countdown-content pb-40">
<div class="title text-center">
<h1 class="mb-10">OYUNLAR</h1>
<a href="https://gamente.com/oyunlar.html#" class="btn btn btn-sm btn-lg btn-primary" style="width:19.7%">TÜM OYUNLAR</a>
<a href="https://gamente.com/oyunlar.html#" class="btn btn btn-sm btn-lg btn-primary" style="width:19.7%">STEAM OYUNLARI</a>
<a href="https://gamente.com/oyunlar.html#" class="btn btn btn-sm btn-lg btn-primary" style="width:19.7%">ORİGİN OYUNLARI</a>
<a href="https://gamente.com/oyunlar.html#" class="btn btn btn-sm btn-lg btn-primary" style="width:19.7%">UPLAY OYUNLARI</a>
<a href="https://gamente.com/oyunlar.html#" class="btn btn btn-sm btn-lg btn-primary" style="width:19.7%">OYUN PAKETLERİ</a>

</div>

</div>
<div class="row">

<div class="col-lg-3 col-md-6 single-product">
                                                    <div class="shadprice content">
                                                   
 
      <div class=" content-overlay"></div>
   <img class="content-image img-fluid d-block mx-auto" src="./Shop_files/gta5.jpg" alt="gta5">
      <div class="content-details fadeIn-bottom">
      </div>
 
  <div class=" price">
  <center><h5>Grand Theft Auto 5</h5></center>


<table>
<tbody><tr>
<td>
<div align="Left"><del>120 TL</del></div>
</td>
<td>
<div align="Right"><h3>50 TL</h3></div>
</td>
</tr>
</tbody>

                              <a href="#" class="btn btn-white">İncele</a></table>
<br>
                                                        </div>
     
</div>
                        </div>
<div class="col-lg-3 col-md-6 single-product">
                                                    <div class="shadprice content">
                                                   
 
      <div class=" content-overlay"></div>
   <img class="content-image img-fluid d-block mx-auto" src="./Shop_files/gta5.jpg" alt="gta5">
      <div class="content-details fadeIn-bottom">
      </div>
 
  <div class=" price">
  <center><h5>Grand Theft Auto 5</h5></center>


<table>
<tbody><tr>
<td>
<div align="Left"><del>120 TL</del></div>
</td>
<td>
<div align="Right"><h3>50 TL</h3></div>
</td>
</tr>
</tbody>

                              <a href="#" class="btn btn-white">İncele</a></table>
<br>
                                                        </div>
     
</div>
                        </div>
<div class="col-lg-3 col-md-6 single-product">
                                                    <div class="shadprice content">
                                                   
 
      <div class=" content-overlay"></div>
   <img class="content-image img-fluid d-block mx-auto" src="./Shop_files/gta5.jpg" alt="gta5">
      <div class="content-details fadeIn-bottom">
      </div>
 
  <div class=" price">
  <center><h5>Grand Theft Auto 5</h5></center>


<table>
<tbody><tr>
<td>
<div align="Left"><del>120 TL</del></div>
</td>
<td>
<div align="Right"><h3>50 TL</h3></div>
</td>
</tr>
</tbody>

                              <a href="#" class="btn btn-white">İncele</a></table>
<br>
                                                        </div>
     
</div>
                        </div>
<div class="col-lg-3 col-md-6 single-product">
                                                    <div class="shadprice content">
                                                   
 
      <div class=" content-overlay"></div>
   <img class="content-image img-fluid d-block mx-auto" src="./Shop_files/gta5.jpg" alt="gta5">
      <div class="content-details fadeIn-bottom">
      </div>
 
  <div class=" price">
  <center><h5>Grand Theft Auto 5</h5></center>


<table>
<tbody><tr>
<td>
<div align="Left"><del>120 TL</del></div>
</td>
<td>
<div align="Right"><h3>50 TL</h3></div>
</td>
</tr>
</tbody>

                              <a href="#" class="btn btn-white">İncele</a></table>
<br>
                                                        </div>
     
</div>
                        </div>

</div>
<br><br>

<div class="row">

<div class="col-lg-3 col-md-6 single-product">
                                                    <div class="shadprice content">
                                                   
 
      <div class=" content-overlay"></div>
   <img class="content-image img-fluid d-block mx-auto" src="./Shop_files/gta5.jpg" alt="gta5">
      <div class="content-details fadeIn-bottom">
      </div>
 
  <div class=" price">
  <center><h5>Grand Theft Auto 5</h5></center>


<table>
<tbody><tr>
<td>
<div align="Left"><del>120 TL</del></div>
</td>
<td>
<div align="Right"><h3>50 TL</h3></div>
</td>
</tr>
</tbody>

                              <a href="#" class="btn btn-white">İncele</a></table>
<br>
                                                        </div>
     
</div>
                        </div>
<div class="col-lg-3 col-md-6 single-product">
                                                    <div class="shadprice content">
                                                   
 
      <div class=" content-overlay"></div>
   <img class="content-image img-fluid d-block mx-auto" src="./Shop_files/gta5.jpg" alt="gta5">
      <div class="content-details fadeIn-bottom">
      </div>
 
  <div class=" price">
  <center><h5>Grand Theft Auto 5</h5></center>


<table>
<tbody><tr>
<td>
<div align="Left"><del>120 TL</del></div>
</td>
<td>
<div align="Right"><h3>50 TL</h3></div>
</td>
</tr>
</tbody>

                              <a href="#" class="btn btn-white">İncele</a></table>
<br>
                                                        </div>
     
</div>
                        </div>
<div class="col-lg-3 col-md-6 single-product">
                                                    <div class="shadprice content">
                                                   
 
      <div class=" content-overlay"></div>
   <img class="content-image img-fluid d-block mx-auto" src="./Shop_files/gta5.jpg" alt="gta5">
      <div class="content-details fadeIn-bottom">
      </div>
 
  <div class=" price">
  <center><h5>Grand Theft Auto 5</h5></center>


<table>
<tbody><tr>
<td>
<div align="Left"><del>120 TL</del></div>
</td>
<td>
<div align="Right"><h3>50 TL</h3></div>
</td>
</tr>
</tbody>

                              <a href="#" class="btn btn-white">İncele</a></table>
<br>
                                                        </div>
     
</div>
                        </div>
<div class="col-lg-3 col-md-6 single-product">
                                                    <div class="shadprice content">
                                                   
 
      <div class=" content-overlay"></div>
   <img class="content-image img-fluid d-block mx-auto" src="./Shop_files/gta5.jpg" alt="gta5">
      <div class="content-details fadeIn-bottom">
      </div>
 
  <div class=" price">
  <center><h5>Grand Theft Auto 5</h5></center>


<table>
<tbody><tr>
<td>
<div align="Left"><del>120 TL</del></div>
</td>
<td>
<div align="Right"><h3>50 TL</h3></div>
</td>
</tr>
</tbody>

                              <a href="#" class="btn btn-white">İncele</a></table>
<br>
                                                        </div>
     
</div>
                        </div>
</div>
<br><br>
<div class="row">

<div class="col-lg-3 col-md-6 single-product">
                                                    <div class="shadprice content">
                                                   
 
      <div class=" content-overlay"></div>
   <img class="content-image img-fluid d-block mx-auto" src="./Shop_files/gta5.jpg" alt="gta5">
      <div class="content-details fadeIn-bottom">
      </div>
 
  <div class=" price">
  <center><h5>Grand Theft Auto 5</h5></center>


<table>
<tbody><tr>
<td>
<div align="Left"><del>120 TL</del></div>
</td>
<td>
<div align="Right"><h3>50 TL</h3></div>
</td>
</tr>
</tbody>

                              <a href="#" class="btn btn-white">İncele</a></table>
<br>
                                                        </div>
     
</div>
                        </div>
<div class="col-lg-3 col-md-6 single-product">
                                                    <div class="shadprice content">
                                                   
 
      <div class=" content-overlay"></div>
   <img class="content-image img-fluid d-block mx-auto" src="./Shop_files/gta5.jpg" alt="gta5">
      <div class="content-details fadeIn-bottom">
      </div>
 
  <div class=" price">
  <center><h5>Grand Theft Auto 5</h5></center>


<table>
<tbody><tr>
<td>
<div align="Left"><del>120 TL</del></div>
</td>
<td>
<div align="Right"><h3>50 TL</h3></div>
</td>
</tr>
</tbody>

                              <a href="#" class="btn btn-white">İncele</a></table>
<br>
                                                        </div>
     
</div>
                        </div>
<div class="col-lg-3 col-md-6 single-product">
                                                    <div class="shadprice content">
                                                   
 
      <div class=" content-overlay"></div>
   <img class="content-image img-fluid d-block mx-auto" src="./Shop_files/gta5.jpg" alt="gta5">
      <div class="content-details fadeIn-bottom">
      </div>
 
  <div class=" price">
  <center><h5>Grand Theft Auto 5</h5></center>


<table>
<tbody><tr>
<td>
<div align="Left"><del>120 TL</del></div>
</td>
<td>
<div align="Right"><h3>50 TL</h3></div>
</td>
</tr>
</tbody>

                              <a href="#" class="btn btn-white">İncele</a></table>
<br>
                                                        </div>
     
</div>
                        </div>
<div class="col-lg-3 col-md-6 single-product">
                                                    <div class="shadprice content">
                                                   
 
      <div class=" content-overlay"></div>
   <img class="content-image img-fluid d-block mx-auto" src="./Shop_files/gta5.jpg" alt="gta5">
      <div class="content-details fadeIn-bottom">
      </div>
 
  <div class=" price">
  <center><h5>Grand Theft Auto 5</h5></center>


<table>
<tbody><tr>
<td>
<div align="Left"><del>120 TL</del></div>
</td>
<td>
<div align="Right"><h3>50 TL</h3></div>
</td>
</tr>
</tbody>

                              <a href="#" class="btn btn-white">İncele</a></table>
<br>
                                                        </div>
     
</div>
                        </div>
</div>
<br>


<br>
<br>
</div></section>

Tüm section'ın kodlarını bu sekilde yapıstırırsanız sorun kalmayacaktir, muhtemelen kopyalarken bir div'i silmeyi es gecmişsiniz 5. ürüne geçerken o yüzden olmuş sorun