Çözüldü CSS görsel tam ekran yapılmıyor

Onur Ulucan · 28 Haziran 2023

Kodlarım şu şekilde;

CSS:

@import url("https://fonts.googleapis.com/css2?family=Titillium+Web:wght@400;700&display=swap");
* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 font-family: "Titillium Web", sans-serif;
}
.container {
 width: 100%;
 height: 100vh;
 padding-left: 8%;
 padding-right: 8%;
 background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
 url(./images/bg.png);
 background-position: center;
 background-size: cover;
}
.navbar {
 display: flex;
 justify-content: space-between;
 align-items: center;
}
nav ul {
 display: flex;
 list-style: none;
 column-gap: 15px;
}
nav ul li a {
 color: white;
 text-decoration: none;
 transition: all 0.5s ease;
 font-weight: 400;
}
nav ul li a:hover {
 color: black;
}
.row {
 color: black;
}

Tam ekran gözükmesi gerekirken alttaki beyaz barın neden çıktığını anlamıyorum. Yardımcı olabilecek var mı?

Onur Ulucan · 28 Haziran 2023

Nullo dedi:
Doğru çalışıyor. Resim tam ekran zaten. Beyaz barın nerede olmasını istiyorsun?

Tamamdır hocam çözdüm. Alttaki divleri container kapsayıcısının içine almak yerine komple dışarı yazmışım bu yüzden sorun oluyormuş çok teşekkür ederim.

Çözüm: Col class'ına sahip left ve rıght divlerini "container" divinin içerisine aldığımızda sorun düzeliyor.

Nullo · 28 Haziran 2023

HTML kodlarını da yazabilir misin?

Berat.xx56 · 28 Haziran 2023

Onur Ulucan dedi:

Kodlarım şu şekilde;

CSS:

@import url("https://fonts.googleapis.com/css2?family=Titillium+Web:wght@400;700&display=swap");
* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 font-family: "Titillium Web", sans-serif;
}
.container {
 width: 100%;
 height: 100vh;
 padding-left: 8%;
 padding-right: 8%;
 background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
 url(./images/bg.png);
 background-position: center;
 background-size: cover;
}
.navbar {
 display: flex;
 justify-content: space-between;
 align-items: center;
}
nav ul {
 display: flex;
 list-style: none;
 column-gap: 15px;
}
nav ul li a {
 color: white;
 text-decoration: none;
 transition: all 0.5s ease;
 font-weight: 400;
}
nav ul li a:hover {
 color: black;
}
.row {
 color: black;
}

Tam ekran gözükmesi gerekirken alttaki beyaz barın neden çıktığını anlamıyorum. Yardımcı olabilecek var mı?

PC de değilim denemedim ama bi' .container height: calc(100vh + 100px) dener misin?

Onur Ulucan · 28 Haziran 2023

Nullo dedi:
HTML kodlarını da yazabilir misin?

Tabii ki buyur;

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ARABA PROJESİ</title>
    <link rel="stylesheet" href="style.css" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
      integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
  </head>
  <body>
    <div class="container">
      <div class="navbar">
        <a href="#">
          <img src="images/logo.png" alt="logo" />
        </a>
        <nav>
          <ul>
            <li>
              <a href="">HOME</a>
            </li>
            <li>
              <a href="">OUR CARS</a>
            </li>
            <li>
              <a href="">ABOUT</a>
            </li>
            <li>
              <a href="">CONTACT</a>
            </li>
            <li>
              <a href=""> <i class="fa-solid fa-bars"></i></a>
            </li>
          </ul>
        </nav>
      </div>
    </div>

    <div class="row">
      <div class="col">left</div>
      <div class="col">right</div>
    </div>
  </body>
</html>

Berat.xx56 · 28 Haziran 2023

Ya da height: calc(100vh - 100px) olmuyor mu?

Nullo · 28 Haziran 2023

Onur Ulucan dedi:

Tabii ki buyur;

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ARABA PROJESİ</title>
    <link rel="stylesheet" href="style.css" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
      integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
  </head>
  <body>
    <div class="container">
      <div class="navbar">
        <a href="#">
          <img src="images/logo.png" alt="logo" />
        </a>
        <nav>
          <ul>
            <li>
              <a href="">HOME</a>
            </li>
            <li>
              <a href="">OUR CARS</a>
            </li>
            <li>
              <a href="">ABOUT</a>
            </li>
            <li>
              <a href="">CONTACT</a>
            </li>
            <li>
              <a href=""> <i class="fa-solid fa-bars"></i></a>
            </li>
          </ul>
        </nav>
      </div>
    </div>

    <div class="row">
      <div class="col">left</div>
      <div class="col">right</div>
    </div>
  </body>
</html>

Doğru çalışıyor. Resim tam ekran zaten. Beyaz barın nerede olmasını istiyorsun?

Onur Ulucan · 28 Haziran 2023

Nullo dedi:
Doğru çalışıyor. Resim tam ekran zaten. Beyaz barın nerede olmasını istiyorsun?

Tamamdır hocam çözdüm. Alttaki divleri container kapsayıcısının içine almak yerine komple dışarı yazmışım bu yüzden sorun oluyormuş çok teşekkür ederim.

Çözüm: Col class'ına sahip left ve rıght divlerini "container" divinin içerisine aldığımızda sorun düzeliyor.

Çözüldü CSS görsel tam ekran yapılmıyor

Ayrıntılı düzenleme

Onur Ulucan

Megapat

Dosya Ekleri

Onur Ulucan

Nullo

Kilopat

Berat.xx56

Decapat

Onur Ulucan

Megapat

Berat.xx56

Decapat

Nullo

Kilopat

Onur Ulucan

Megapat

Benzer konular