Footer nasıl alta alınır?

0.0_lucas

Hectopat
Katılım
4 Eylül 2022
Mesajlar
375
Çözümler
4
Yer
Bursa
Daha fazla  
Sistem Özellikleri
İşlemci; i7 12700K
RAM; Kingston Fury Beast 32 GB 3200 MHz DDR4 CL16
Ana Kart; ASUS B660M - E D4 3600MHz
Ekran Kartı; RX6750XT 12GB
Sıvı Soğutucu; MSI MAG CORELIQUID P360 360 mm İşlemci Sıvı Soğutucu
Cinsiyet
Erkek
Meslek
Meslek Lisesi Yazılım Öğrencisi
Footeri bir türlü alta alamadım sorun nedir acaba?



[CODE=html]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Sektörler</title> <link rel="stylesheet" href="sektors.css"> </head> <body> <h1>Kullanıldığı Sektörler</h1> <a class="custom-btn btn-1" href="imalat/imalat.html"><span>Devam Et</span><span>İmalat</span></a> <a class="custom-btn btn-2" href="saglik/saglik.html"><span>Devam Et</span><span>Sağlık</span></a> <a class="custom-btn btn-3" href="aydinlatma/aydinlatma.html"><span>Devam Et</span><span>Aydınlatma</span></a> <a class="custom-btn btn-4" href="ekrantv/ekrantv.html"><span><p>Devam Et</p></span><span>Ekran & Televizyon</span></a> <footer> SGFIJKLSGFSLDIHJFGLIYUSDJFGSDIJFGJDS </footer> </body> </html>[/CODE]

CSS: 
body {
 background: #000;
 color: #fff;
}

h1 {
 position: relative;
 text-align: center;
 font-size: 50px;
 font-family: 'Megrim', cursive;
 text-shadow:
 0 0 5px #0bf4f3,
 0 0 10px #0bf4f3,
 0 0 20px #0bf4f3,
 0 0 40px #0bf4f3,
 0 0 80px #0bf4f3;
 top: 130px;
}

