CSS slaytında yazıları ayarlama

yone1108 dedi:
@media only screen and (max-width: 600px) {
#classismi {
flex-direction: column;
}

bu kodun çalışması gerekiyor hocam. Footer kodlarının ekran görüntüsünü atar mısınız
Genişletmek için tıkla...
1619228302872.png
 
yone1108 dedi:
hangi classa bu özelliği vermek istiyorsunuz direk footer mı?
Genişletmek için tıkla...
Hocam sayfa küçüldüğü zaman en üstte .sol div, ortada .orta div ve en altta .sag div olmasını istiyorum mesela resimdeki gibi yazılar logonun altına geliyor normalde yanında.
1619228523854.png
 
Antares dedi:
Anladım hocam peki bunu her .div etiketini margin-top ile ayarlayabilir miyiz?
Genişletmek için tıkla...

Evet o şekilde ayarlayabilirsiniz.
@media içerisine her div için ayrı ayrı değer verebilirsiniz. Aşağıdaki örnek gibi.

@media only screen and (max-width: 600px) { .sag{ margin-top: 10px; } .sol{ margin-top: 10px; } .orta { margin-top: 10px; } }
 
yone1108 dedi:
Evet o şekilde ayarlayabilirsiniz.
@media içerisine her div için ayrı ayrı değer verebilirsiniz. Aşağıdaki örnek gibi.

@media only screen and (max-width: 600px) { .sag{ margin-top: 10px; } .sol{ margin-top: 10px; } .orta { margin-top: 10px; } }
Genişletmek için tıkla...
Ayarladım hocam fakat böyle bir şey oluştu.
1619229201777.png
 
yone1108 dedi:
position absolute verdiniz mi?
Genişletmek için tıkla...
Kodların hepsi burada hocam bugünlük daha fazla uğraşamayacağım bana bu saatte zaman ayırdığınız için teşekkür ederim gerçekten sağolun.
footer{
display: flex;
background-color: #191919;
height: 300px;
color: #fff;
position: relative;
margin-top: 100px;
}
footer img{
opacity: 0.6;
width: 100%;
height: 100%;
}
.footer-logo{
width: 300px;
margin-top: 70px;
}
footer h3{
font-size: 28px;
margin-bottom: 20px;
margin-top: 0px;
}
.sol{
width:30%;

position: absolute;
z-index: 99;
}
.orta{
position: absolute;
width: 100%;
text-align: center;
top: 40%;
z-index: 99;

font-size: 18px;

}
.orta input{
width: 230px;
height: 28px;
background-color:#000000;
opacity:0.6;
filter:alpha(opacity=60);
color: #fff;
margin-right: 15px;

}
.sag{
position: absolute;
width: 100%;
text-align: right;
top: 30%;
z-index: 99;
}
.sag i{
margin-right: 60px;
cursor: pointer;
}


@media only screen and (max-width: 900px) {
.orta{
margin-top: 150px;
position: absolute;
}
.sag{
margin-top: 300px;
float: left;
margin-left: -60px;
position: absolute;
}
.arkaresım{
height: 500px;
position: absolute;
}
}
 
Antares dedi:
Kodların hepsi burada hocam bugünlük daha fazla uğraşamayacağım bana bu saatte zaman ayırdığınız için teşekkür ederim gerçekten sağolun.
footer{
display: flex;
background-color: #191919;
height: 300px;
color: #fff;
position: relative;
margin-top: 100px;
}
footer img{
opacity: 0.6;
width: 100%;
height: 100%;
}
.footer-logo{
width: 300px;
margin-top: 70px;
}
footer h3{
font-size: 28px;
margin-bottom: 20px;
margin-top: 0px;
}
.sol{
width:30%;

position: absolute;
z-index: 99;
}
.orta{
position: absolute;
width: 100%;
text-align: center;
top: 40%;
z-index: 99;

font-size: 18px;

}
.orta input{
width: 230px;
height: 28px;
background-color:#000000;
opacity:0.6;
filter:alpha(opacity=60);
color: #fff;
margin-right: 15px;

}
.sag{
position: absolute;
width: 100%;
text-align: right;
top: 30%;
z-index: 99;
}
.sag i{
margin-right: 60px;
cursor: pointer;
}


@media only screen and (max-width: 900px) {
.orta{
margin-top: 150px;
position: absolute;
}
.sag{
margin-top: 300px;
float: left;
margin-left: -60px;
position: absolute;
}
.arkaresım{
height: 500px;
position: absolute;
}
}
Genişletmek için tıkla...

1619229736693.png


1619229744879.png


Bu kodlar ile böyle bir görüntü elde edebiliyorum hocam. Bence yatacağım yarın kalktığımda bakarım rica ederim kusura bakmayın çözemedik yarın sakin ve dinç kafayla hallederiz. İyi uykular dilerim.
 

Benzer konular

kaankesen
  • Çözüldü
Çözüldü  CSS Yazıları nasıl ayarlayabilirim?
Mesaj
4
Görüntüleme
191
kaankesen
kaankesen
walter wick
  • Çözüldü
Çözüldü  CSS background çalışmıyor
Mesaj
9
Görüntüleme
1B
Fatalis
Fatalis
Maksimum Zırh
Wordpress kategori yazıları
Mesaj
2
Görüntüleme
548
Maksimum Zırh
Maksimum Zırh
EmreEfe
  • Kilitli
Çözüldü  CSS İle Menü Ortalama
Mesaj
9
Görüntüleme
17B
EmreEfe
EmreEfe
wlodame
CSS güncellenmiyor
Mesaj
0
Görüntüleme
203
wlodame
wlodame

Yeni konular

Yeni mesajlar

Geri
Yukarı