Resimleri Ürünlerin Bittiği Yerden Başlatma

yazilimyolcusu 1279 gün önce

543 defa görüntülendi

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?

https://imgyukle.com/i/OlPwlM

.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>

css

Soru hatalı mı? 👎

Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!

Spam olarak işaretle

Cevaplar (5)

yazilimyolcusu

1278 gün önce

Teşekkür ederim cevaplar için.

#005052

tayfunerbilen

1278 gün önce

@yazilimyolcusu, position: absolute verdiğinde bir elemana onun varlığını sayfadan kaldırmış oluyorsun, artık boşluk doldurmuyor havada asılı kalıyor gibi düşün, dolayısı ile sayfa düzeninin bozulmasına sebep olabiliyor çoğu zaman

#005051

yazilimyolcusu

1278 gün önce

Arkadaşlar problem halloldu. "tumbolumlerdiv" div'ine "position:absolute" vermiştim. "Position" ı kaldırınca düzeldi. Peki "position:absolute" niye böyle bir probleme sebep oldu acaba?

#005050

yazilimyolcusu

1278 gün önce

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>

#005049

qplot

1279 gün önce

https://www.w3schools.com/howto/howto_css_clearfix.asp
incele anlayacaksın

#005043