.btn-1{
 color: #a7b3b3;
 position: relative;
 top: 300px;
 left: 600px;
 border:none;
 width: 130px;
 height: 40px;
 line-height: 40px;
 -webkit-perspective: 230px;
 perspective: 230px;
 }
 .btn-1 span {
 display: block;
 position: absolute;
 width: 130px;
 height: 40px;
 border: 1px solid #0bf4f3;
 box-shadow: 0 0 5px #0bf4f3, 0 0 5px #0bf4f3 inset;
 margin:0;
 text-align: center;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 -webkit-transition: all .3s;
 transition: all .3s;
 }
 .btn-1 span:nth-child(1) {
 box-shadow: 0 0 5px #0bf4f3, 0 0 5px #0bf4f3 inset;
 -webkit-transform: rotateX(90deg);
 -moz-transform: rotateX(90deg);
 transform: rotateX(90deg);
 -webkit-transform-origin: 50% 50% -20px;
 -moz-transform-origin: 50% 50% -20px;
 transform-origin: 50% 50% -20px;
 }
 .btn-1 span:nth-child(2) {
 -webkit-transform: rotateX(0deg);
 -moz-transform: rotateX(0deg);
 transform: rotateX(0deg);
 -webkit-transform-origin: 50% 50% -20px;
 -moz-transform-origin: 50% 50% -20px;
 transform-origin: 50% 50% -20px;
 }
 .btn-1:hover span:nth-child(1) {
 -webkit-transform: rotateX(0deg);
 -moz-transform: rotateX(0deg);
 transform: rotateX(0deg);
 }
 .btn-1:hover span:nth-child(2) {
 background: #000;
 color: #000;
 box-shadow: 0 0 5px #0bf4f3, 0 0 5px #0bf4f3 inset;
 -webkit-transform: rotateX(-90deg);
 -moz-transform: rotateX(-90deg);
 transform: rotateX(-90deg);
 }

 .btn-2{
 color: #a7b3b3;
 position: relative;
 top: 300px;
 left: 800px;
 border:none;
 width: 130px;
 height: 40px;
 line-height: 40px;
 -webkit-perspective: 230px;
 perspective: 230px;
 }
 .btn-2 span {
 display: block;
 position: absolute;
 width: 130px;
 height: 40px;
 border: 1px solid #0bf4f3;
 box-shadow: 0 0 5px #0bf4f3, 0 0 5px #0bf4f3 inset;
 margin:0;
 text-align: center;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 -webkit-transition: all .3s;
 transition: all .3s;
 }
 .btn-2 span:nth-child(1) {
 box-shadow: 0 0 5px #0bf4f3, 0 0 5px #0bf4f3 inset;
 -webkit-transform: rotateX(90deg);
 -moz-transform: rotateX(90deg);
 transform: rotateX(90deg);
 -webkit-transform-origin: 50% 50% -20px;
 -moz-transform-origin: 50% 50% -20px;
 transform-origin: 50% 50% -20px;
 }
 .btn-2 span:nth-child(2) {
 -webkit-transform: rotateX(0deg);
 -moz-transform: rotateX(0deg);
 transform: rotateX(0deg);
 -webkit-transform-origin: 50% 50% -20px;
 -moz-transform-origin: 50% 50% -20px;
 transform-origin: 50% 50% -20px;
 }
 .btn-2:hover span:nth-child(1) {
 -webkit-transform: rotateX(0deg);
 -moz-transform: rotateX(0deg);
 transform: rotateX(0deg);
 }
 .btn-2:hover span:nth-child(2) {
 background: #000;
 color: #000;
 box-shadow: 0 0 5px #0bf4f3, 0 0 5px #0bf4f3 inset;
 -webkit-transform: rotateX(-90deg);
 -moz-transform: rotateX(-90deg);
 transform: rotateX(-90deg);
 }

 .btn-3{
 color: #a7b3b3;
 position: relative;
 top: 300px;
 left: 1000px;
 border:none;
 width: 130px;
 height: 40px;
 line-height: 40px;
 -webkit-perspective: 230px;
 perspective: 230px;
 }
 .btn-3 span {
 display: block;
 position: absolute;
 width: 130px;
 height: 40px;
 border: 1px solid #0bf4f3;
 box-shadow: 0 0 5px #0bf4f3, 0 0 5px #0bf4f3 inset;
 margin:0;
 text-align: center;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 -webkit-transition: all .3s;
 transition: all .3s;
 }
 .btn-3 span:nth-child(1) {
 box-shadow: 0 0 5px #0bf4f3, 0 0 5px #0bf4f3 inset;
 -webkit-transform: rotateX(90deg);
 -moz-transform: rotateX(90deg);
 transform: rotateX(90deg);
 -webkit-transform-origin: 50% 50% -20px;
 -moz-transform-origin: 50% 50% -20px;
 transform-origin: 50% 50% -20px;
 }
 .btn-3 span:nth-child(2) {
 -webkit-transform: rotateX(0deg);
 -moz-transform: rotateX(0deg);
 transform: rotateX(0deg);
 -webkit-transform-origin: 50% 50% -20px;
 -moz-transform-origin: 50% 50% -20px;
 transform-origin: 50% 50% -20px;
 }
 .btn-3:hover span:nth-child(1) {
 -webkit-transform: rotateX(0deg);
 -moz-transform: rotateX(0deg);
 transform: rotateX(0deg);
 }
 .btn-3:hover span:nth-child(2) {
 background: #000;
 color: #000;
 box-shadow: 0 0 5px #0bf4f3, 0 0 5px #0bf4f3 inset;
 -webkit-transform: rotateX(-90deg);
 -moz-transform: rotateX(-90deg);
 transform: rotateX(-90deg);
 }

 .btn-4{
 color: #a7b3b3;
 position: relative;
 top: 300px;
 left: 1200px;
 border:none;
 width: 200px;
 height: 40px;
 -webkit-perspective: 230px;
 perspective: 230px;
 }
 p{
 line-height: 5px;

 }
 .btn-4 span {
 display: block;
 position: absolute;
 width: 130px;
 height: 40px;
 border: 1px solid #0bf4f3;
 box-shadow: 0 0 5px #0bf4f3, 0 0 5px #0bf4f3 inset;
 margin:0;
 text-align: center;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 -webkit-transition: all .3s;
 transition: all .3s;
 }
 .btn-4 span:nth-child(1) {
 box-shadow: 0 0 5px #0bf4f3, 0 0 5px #0bf4f3 inset;
 -webkit-transform: rotateX(90deg);
 -moz-transform: rotateX(90deg);
 transform: rotateX(90deg);
 -webkit-transform-origin: 50% 50% -20px;
 -moz-transform-origin: 50% 50% -20px;
 transform-origin: 50% 50% -20px;
 }
 .btn-4 span:nth-child(2) {
 -webkit-transform: rotateX(0deg);
 -moz-transform: rotateX(0deg);
 transform: rotateX(0deg);
 -webkit-transform-origin: 50% 50% -20px;
 -moz-transform-origin: 50% 50% -20px;
 transform-origin: 50% 50% -20px;
 }
 .btn-4:hover span:nth-child(1) {
 -webkit-transform: rotateX(0deg);
 -moz-transform: rotateX(0deg);
 transform: rotateX(0deg);
 }
 .btn-4:hover span:nth-child(2) {
 background: #000;
 color: #000;
 box-shadow: 0 0 5px #0bf4f3, 0 0 5px #0bf4f3 inset;
 -webkit-transform: rotateX(-90deg);
 -moz-transform: rotateX(-90deg);
 transform: rotateX(-90deg);
 }

 footer {
 text-align: center;
 padding: 3px;
 background-color: DarkSalmon;
 color: white;
 }
 

