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

Yeniçocuk

Yeniçocuk

Kilopat
Katılım
30 Kasım 2018
Mesajlar
5.549
Makaleler
2
Çözümler
13
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.
 

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
315
Mahir Çınar Girgin
Mahir Çınar Girgin
Kayra Cem
Resmin Genişliğini Ayarlamak
Mesaj
3
Görüntüleme
359
Regfud
Regfud
Elontidirax
  • Çözüldü
Çözüldü  CSS divi diğer divin üstüne nasıl alırız?
Mesaj
8
Görüntüleme
1B
Elontidirax
Elontidirax
321777
  • Soru
WordPress resmin sayfayı doldurmaması
Mesaj
2
Görüntüleme
398
321777
321777
Atakan Kasırka
  • Soru
Forumda resmin yanına yazı yazmak
Mesaj
4
Görüntüleme
1B
Primearc
Primearc

Yeni konular

Yeni mesajlar

Geri
Yukarı