Çözüldü Siteye navbar ekleyince sayfa bozuluyor

682784 · 3 Aralık 2022

Merhaba bir site için son aşamaya geldim. İletişim kısmını yapıyorum gayet güzel oluyor lakin bar ekleyince sayfa bozuluyor. Yardımcı olabilir misiniz?

CSS:

*{
  margin: 0;
  padding: 0;
  font-family: "montserrat",sans-serif;
  box-sizing: border-box;
}
body{
  background: #f1f1f1;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
 .contact-info{
  display: flex;
  width: 100%;
  max-width: 1200px;
  align-items: center;
  justify-content: center;
  padding: 0 a;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}


.card{
  background: #2f3542;
  padding: 0 20px;
  margin: 0 10px;
  width: calc(33% - 20px);
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  cursor: pointer;
}

.card a{
    text-decoration: none;
    color: #fff;
}

.card-icon{
  font-size: 28px;
  background: #ff6348;
  width: 60px;
  height: 60px;
  text-align: center;
  line-height: 60px !important;
  border-radius: 50%;
  transition: 0.3s linear;
}

.card:hover .card-icon{
  background: none;
  color: #ff6348;
  transform: scale(1.6);
}

.card p{
  margin-top: 20px;
  font-weight: 300;
  letter-spacing: 2px;
  max-height: 0;
  opacity: 0;
  transition: 0.3s linear;
}

.card:hover p{
  max-height: 40px;
  opacity: 1;
}

CSS:

nav{
  display: flex;
    height: 80px;
    width: 100%;
    background: #ddd;
    align-items: center;
    justify-content: space-between;
    padding: 0 50px 0 100px;
    flex-wrap: wrap;
}
nav .logo{
  color: #012E40;
  font-size: 35px;
  font-weight: 600;
}
nav .logo span{
    color: #015958;
}
nav ul{
  display: flex;
  flex-wrap: wrap;
  list-style: none;
}
nav ul li{
  margin: 0 5px;
}
nav ul li a{
  color: #111;
  text-decoration: none;
  font-size: 18px;
  font-weight: 500;
  padding: 8px 15px;
  border-radius: 5px;
  letter-spacing: 1px;
  transition: all 0.3s ease;
}
nav ul li a.active,
nav ul li a:hover{
  color: #111;
  background: #fff;
}
nav .menu-btn i{
  color: #000;
  font-size: 22px;
  cursor: pointer;
  display: none;
}
input[type="checkbox"]{
  display: none;
}

Yukarıdaki kodların birincisi iletişim sayfasının ikincisi navbarın kodu. Resimler ekliyorum:

@Ecmel @Vavien.

raltahook07 · 3 Aralık 2022

Body'e verdiğin display align-items ve justify-contenti kaldırıp. Contact-info'ya margin: 0 Auto; yazarsan düzelecektir.

264523 · 3 Aralık 2022

HTML kodlarını da atsana.

682784 · 3 Aralık 2022

264523 dedi:
HTML kodlarını da atsana.

Pardon unutmuşum ekliyorum.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles/contact.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css">
    <title>TeknoloD</title>
</head>
<body>


    <nav>
        <div class="logo">Teknolo<span>D</span></div>

        <input type="checkbox" id="click">
        <label for="click" class="menu-btn">
        <i class="fas fa-bars"></i>

        </label>
        <ul>
           <li><a class="active" href="index.html">Anasayfa</a></li>
           <li><a href="takım.html">Takım</a></li>
           <li><a href="hakkında.html">Hakkında</a></li>
           <li><a href="iletişim.html">İletişim</a></li>
        </ul>
     </nav>

    <div class="contact-info">
        <div class="card">
          <i class="card-icon far fa-envelope"></i>
          <p><a href="#">E-Mail</a></li></p>
        </div>
 
        <div class="card">
            <a href="#"> <i class="card-icon fab fa-instagram"></i></a>
            <p><a href="#">Instagram</a></li></p>
        </div>
 
        <div class="card">
            <a href="#"> <i class="card-icon fab fa-github"></i></a>
            <p><a href="#">GitHub</a></li></p>
        </div>
      </div>

</body>
</html>

@264523

Galiba ilk attığım CSS kodundaki "body{" yüzünden oluyor. Onun yerine ne kullanabilirim?

raltahook07 · 3 Aralık 2022

Body'e verdiğin display align-items ve justify-contenti kaldırıp. Contact-info'ya margin: 0 Auto; yazarsan düzelecektir.

264523 · 3 Aralık 2022

raltahook07 dedi:
Body'e verdiğin display align-items ve justify-contenti kaldırıp. Contact-info'ya margin: 0 Auto; yazarsan düzelecektir.

Olmuyor hocam.

Niye böyle oldu bende anlamadım

682784 · 3 Aralık 2022

raltahook07 dedi:
Body'e verdiğin display align-items ve justify-contenti kaldırıp. Contact-info'ya margin: 0 Auto; yazarsan düzelecektir.

Bu kadar kolay olduğunu bilmiyordum. Çok teşekkürler. Çözüm olarak raporluyorum.

raltahook07 · 3 Aralık 2022

264523 dedi:
Olmuyor hocam.

Niye böyle oldu bende anlamadım

Oluyor aslında bende düzeldi.

Edit fiddle - JSFiddle - Code Playground

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

jsfiddle.net

Silinen üye dedi:
Bu kadar kolay olduğunu bilmiyordum. Çok teşekkürler. çözüm olarak raporluyorum.

Body etiketine fazla müdahale etmemeni öneririm mesela contacts kısmı için bir wrapper yani sarmalayan div koyup ona yazabilirsin stilleri.

682784 · 4 Aralık 2022

Şu şekilde oldu.

raltahook07 dedi:
Oluyor aslında bende düzeldi.

Edit fiddle - JSFiddle - Code Playground

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

jsfiddle.net

Body etiketine fazla müdahale etmemeni öneririm mesela contacts kısmı için bir wrapper yani sarmalayan div koyup ona yazabilirsin stilleri.

Teşekkürler.
Margin 0 auto'nun mantığı nedir acaba daha önce hiç denk gelmemiştim.

264523 · 4 Aralık 2022

raltahook07 dedi:
Oluyor aslında bende düzeldi.

Edit fiddle - JSFiddle - Code Playground

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

jsfiddle.net

Body etiketine fazla müdahale etmemeni öneririm mesela contacts kısmı için bir wrapper yani sarmalayan div koyup ona yazabilirsin stilleri.

Evet hocam oluyormuş

raltahook07 · 4 Aralık 2022

Silinen üye dedi:
Şu şekilde oldu.
Eki Görüntüle 1592436

Teşekkürler.
Margin 0 auto'nun mantığı nedir acaba daha önce hiç denk gelmemiştim.

Elementi yatay olarak ortalamak için kullanılıyor pek bir mantığı yok onun dışında
margin yerine dediğim şekilde bir sarmalayan bir div oluşturup display:flex; justify-content:center; verseniz yine aynı işe yarardı

Çözüldü Siteye navbar ekleyince sayfa bozuluyor

Ayrıntılı düzenleme

682784

Hectopat

raltahook07

264523

Gigapat

682784

Hectopat

raltahook07

Megapat

264523

Gigapat

682784

Hectopat

raltahook07

Megapat

Edit fiddle - JSFiddle - Code Playground

682784

Hectopat

Edit fiddle - JSFiddle - Code Playground

264523

Gigapat

Edit fiddle - JSFiddle - Code Playground

raltahook07

Megapat

Benzer konular