Dosya Ekleri

  • 1709578843251.png
    119,1 KB · Görüntüleme: 55
HTML: 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sektörler</title>
  <link rel="stylesheet" href="sektors.css">
</head>
<body>
  <h1>Kullanıldığı Sektörler</h1>
  <a class="custom-btn btn-1" href="imalat/imalat.html"><span>Devam Et</span><span>İmalat</span></a>
  <a class="custom-btn btn-2" href="saglik/saglik.html"><span>Devam Et</span><span>Sağlık</span></a>
  <a class="custom-btn btn-3" href="aydinlatma/aydinlatma.html"><span>Devam Et</span><span>Aydınlatma</span></a>
  <a class="custom-btn btn-4" href="ekrantv/ekrantv.html"><span><p>Devam Et</p></span><span>Ekran & Televizyon</span></a>
  <footer> SGFIJKLSGFSLDIHJFGLIYUSDJFGSDIJFGJDS </footer>
</body>
</html>

CSS: 
body {
    background: #000;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
}
h1 {
    position: relative;
    text-align: center;
    font-size: 50px;
    font-family: 'Megrim', cursive;
    text-shadow:
        0 0 5px #0bf4f3,
        0 0 10px #0bf4f3,
        0 0 20px #0bf4f3,
        0 0 40px #0bf4f3,
        0 0 80px #0bf4f3;
    top: 130px;
}
.btn-container {
    display: flex;
    justify-content: center;
    margin-top: 50px;
}
.custom-btn {
    color: #a7b3b3;
    border: none;
    width: 130px;
    height: 40px;
    line-height: 40px;
    margin: 0 10px;
    text-align: center;
    perspective: 230px;
    position: relative;
}
.btn-1 span,
.btn-2 span,
.btn-3 span,
.btn-4 span {
    display: block;
    position: absolute;
    width: 130px;
    height: 40px;
    border: 1px solid #0bf4f3;
    box-shadow: 0 0 5px #0bf4f3, 0 0 5px #0bf4f3 inset;
    margin: 0;
    text-align: center;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all .3s;
    transition: all .3s;
}
.btn-1 span:nth-child(1),
.btn-2 span:nth-child(1),
.btn-3 span:nth-child(1),
.btn-4 span:nth-child(1) {
    box-shadow: 0 0 5px #0bf4f3, 0 0 5px #0bf4f3 inset;
    -webkit-transform: rotateX(90deg);
    -moz-transform: rotateX(90deg);
    transform: rotateX(90deg);
    -webkit-transform-origin: 50% 50% -20px;
    -moz-transform-origin: 50% 50% -20px;
    transform-origin: 50% 50% -20px;
}
.btn-1 span:nth-child(2),
.btn-2 span:nth-child(2),
.btn-3 span:nth-child(2),
.btn-4 span:nth-child(2) {
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    transform: rotateX(0deg);
    -webkit-transform-origin: 50% 50% -20px;
    -moz-transform-origin: 50% 50% -20px;
    transform-origin: 50% 50% -20px;
}
.btn-1:hover span:nth-child(1),
.btn-2:hover span:nth-child(1),
.btn-3:hover span:nth-child(1),
.btn-4:hover span:nth-child(1) {
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    transform: rotateX(0deg);
}
.btn-1:hover span:nth-child(2),
.btn-2:hover span:nth-child(2),
.btn-3:hover span:nth-child(2),
.btn-4:hover span:nth-child(2) {
    background: #000;
    color: #000;
    box-shadow: 0 0 5px #0bf4f3, 0 0 5px #0bf4f3 inset;
    -webkit-transform: rotateX(-90deg);
    -moz-transform: rotateX(-90deg);
    transform: rotateX(-90deg);
}
footer {
    text-align: center;
    padding: 10px;
    background-color: DarkSalmon;
    color: white;
    margin-top: auto;
}

