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

Bu konu çözüldü olarak işaretlenmiştir. Çözülmediğini düşünüyorsanız konuyu rapor edebilirsiniz.
C

Coderman128

Kilopat
Katılım
12 Nisan 2020
Mesajlar
7.198
Makaleler
1
Çözümler
24
Daha fazla  
Cinsiyet
Erkek

Edit fiddle - JSFiddle - Code Playground

Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
jsfiddle.net 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?
 

Dosya Ekleri

  • Ekran Alıntısı.JPG
    Ekran Alıntısı.JPG
    34 KB · Görüntüleme: 68
Çözüm
Ecmel
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.
Tarihe göre sırala Puana göre sırala
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
Genişletmek için tıkla...
Yok hocam e posta falan da yazacağım örnek olsun diye attım numarayı.
 
Artı 0 Eksi
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.
 
Artı 0 Eksi
Çözüm

Benzer konular

Timuçib
  • Çözüldü
Çözüldü  HTML - CSS sayfa küçülünce yazılar alt alta geliyor
Mesaj
6
Görüntüleme
660
Timuçib
Timuçib
2
  • Çözüldü
Çözüldü  HTML yazılar üst üste geliyor
Mesaj
4
Görüntüleme
3B
264523
2
The User 0
  • Çözüldü
Çözüldü  HTML yazılar ve butonlar navBar'ın üstüne geliyor
Mesaj
3
Görüntüleme
2B
The User 0
The User 0
G
HTML vs HTML5?
2
Mesaj
14
Görüntüleme
3B
Vavien.
Vavien.
F
HTML nasıl öğrenilir?
2
Mesaj
16
Görüntüleme
2B
famineasylum
F

Yeni konular

Yeni mesajlar

Geri
Yukarı