Çözüldü HTML yazısı alta geliyor

Coderman128 · 11 Ağustos 2022

Edit fiddle - JSFiddle - Code Playground

JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.

jsfiddle.net

Telefon no yazıyorum ama üstte görünmesini istiyorum. Bir de alttaki şeyi en alta almak istiyorum. Bu sorun nasıl çözülür?

Ecmel · 11 Ağustos 2022

HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>NAVBAR DENEME</title>
        <link rel="stylesheet" href="iletisim.css">
        <script src="myScript.js"></script>
    </head>
<body> 
<input type="checkbox" id="menu-toggle">

<div class="container">
    <div class="header">
        <label class="hamburger-menu" for="menu-toggle">
            <span></span>
        </label>
        <a href="#" class="logo">
            FARUK SANCAR
        </a>
        <div class="actions">
            <div>telefon:000000000000</div>
        </div>
        <label for="menu-toggle" class="backdrop"></label>
    </div>
</div>
<nav class="menu">
    <ul>
        <li>
            <a href="#">Anasayfa</a>
        </li>
        <li>
            <a href="#">Hakkımda</a>
        </li>
        <li>
            <a href="#">Porfolyo</a>
        </li>
        <li>
            <a href="#">Blog</a>
        </li>
        <li>
            <a href="#">İletişim</a>
        </li>
    </ul>
</nav>

     <div class="footer-basic">
         <footer>
             <div class="social"><a href="#"><i class=img src=discordicon.png"></i></a><a href="#"><i class="icon ion-social-snapchat"></i></a><a href="#"><i class="icon ion-social-twitter"></i></a><a href="#"><i class="icon ion-social-facebook"></i></a></div>
              <ul class="list-inline">
                 <li class="list-inline-item"><a href="#">Ana Sayfa</a></li>
                 <li class="list-inline-item"><a href="#">Servisler</a></li>
                 <li class="list-inline-item"><a href="#">Hakkımızda</a></li>
                 <li class="list-inline-item"><a href="#">Şartlar</a></li>
                 <li class="list-inline-item"><a href="#">Gizlilik politikası</a></li>
             </ul>
             <p class="copyright">FARUK SANCAR © 2022</p>
         </footer>
     </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
</body>

</html>

CSS:

  .footer-basic {
    padding:20px 0;
    background-color:#ffffff;
    color:#4b4c4d;
    position: absolute;
    bottom: 0;
    width: 100%;
  }

Bu şekilde ufak bir düzenleme yaptım ama ben yerinde olsam bu kodları kullanmam. Çok kötü şekilde yazılmış. Başka bir yerden alıp değiştirmeye çalışmaktansa kendin yapabilirsin. Çok basit bir şey zaten şunu yapması, boştan yere uğraşıyorsun şu anda.

Şimdi bu kodu çalıştıracaksın ama mobil uyumluluk da yazman gerecek. Kodlar zaten genel olarak doğru yazılmamış. Bazı yerlerde gereksiz tag açılıp kapamaları gördüm.

Dediğim gibi yerinde olsam sıfırdan kendim yazardım. Bu şekilde hiç sağlıklı bir site değil. Sorunun genel olarak bilgi eksikliğinden kaynaklı zaten. Tamamen öğrenmeden bir yerden başka yere atlamaya çalışıyorsun. Sırayla ilerlemen gerekli.

Ecmel · 11 Ağustos 2022

Üstte derken nereyi kast ediyorsunuz?

Emrebeyx · 11 Ağustos 2022

Kod:

 <a href="#" class="logo">
 FARUK SANCAR
 </a>
 <div class="actions">

 <div class="flex-container">

 <div>telefon:000000000000</div>

 </div>

Bu şekilde düzeltir misiniz?

Girdap · 11 Ağustos 2022

.container class'ına %50 height vermişsin onu kaldır normale dönecek.

Coderman128 · 11 Ağustos 2022

Emrebeyx dedi:
Kod:

<a href="#" class="logo"> FARUK SANCAR </a> <div class="actions"> <div class="flex-container"> <div>telefon:000000000000</div> </div>

Bu şekilde düzeltir misiniz?

Eki Görüntüle 1481767

Yok hocam e posta falan da yazacağım örnek olsun diye attım numarayı.

Emrebeyx · 11 Ağustos 2022

Coderman128 dedi:
Yok hocam e-posta falan da yazacağım örnek olsun diye attım numarayı.