Body ve footer için birkaç değişiklik yaptım. Bu taglara ve anlamlarına bi bakarsın. CSS bilgim benim de iyi değil derdini çözebilmek beni çok mutlu eder.

Edit:Hocam footer aşağı geçmiş ama butonların konumu kaymış. Açıkçası lanet CSS biraz uğraştım, çözemedim. Çözebilirseniz butonların konumu sorununu benle paylaşır mısınız?
 
Son düzenleme:
Öncelikle @MidI0ck'un eline sağlık, güzel düzenlemeler yapmış.


Sorun, şuradaki 2. ve 7. satırlardan kaynaklanmış:

CSS: 
h1 {
  position: relative;
  text-align: center;
  font-size: 50px;
  font-family: "Megrim", cursive;
  text-shadow: 0 0 5px #0bf4f3, 0 0 10px #0bf4f3, 0 0 20px #0bf4f3, 0 0 40px #0bf4f3, 0 0 80px #0bf4f3;
  top: 130px;
}

Bir elemente position: relative; özelliği eklediğinizde sayfada dokümandaki yerine göre durur ama üstüne top/right/bottom/left özelliklerini değiştirdiğinizde element kendi ilk yerini baz alarak yer değiştirir ama diğer elementler, bu elementin dokümandaki asıl (ilk) yerine göre konumlanır yani bu yer değiştirmeden etkilenmez.

Bu aktardığım bilgiler tam doğru olmayabilir, baz aldığım kaynağı paylaşayım: position - CSS: Cascading Style Sheets | MDN.

Yani bu dediklerim şuna çıkıyor: Kullanıldığı Sektörler yani h1 elementini, diğer elementleri etkilemeden 130px aşağı kaydırmışsınız, oysaki diğer elementler h1 elementinin sayfadaki orijinal yerine göre konumlanıyor sadece. Sayfanın yukarısındaki boşluk da h1 elementinin yüksekliğinden geliyor özünde; tabii o boşluğa katkısı olan başka elementler de olabilir, detaylı incelemedim.

Peki nasıl üstesinden geliriz bu konumlandırma sorununun?

absolute olmayan elementleri top gibi özelliklerle değil margin-top, padding-top vb. özelliklerle konumlandırmanızı öneririm. Bu sayede diğer elementler de bu değişikliklerden etkilenecektir yani "her şey aynı anda kayacaktır." : )

Değişiklik önerilerim:
CSS: 
h1 {
  text-align: center;
  font-size: 50px;
  font-family: "Megrim", cursive;
  text-shadow: 0 0 5px #0bf4f3, 0 0 10px #0bf4f3, 0 0 20px #0bf4f3, 0 0 40px #0bf4f3, 0 0 80px #0bf4f3;
  padding-top: 130px; /* Burada dıştan değil de içten boşluk vermek daha sağlıklı */
}

.btn-1 {
  color: #a7b3b3;
  position: relative;
  display: inline-block; /* margin-* özelliklerinin çalışabilmesi için */
  margin-top: 300px;
  margin-left: 600px;
  border: none;
  width: 130px;
  height: 40px;
  line-height: 40px;
  -webkit-perspective: 230px;
  perspective: 230px;
}

.btn-2 {
  color: #a7b3b3;
  position: relative;
  display: inline-block;
  margin-top: 300px;
  margin-left: 70px; /* Öncekine denk gelmesi için: 200px - width */
  border: none;
  width: 130px;
  height: 40px;
  line-height: 40px;
  -webkit-perspective: 230px;
  perspective: 230px;
}

.btn-3 {
  color: #a7b3b3;
  position: relative;
  display: inline-block;
  margin-top: 300px;
  margin-left: 70px;
  border: none;
  width: 130px;
  height: 40px;
  line-height: 40px;
  -webkit-perspective: 230px;
  perspective: 230px;
}

.btn-4 {
  color: #a7b3b3;
  position: relative;
  display: inline-block;
  margin-top: 300px;
  margin-left: 70px;
  border: none;
  width: 200px;
  height: 40px;
  -webkit-perspective: 230px;
  perspective: 230px;
}

HTML dokümanınıza hiç dokunmadan önerdiğim değişikliklerdi bunlar. Yerinizde olsam butonları bir div içine alıp şu şekilde yazardım:

HTML: 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sektörler</title>
    <link rel="stylesheet" href="sektors.css">
</head>

