Resimleri Ürünlerin Bittiği Yerden Başlatma
Merhaba arkadaşlar. Resme bakabilir misiniz.
Çok satılanlar butonunun arkasında yanyana 3 tane resim var. O resimleri ürünlerin aşağısından nasıl başlatabilirim. Her satırda 4 ürün olacak şekilde yerleştirdim. "margin-top" versem kiminde 8 ürün var kiminde 10 ürün var. 8 ürüne göre ayarlasam "kampanyalı ürünler" butonuna tıkladığımda 10 ürün varsa eğer, 9. ve 10. ürünün üzerine gelir. Ne yapmam lazım?
.degisikbilgiler-div {
display:flex;
justify-content:space-between;
width:100%;
height:500px;
}
.uzeri-kargobedava-div {
width:33%;
height:200px;
}
.uzeri-kargobedava-div img {
width:100%;
height:200px;
}
.guvenli-alisveris-div {
width:33%;
height:200px;
}
.guvenli-alisveris-div img {
width:100%;
height:200px;
}
.yediyirmidort-destek-div {
width:33%;
height:200px;
}
.yediyirmidort-destek-div img {
width:100%;
height:200px;
}
index.php kısmı
<div class="indexsayfasi-urunler">
<?php include "indexurunler.php"; ?>
</div>
<div class="degisikbilgiler-div">
<div class="uzeri-kargobedava-div">
<img src="images/degisikbilgiler/ucretsizkargo.jpg">
</div>
<div class="guvenli-alisveris-div">
<img src="images/degisikbilgiler/guvenlialisveris.jpg">
</div>
<div class="yediyirmidort-destek-div">
<img src="images/degisikbilgiler/yediyirmidortdestek.jpg">
</div>
</div>
Nerede nasıl kullanmam gerektiğini anlayamadım. Eksik anlatmış olmayayım. "indexsayfasi-digerbilgiler" div'ine "margin-top:1250px" verdim. Sayfa ilk açıldığında karşınıza çıkacak ilk ürünler "çok satanlar" ürünleri. Sayfa ilk açıldığında, sayfa aşağıdaki 1. resim gibi gözüküyor. "Yeni Ürünler" butonuna tıkladığınızda sayfa, aşağıdaki 2. resim gibi gözüküyor. Aşağıya eklediğim iki resme bakabilir misiniz?
"Yeni Ürünler" butonuna tıkladığımda "Güvenli Alışveriş", "7/24 Destek" kısmı çok aşağıda kalıyor. "margin-top" vermedeiğimde ise aşağıdaki 3. resimde görüldüğü şekilde oluyor. Çok karmaşık olur diye eklememiştim ama "indexurun.php" sayfasını ve css kodlarını da ekliyorum.
https://www.hizliresim.com/r8b53qd
https://www.hizliresim.com/3uwvw39
https://www.hizliresim.com/3h2atbx
"indexurunler.php sayfasına ait css kodları"
.urunlersayfasi-indexurunler-container-alani {
width:100%;
height:auto;
}
.tumbolumlerdiv {
position:absolute;
width:1140px;
margin-top:60px;
margin-left:0px;
}
.index-cok-satanlar-buton {
position:absolute;
width:160px;
height:40px;
background:#cd5c5c;
color:#fff;
margin-top:10px;
}
.index-kampanyali-urunler-buton {
position:absolute;
width:190px;
height:40px;
background:#cd5c5c;
color:#fff;
margin-top:10px;
margin-left:180px;
}
.index-yeni-urunler-buton {
position:absolute;
width:160px;
height:40px;
background:#cd5c5c;
color:#fff;
margin-top:10px;
margin-left:390px;
}
.urunkarti {
width:23%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
height:377px;
text-align: center;
font-family:arial;
float:left;
margin-left:2.66%;
margin-top:15px;
}
.urunkarti:nth-child(-n+4) {
width:23%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
height:377px;
text-align: center;
font-family:arial;
float:left;
margin-top:0px;
}
.urunkarti:first-child {
width:23%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
height:377px;
text-align: center;
font-family:arial;
float:left;
margin-left:0%;
}
.urunkarti:nth-child(4n+1) {
width:23%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
height:377px;
text-align: center;
font-family:arial;
float:left;
margin-left:0%;
}
.urunkarti img {
width:100%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
height:200px;
text-align: center;
font-family:arial;
float:left;
margin-left:0px;
}
.indexurunler-icerik-yazisi {
height:67px;
font-size:17px;
margin-top:210px;
padding:0px 5px;
}
.fiyat {
height:35px;
line-height:35px;
color: grey;
font-size:22px;
margin-top:0px;
}
.urunkarti button {
width:100%;
height:35px;
line-height:35px;
border:none;
outline:0;
padding:0px 5px;
color:white;
background:#60a3bc;
text-align:center;
cursor:pointer;
font-size:18px;
margin-top:0px;
}
.urunkarti button:hover {
background:#596275;
opacity: 0.9;
margin-top:0px;
}
.index-urunler-asagiacilir-div {
position:absolute;
width:1140px;
height:45px;
margin-top:1070px;
text-align:center;
}
.index-urunler-asagiacilir-div img {
width:65px;
height:30px;
}
.indexdigerfirsaturunleri {
position:absolute;
width:1140px;
height:450px;
margin-top:1100px;
margin-left:0px;
}
.indexdigercokurunleri {
position:absolute;
width:1140px;
margin-top:1100px;
margin-left:0px;
}
.indexdigerkampanyaurunleri {
position:absolute;
width:1140px;
margin-top:1100px;
margin-left:0px;
}
.indexurun-incele-yazisi {
position:absolute;
width:10%;
height:30px;
line-height:30px;
font-size:16px;
background:#60a3bc;
color:#fff;
}
indexurunler.php
<body>
<div class="urunlersayfasi-indexurunler-container-alani">
<form action="" method="POST">
<input type="submit" class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-xs-1 index-cok-satanlar-buton" onclick="cok()" name="coksatanlar" value="Çok Satılanlar">
<input type="submit" class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-xs-1 index-kampanyali-urunler-buton" onclick="kampanya()" name="kampanyaliurunler" value="Kampanyalı Ürünler">
<input type="submit" class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-xs-1 index-yeni-urunler-buton" onclick="yeni()" name="yeniurunler" value="Yeni Ürünler">
</form>
<div class="row no-gutters">
<?php if(isset($_POST['yeniurunler'])) { ?>
<div id="yeniurunlerbolumu" class="tumbolumlerdiv">
<?php
$veriler = "SELECT indexurunleryeni_resim, indexurunleryeni_icerik, indexurunleryeni_fiyat FROM indexurunleryeni ORDER BY indexurunleryeni_id DESC LIMIT 20";
$result = $conn->query($veriler);
foreach ($result as $row) {
?>
<div class="urunkarti">
<img src="images/indexproductcard/<?php echo $row['indexurunleryeni_resim']; ?>">
<h5 class="indexurunler-icerik-yazisi">
<?php echo substr($row['indexurunleryeni_icerik'],0,88); ?>
</h5>
<p class="fiyat"><?php echo $row['indexurunleryeni_fiyat']; ?></p>
<p><button>Sepete Ekle</button></p>
</div>
<?php } ?>
</div>
<?php } elseif (isset($_POST['kampanyaliurunler'])) { ?>
<div id="kampanyabolumu" class="tumbolumlerdiv">
<?php
$veriler = "SELECT indexurunlerkampanya_resim, indexurunlerkampanya_icerik, indexurunlerkampanya_fiyat FROM indexurunlerkampanya ORDER BY indexurunlerkampanya_id DESC LIMIT 20";
$result = $conn->query($veriler);
foreach ($result as $row) {
?>
<div class="urunkarti">
<img src="images/indexproductcard/<?php echo $row['indexurunlerkampanya_resim']; ?>">
<h5 class="indexurunler-icerik-yazisi">
<?php echo substr($row['indexurunlerkampanya_icerik'],0,88); ?>
</h5>
<p class="fiyat"><?php echo $row['indexurunlerkampanya_fiyat']; ?></p>
<p><button>Sepete Ekle</button></p>
</div>
<?php } ?>
</div>
<?php } else { ?>
<div id="cokbolumu" class="tumbolumlerdiv">
<?php
$veriler = "SELECT indexurunlercoksatanlar_resim, indexurunlercoksatanlar_icerik, indexurunlercoksatanlar_fiyat FROM indexurunlercoksatanlar ORDER BY indexurunlercoksatanlar_id DESC LIMIT 20";
$result = $conn->query($veriler);
foreach ($result as $row) {
?>
<div class="urunkarti">
<img src="images/indexproductcard/<?php echo $row['indexurunlercoksatanlar_resim']; ?>">
<h5 class="indexurunler-icerik-yazisi">
<?php echo substr($row['indexurunlercoksatanlar_icerik'],0,88); ?>
</h5>
<p class="fiyat"><?php echo $row['indexurunlercoksatanlar_fiyat']; ?></p>
<p><button>Sepete Ekle</button></p>
</div>
<?php } ?>
</div>
<?php } ?>
</div> <!-- row bitişi -->
</div> <!-- Container Bitişi -->
<script type="text/javascript">
function yeni {
document.getElementById("#yeniurunlerbolumu").style.display = "block";
document.getElementById("#cokbolumu").style.display = "none";
document.getElementById("#kampanyabolumu").style.display = "none";
}
function cok {
document.getElementById("#cokbolumu").style.display = "block";
document.getElementById("#yeniurunlerbolumu").style.display = "none";
document.getElementById("#kampanyabolumu").style.display = "none";
}
function kampanya {
document.getElementById("#kampanyabolumu").style.display = "block";
document.getElementById("#yeniurunlerbolumu").style.display = "none";
document.getElementById("#cokbolumu").style.display = "none";
}
</script>
</body>