Ekran boyutuna göre divin resmin altında olması

Yeniçocuk

Yeniçocuk

Megapat
Zamanın Tanığı
Katılım
30 Kasım 2018
Mesajlar
5.726
Makaleler
2
Çözümler
14
Merhabalar medical Park'ın sitesinin bir bölümünü yapmaktayım. Medical Park'ın sitesinde ekran boyutuna göre div içindekiler resmin altına geliyor. Bunu nasıl yapabilirim?
Responsive hali.

ss.JPG


HTML: 
<section class="SliderArea">
 <div class="SliderMainArea">

 <div class="SliderBody" style="background-image: url(img/slider1.jpg), url(img/slider1mini.jpg);">
 <div class="SliderContainer">
 <div class="SliderButtonArea">
 <div class="SliderButtonsMiniArea">

 <div class="SliderButtons">
 <div class="ButtonIcon"><i class="fas fa-video"></i></div>
 <div class="ButtonText">Görüntülü Görüşme Randevusu</div>
 </div>

 <div class="SliderButtons">
 <div class="ButtonIcon"><i class="fa fa-user-md"></i></div>
 <div class="ButtonText">Muayene Randevusu</div>
 </div>

 <div class="SliderButtons">
 <div class="ButtonIcon"><i class="fa fa-heartbeat"></i></div>
 <div class="ButtonText">E-Sonuç</div>
 </div>

 <div class="SliderButtons">
 <div class="ButtonIcon"><i class="fa fa-home"></i></div>
 <div class="ButtonText">Check-Up</div>
 </div>

 </div>

 </div>

 <div class="SliderTitleArea">
 <div class="SliderTitle">
 İnterferon 1B Genetik Testiyle, Covid-19 Hastalığını Ağır Geçirme Riskinizi Öğrenebilirsiniz.
 </div>
 </div>
 </div>
 </div>

 <div class="SliderBody" style="background-image: url(img/slider2.jpg), url(img/slider2mini.jpg);">
 <div class="SliderContainer">

 <div class="SliderButtonArea">
 <div class="SliderButtonsMiniArea">

 <div class="SliderButtons">
 <div class="ButtonIcon"><i class="fas fa-video"></i></div>
 <div class="ButtonText">Görüntülü Görüşme Randevusu</div>
 </div>

 <div class="SliderButtons">
 <div class="ButtonIcon"><i class="fa fa-user-md"></i></div>
 <div class="ButtonText">Muayene Randevusu</div>
 </div>

 <div class="SliderButtons">
 <div class="ButtonIcon"><i class="fa fa-heartbeat"></i></div>
 <div class="ButtonText">E-Sonuç</div>
 </div>

 <div class="SliderButtons">
 <div class="ButtonIcon"><i class="fa fa-home"></i></div>
 <div class="ButtonText">Check-Up</div>
 </div>

 </div>

 </div>

 <div class="SliderTitleArea">
 <div class="SliderTitle">
 Robotik Diz Protezi Ameliyatı ile Hayat Kalitenizi Yükseltebilirsiniz!
 </div>
 </div>
 </div>
 </div>

 <div class="SliderBody" style="background-image: url(img/slider3.jpg), url(img/slider3mini.jpg);">
 <div class="SliderContainer">

 <div class="SliderButtonArea">
 <div class="SliderButtonsMiniArea">

 <div class="SliderButtons">
 <div class="ButtonIcon"><i class="fas fa-video"></i></div>
 <div class="ButtonText">Görüntülü Görüşme Randevusu</div>
 </div>

 <div class="SliderButtons">
 <div class="ButtonIcon"><i class="fa fa-user-md"></i></div>
 <div class="ButtonText">Muayene Randevusu</div>
 </div>

 <div class="SliderButtons">
 <div class="ButtonIcon"><i class="fa fa-heartbeat"></i></div>
 <div class="ButtonText">E-Sonuç</div>
 </div>

 <div class="SliderButtons">
 <div class="ButtonIcon"><i class="fa fa-home"></i></div>
 <div class="ButtonText">Check-Up</div>
 </div>

 </div>

 </div>

 <div class="SliderTitleArea">
 <div class="SliderTitle">
 Covid-19 Testlerinizi Yaptırın İçiniz Rahat Etsin.
 </div>
 </div>
 </div>
 </div>

 <div class="SliderBody" style="background-image: url(img/slider4.jpg), url(img/slider4mini.jpg);">
 <div class="SliderContainer">

 <div class="SliderButtonArea">
 <div class="SliderButtonsMiniArea">

 <div class="SliderButtons">
 <div class="ButtonIcon"><i class="fas fa-video"></i></div>
 <div class="ButtonText">Görüntülü Görüşme Randevusu</div>
 </div>

 <div class="SliderButtons">
 <div class="ButtonIcon"><i class="fa fa-user-md"></i></div>
 <div class="ButtonText">Muayene Randevusu</div>
 </div>

 <div class="SliderButtons">
 <div class="ButtonIcon"><i class="fa fa-heartbeat"></i></div>
 <div class="ButtonText">E-Sonuç</div>
 </div>

 <div class="SliderButtons">
 <div class="ButtonIcon"><i class="fa fa-home"></i></div>
 <div class="ButtonText">Check-Up</div>
 </div>

 </div>

 </div>

 <div class="SliderTitleArea">
 <div class="SliderTitle">
 Burnunuza, Piezo Yöntemi İle Kırılmadan Hassas Dokunuş.
 </div>
 </div>
 </div>
 </div>
 <div class="SliderBody" style="background-image: url(img/slider5.jpg), url(img/slider5mini.jpg);">

 </div>

 </div>
 </section>

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
 <script>
 $('.SliderMainArea').slick({
 dots: true,
 infinite: true,
 arrows:false,
 lazyLoadBuffer: 750,
 autoplay:true,
 autoplaySpeed:4000,
 speed: 1000,
 fade: true,
 cssEase: 'linear',
 slidesToShow: 1,
 slidesToScroll: 1,
 responsive: [
 {
 breakpoint: 1024,
 settings: {
 slidesToShow: 1,
 slidesToScroll: 1,
 infinite: true,
 arrows:false,
 dots: true.
 }
 },
 {
 breakpoint: 767,
 settings: {
 slidesToShow: 1,
 slidesToScroll: 1,
 arrows:false,
 dots: true.
 }
 },
 {
 breakpoint: 600,
 settings: {
 slidesToShow: 1,
 slidesToScroll: 1,
 arrows:false,
 dots: true.
 }
 },
 {
 breakpoint: 480,
 settings: {
 slidesToShow: 1,
 slidesToScroll: 1,
 arrows:false,
 dots: true.
 }
 }
 // You can unslick at a given breakpoint now by adding:
 // settings: "unslick"
 // instead of a settings object.
 ]
});
</script>