<body>
    <h1>Kullanıldığı Sektörler</h1>
    <div class="btn-wrapper">
        <a class="custom-btn btn-1" href="imalat/imalat.html"><span>Devam Et</span><span>İmalat</span></a>
        <a class="custom-btn btn-2" href="saglik/saglik.html"><span>Devam Et</span><span>Sağlık</span></a>
        <a class="custom-btn btn-3" href="aydinlatma/aydinlatma.html"><span>Devam Et</span><span>Aydınlatma</span></a>
        <a class="custom-btn btn-4" href="ekrantv/ekrantv.html"><span>
                <p>Devam Et</p>
            </span><span>Ekran & Televizyon</span></a>
    </div>
    <footer> SGFIJKLSGFSLDIHJFGLIYUSDJFGSDIJFGJDS </footer>
</body>

</html>

CSS: 
.btn-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 300px;
  gap: 70px;
}

/* Tüm .btn-* sınıflarından aşağıdaki 3 özelliği kaldırdım */

.btn-4 {
  color: #a7b3b3;
  position: relative;
/*
  display: inline-block;
  margin-top: 300px;
  margin-left: 70px;
*/
  border: none;
  width: 200px;
  height: 40px;
  -webkit-perspective: 230px;
  perspective: 230px;
}

Burada flex kullanmanın avantajı, içerideki elementleri her zaman merkezde (justify-content: center;) tutabilmek -zoom yapılsa bile- ve aralarındaki boşluğu basit şekilde gap: 70px; ile ayarlayabilmek. flex'e alışmanızı tavsiye ederim, CSS'in harika bir yüzü açıkçası.

Şu an sayfa bu şekilde gözüküyor:



Geriye footer'ı en aşağı almak kaldı, sanırım bunu istediniz çünkü. Burada @MidI0ck'un yaptığına alternatif bir öneride bulunacağım ancak duruma göre çok da hoş olmayabiliyor:

CSS: 
footer {
  text-align: center;
  padding: 3px;
  background-color: DarkSalmon;
  color: white;
  position: fixed;
  bottom: 0px;
  left: 0px;
  right: 0px;
}

Genelde sayfa yüksekliği yeterince büyük olduğu için böyle bir şeye gerek kalmıyor.

İnternette biraz araştırmayla daha hoş olduğunu düşündüğüm flex'li bir çözüm daha var, onu da paylaşmak isterim: CSS to make HTML page footer stay at bottom of the page with a minimum height, but not overlap the page. Bu çözümle birlikte her şeyin son hâlini paylaşayım: Edit fiddle - JSFiddle - Code Playground.
 
Allah sizden razı olsun baştan sona okudum. Benim de CSS bilgim rezalet en nefret ettiğim şey CSS’de bir yeri düzeltiyorsunuz diğer taraf bozuluyor. Ben mi beceremiyorum frontend tarafını bilmiyorum hocam inanın.
 
MidI0ck dedi:
Allah sizden razı olsun, baştan sona okudum. Benim de CSS bilgim rezalet, en nefret ettiğim şey: CSS’te bir yeri düzeltiyorsunuz, diğer taraf bozuluyor. Ben mi beceremiyorum frontend tarafını bilmiyorum hocam inanın.
Genişletmek için tıkla...

Bol bol pratik yapıp farklı farklı durumları görmüş olmak gerekiyor, bir de iyi araştırabilmek. : )

O nefret ettiğiniz durumu yüzlerce kez deneyimlemeden öğrenilmiyor CSS gerçekten, en azından benim için öyle gelişti işler. Tonla ayarlanabilecek ve birbirini etkileyen özellik olunca bir o kadar da zaman gerekiyor gerçekten. Taşlar biraz yerine oturmaya başlayınca işte frontend'in zevki o zaman çıkıyor. Ha, asla da kusursuz olamıyorsunuz. : D Eğlenceli tarafı da o, hep yeni şeyler öğrenip ve keşfedip duruyorsunuz.

Ben hiç düz CSS yazmıyorum, onun yerine Tailwind CSS'i tercih ediyorum. Fikrini çok beğendiğim bir araç.

CSS bilginizin hiç de rezalet olduğunu düşünmüyorum, yeterli pratik ve araştırmayla kendinizi çok iyi geliştirebilirsiniz. Benimki de mükemmellikten çok uzak ama araştırıp ve öğrenip duruyorum işte.

Doğum gününüz kutlu olsun bu arada!
 
Çok teşekkürler kıymetli yorumlarınız için hocam sağ olun.
 
Konuyu cevapla
Menü
Giriş yap
Kaydol
Bu siteyi kullanmak için çerezler gereklidir. Siteyi kullanmaya devam etmek için çerezleri kabul etmelisiniz. Daha Fazlasını Öğren.…