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

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

Onur Ulucan

Megapat
Katılım
14 Haziran 2016
Mesajlar
152
Çözümler
4
Yer
İstanbul
Daha fazla  
Cinsiyet
Erkek
Meslek
Öğrenci
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ı?
 

Dosya Ekleri

  • Adsaaız.png
    Adsaaız.png
    2,8 MB · Görüntüleme: 70
Çözüm
Onur Ulucan
Nullo dedi:
Doğru çalışıyor. Resim tam ekran zaten. Beyaz barın nerede olmasını istiyorsun?
Genişletmek için tıkla...

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.
Tarihe göre sırala Puana göre sırala
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ı?
Genişletmek için tıkla...
PC de değilim denemedim ama bi' .container height: calc(100vh + 100px) dener misin?
 
Son düzenleyen: Moderatör:
Artı 0 Eksi
Nullo dedi:
HTML kodlarını da yazabilir misin?
Genişletmek için tıkla...
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>
 
Son düzenleyen: Moderatör:
Artı 0 Eksi
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>
Genişletmek için tıkla...
Doğru çalışıyor. Resim tam ekran zaten. Beyaz barın nerede olmasını istiyorsun?
 
Artı 0 Eksi
Nullo dedi:
Doğru çalışıyor. Resim tam ekran zaten. Beyaz barın nerede olmasını istiyorsun?
Genişletmek için tıkla...

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.
 
Artı 1 Eksi
Çözüm

Benzer konular

Y
  • Soru
CSS ile şekildeki görsel nasıl elde edilebilir?
Mesaj
2
Görüntüleme
199
delikarga
delikarga
manyetiklahmacun
  • Soru
CSS ile background boyutu tam oturmuyor
Mesaj
5
Görüntüleme
819
manyetiklahmacun
manyetiklahmacun
k1ttywnn
  • Makale
Rehber  HTML CSS için mobil ekran ölçeklendirme kodları
Mesaj
9
Görüntüleme
825
706111
7
C
  • Soru
Görseldeki web sitesini HTML ve CSS kullanarak tasarlama
Mesaj
4
Görüntüleme
475
coderss
C
SadeceBirİnsanAHuman
  • Çözüldü
Çözüldü  CSS ile görseli sayfaya sıkıştırma
Mesaj
2
Görüntüleme
617
SadeceBirİnsanAHuman
SadeceBirİnsanAHuman

Technopat Haberler

Yeni konular

Yeni mesajlar

Geri
Yukarı