Css Position Verme Problemi
Merhabalar arkadaşlar. Arkadaşlar, sarı alana yazı eklediğimde footer'ın üzerine geliyor. Nasıl çözülebilir acaba bu sorun. Kodlar aşağıda. Resim aşağıda.
https://hizliresim.com/9wgj2v8
<div class="container">
<div class="hizmetlerimiz_div">
<div class="hizmetlerimiz_ustyazi_div">
<div class="hizmetlerimiz_ustyazi">TÜZEL KİŞİLİK HİZMETLERİ</div>
<img src="images/hizmetlerimiz/ss.jpg" alt="">
<div class="hizmetlerimiz_yazi_genel_div">
<div class="hizmetlerimiz_konu_div">
TÜZEL KİŞİLİK HİZMETLERİ
</div>
<div class="hizmetlerimiz_yazi_div">
* Kişilik Hizmetleri 1
</div>
<div class="hizmetlerimiz_yazi_div">
* Kişilik Hizmetleri 2
</div>
<div class="hizmetlerimiz_yazi_div">
* Kişilik Hizmetleri 2
</div>
</div>
</div>
</div>
</div>
<?php include("footer.php"); ?>
.hizmetlerimiz_div {
display: grid;
grid-template-columns: 100%;
grid-template-rows: auto;
}
.hizmetlerimiz_ustyazi_div {
position: relative;
display: grid;
grid-template-columns: auto;
grid-template-rows: 50vh;
justify-content: center;
font-size: 40px;
font-family:'Times New Roman', Times, serif;
text-decoration: underline;
}
.hizmetlerimiz_ustyazi {
position: absolute;
width: 50%;
height: 80px;
line-height: 80px;
text-align: center;
padding-top: 100px;
margin-left: 25%;
z-index: 99999999;
}
.hizmetlerimiz_ustyazi_div img {
position: absolute;
width: 100%;
height: 50vh;
}
.hizmetlerimiz_yazi_genel_div {
position: absolute;
width: 50%;
height: auto;
align-items: center;
text-align: center;
margin-top: 180px;
margin-left: 25%;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
z-index: 99999999;
background-color: #fff;
}
.hizmetlerimiz_konu_div {
display: grid;
grid-template-columns: auto;
grid-template-rows: 40px;
justify-content: left;
align-items: center;
font-size: 20px;
font-family:'Times New Roman', Times, serif;
background-color: #ccc;
margin-top: 10px;
padding-left: 2%;
font-weight: bold;
}
.hizmetlerimiz_yazi_div {
display: grid;
grid-template-columns: auto;
grid-template-rows: 40px;
justify-content: left;
align-items: center;
font-size: 20px;
font-family:'Times New Roman', Times, serif;
background-color: orange;
padding-left: 7%;
margin-top: 10px;
}
Selam,
Bana soru biraz eksik geldi.
.hizmetlerimiz_ustyazi_div img {
position: absolute;
width: 100%;
height: 65vh;
}
Yaptığında sarı butonların altına iniyor.
Bu butonlardan daha fazla adet olabilir mi? (8-10 adet) böyle bir durumda resmi uzatacak mısın?
footer kullanımını nasıl yaptın.