[CODE title="CSS kodları"]
.SliderArea
{
width: 100%;
font-family: 'Source Sans Pro', sans-serif;
}

.SliderMainArea
{
width: 100%;
}
.SliderBody
{
width: 100%;
background-repeat: no-repeat !important;
background-size: cover !important;
background-position: center center, center center !important;
background-size: auto 100%, 0 0 !important;
height: 500px !important;
}
.SliderBody img.
{
width: 100%;
height: auto;
}

.SliderContainer
{
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}

.SliderButtonArea
{
width: 40%;
margin-left: -100px;
margin-top: 50px;
}

.SliderButtonsMiniArea
{
position: relative;
margin: 20px auto;
width: 400px;
}
.SliderButtons
{
width: 180px;
height: 140px;
background: #fff;
color: #db291c;
font-size: 16px;
box-shadow: 0 0 5px 0 rgba(227,6,19,0.2);
border-radius: 10px;
transition: all 0.2s ease;
margin: 10px 9px;
display: inline-block;
position: relative;
}
.SliderButtons i
{
font-size: 24px;
}
.ButtonIcon
{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
top: 30%;
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
}
.ButtonText
{
display: flex;
justify-content: center;
position: absolute;
text-align: center;
justify-content: center;
align-items: center;
top: 70%;
left: 50%;
transform: translate(-50%, -50%);
}
.ButtonText:nth-type(1)
{
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
background-color: yellow;
}
.SliderTitleArea
{
width: 50%;
margin-left: 55px;
}
.SliderTitle
{
font-size: 45px;
line-height: 45px;
width: 60%;
color: #fff;
font-weight: bold;
margin-top: 60px;
margin-left: -20px;
}
.SliderButtons:hover
{

background: #db291c;
color: #fff;
box-shadow: 0 0 15px 0 rgba(227,6,19,0.6);
transition: all 0.2s ease;
}[/CODE]

Benim yaptığım responsive olmayan hali.

Imss.JPG


Slider body alanında arka plan resmi var, slider container içinde 4 tane button olan kısım ve başlık mevcut. Amacım üst resimdeki gibi 4 tane butonun resmin dışında olması margin, padding verince resmin dışına çıkmıyor.
 
Uyarı! Bu konu 5 yıl önce açıldı.
Muhtemelen daha fazla tartışma gerekli değildir ki bu durumda yeni bir konu başlatmayı öneririz. Eğer yine de cevabınızın gerekli olduğunu düşünüyorsanız buna rağmen cevap verebilirsiniz.

Benzer konular

Yeniçocuk
  • Soru
Resmin div elemanının özelliklerine göre değer alması nasıl sağlanır?
Mesaj
1
Görüntüleme
416
Mahir Çınar Girgin
Mahir Çınar Girgin
Kayra Cem
Resmin Genişliğini Ayarlamak
Mesaj
3
Görüntüleme
468
Regfud
Regfud
321777
  • Soru
WordPress resmin sayfayı doldurmaması
Mesaj
2
Görüntüleme
526
321777
321777
Elontidirax
  • Çözüldü
Çözüldü  CSS divi diğer divin üstüne nasıl alırız?
Mesaj
8
Görüntüleme
2.427
Elontidirax
Elontidirax
atomen_q
  • Soru
Forumda resmin yanına yazı yazmak
Mesaj
4
Görüntüleme
1.595
Primearc
Primearc

Technopat Haberler

Yeni konular

Yeni mesajlar

Geri
Yukarı