Tamam aynı şekilde yapabilirsiniz.

Coderman128 · 11 Ağustos 2022

Girdap dedi:
.container class'ına %50 height vermişsin onu kaldır normale dönecek.

Alttaki de üste çıkıyor o zaman. Onu nasıl hallederim?

Calone · 11 Ağustos 2022

Coderman128 dedi:
Alttaki de üste çıkıyor o zaman. Onu nasıl hallederim?

HTML ve CSS öğrenerek yoksa siteyi 20 kişi beraber yaparız burada.

Ecmel · 11 Ağustos 2022

HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>NAVBAR DENEME</title>
        <link rel="stylesheet" href="iletisim.css">
        <script src="myScript.js"></script>
    </head>
<body> 
<input type="checkbox" id="menu-toggle">

<div class="container">
    <div class="header">
        <label class="hamburger-menu" for="menu-toggle">
            <span></span>
        </label>
        <a href="#" class="logo">
            FARUK SANCAR
        </a>
        <div class="actions">
            <div>telefon:000000000000</div>
        </div>
        <label for="menu-toggle" class="backdrop"></label>
    </div>
</div>
<nav class="menu">
    <ul>
        <li>
            <a href="#">Anasayfa</a>
        </li>
        <li>
            <a href="#">Hakkımda</a>
        </li>
        <li>
            <a href="#">Porfolyo</a>
        </li>
        <li>
            <a href="#">Blog</a>
        </li>
        <li>
            <a href="#">İletişim</a>
        </li>
    </ul>
</nav>

     <div class="footer-basic">
         <footer>
             <div class="social"><a href="#"><i class=img src=discordicon.png"></i></a><a href="#"><i class="icon ion-social-snapchat"></i></a><a href="#"><i class="icon ion-social-twitter"></i></a><a href="#"><i class="icon ion-social-facebook"></i></a></div>
              <ul class="list-inline">
                 <li class="list-inline-item"><a href="#">Ana Sayfa</a></li>
                 <li class="list-inline-item"><a href="#">Servisler</a></li>
                 <li class="list-inline-item"><a href="#">Hakkımızda</a></li>
                 <li class="list-inline-item"><a href="#">Şartlar</a></li>
                 <li class="list-inline-item"><a href="#">Gizlilik politikası</a></li>
             </ul>
             <p class="copyright">FARUK SANCAR © 2022</p>
         </footer>
     </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
</body>

</html>

CSS:

  .footer-basic {
    padding:20px 0;
    background-color:#ffffff;
    color:#4b4c4d;
    position: absolute;
    bottom: 0;
    width: 100%;
  }

Bu şekilde ufak bir düzenleme yaptım ama ben yerinde olsam bu kodları kullanmam. Çok kötü şekilde yazılmış. Başka bir yerden alıp değiştirmeye çalışmaktansa kendin yapabilirsin. Çok basit bir şey zaten şunu yapması, boştan yere uğraşıyorsun şu anda.

Şimdi bu kodu çalıştıracaksın ama mobil uyumluluk da yazman gerecek. Kodlar zaten genel olarak doğru yazılmamış. Bazı yerlerde gereksiz tag açılıp kapamaları gördüm.

Dediğim gibi yerinde olsam sıfırdan kendim yazardım. Bu şekilde hiç sağlıklı bir site değil. Sorunun genel olarak bilgi eksikliğinden kaynaklı zaten. Tamamen öğrenmeden bir yerden başka yere atlamaya çalışıyorsun. Sırayla ilerlemen gerekli.

Coderman128 · 11 Ağustos 2022

Eyvallah teşekkürler herkese.

Calone dedi:
HTML ve CSS öğrenerek yoksa siteyi 20 kişi beraber yaparız burada.

Hocam zaten developer değilim ben bu siteyi de öğrenme aşamasında yaptım.

Çözüldü HTML yazısı alta geliyor

Ayrıntılı düzenleme

Coderman128

Kilopat

Edit fiddle - JSFiddle - Code Playground

Dosya Ekleri

Ecmel

Ecmel

Megapat

Emrebeyx

Hectopat

Girdap

Kilopat

Coderman128

Kilopat

Emrebeyx

Hectopat

Coderman128

Kilopat

Calone

Hectopat

Ecmel

Megapat

Coderman128

Kilopat

Benzer konular