Index Sayfasını Yüzde Yüz Olmuyor

Bu konuyu okuyanlar

mali2012

Asistan
Katılım
10 Eyl 2012
Mesajlar
139
Reaksiyon puanı
9
Puanları
18
Arkadaşlar merhaba. Sayfayı mobil boyutta açtığımda amblem solda mobil menü simgesi en sağda oluyor ama sayfayı kaydırmak gerekiyor, simgeye ulaşabilmek için. Resmini ve kodları ekliyorum. Yardımcı olabilir misiniz?
1. Resim - Sitenin normal görünümü
2. Resim - Sitenin mobil görünümü ama en sol kısmı
3. Resim - Sitenin mobil görünümü ama en sağ kısmı

index.php
<!DOCTYPE html>
<html>
<head>
<title>Dernek Sitesi</title>

<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/normalize.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>

<div class ="container">
<nav>
<input type="checkbox" id="check">
<label for="check" class="checkbtn">
<i class="fas fa-bars"></i>
</label>
<label class="logo">Bozkır</label>
<ul>
<li><a class="active" href="#">Anasayfa</a></li>
<li><a href="#">Anasayfa</a></li>
<li><a href="#">Anasayfa</a></li>
<li><a href="#">Anasayfa</a></li>
<li><a href="#">Anasayfa</a></li>
</ul>
</nav>

<?php /* include "slider.php"; */ ?>

</div>

</body>
</html>
---------------------
style.css
.container {
width:1100px;
height:850px;
background-color:red;
color:#fff;
margin-right:auto;
margin-left:auto;
}

nav {
background:#0082e6;
height:80px;
width:100%;
}

label.logo {
color:white;
font-size:35px;
line-height:80px;
padding:0 50px;
font-weight:bold;
}

nav ul {
float:right;
margin-right:20px;
}

nav ul li {
display:inline-block;
line-height:55px;
margin:0 5px;
}

nav ul li a {
color:white;
font-size:17px;
padding:0px 13px;
border-radius:3px;
text-transform:uppercase;
text-decoration:none;
}

a.active,a:hover {
background:#1b9bff;
transition: .5s;
}

.checkbtn {
font-size:30px;
color:white;
float:right;
line-height:80px;
margin-right:40px;
cursor:pointer;
display:none;
}

#check {
display:none;
}

@media (max-width:768px) {
label.logo {
font-size:30px;
padding-left:50px;
}

nav ul li a {
font-size:16px;
}
}

@media (max-width:768px) {
.checkbtn {
display:block;
}

ul {
position:fixed;
width:100%;
height:100vh;
background:#2c3e50;
margin-top:0;
left:0;
text-align:center;
transition:all .5s;
}
nav ul li {
display:block;
margin:50px 50px 20px 0px;
line-height:30px;
}
nav ul li a {
font-size:20px;
text-decoration:none;
}
a:hover,a.active {
background:none;
color:#0082e6;
}
#check:checked ~ ul {
left:0;
}
}

Resim 1.jpg

Resim 2.jpg

Resim 3.jpg
 

Asuna-san

Öğrenci
Katılım
10 Eyl 2020
Mesajlar
36
Reaksiyon puanı
15
Puanları
8
Yaş
20
Dostum kodlarını inceledim çok karmaşık çalışmışsın sıfırdan yapmanı tercih ederim bazı temel mantıkları bilmediğini düşünüyorum gereksiz fazla position: ; komutu kullanmışsın width ,height'lerle çok oynamışsın auto felan vermişsin sıfırdan temizden yapmanı öneririm eğer kendini geliştirmek istiyorsan udemy'den ders alabilirsin. Bu sorunu yaşamandaki sebep mobile göre uyumluluk yapmamışsın height,width vs vermemişsin sadece bu kısmı kopyala değiştir.
Kod:
@media (max-width:768px) {
.checkbtn {
display:block;
}
ul{
    display: none; /*  Burada UL'u kapattım sadece menüye tıkladığında aktif et dostum. (araştır)*/
    position: fixed;
   width:100%;
  height:100vh;
}
nav{
    width: 43.5%;
   
}
html{
    overflow-x: hidden;
}

ul {
position:fixed;
width:100%;
height:100vh;
background:#2c3e50;
margin-top:0;
left:0;
text-align:center;
transition:all .5s;
}
nav ul li {
display:block;
margin:50px 50px 20px 0px;
line-height:30px;
}
nav ul li a {
font-size:20px;
text-decoration:none;
}
a:hover,a.active {
background:none;
color:#0082e6;
}
#check:checked ~ ul {
left:0;
}
 

Asuna-san

Öğrenci
Katılım
10 Eyl 2020
Mesajlar
36
Reaksiyon puanı
15
Puanları
8
Yaş
20
Screenshot bu resimde çıktısı.
ekstra olarak şöyle bir kod ekledim
Kod:
html{
overflow-x: hidden; /* 768px altına geçtiğinde html etiketleri arasında x yönündeki taşmalar gidecek ve sadece y yönündeki scroll bar'ı çevirebileceksin eğer yazdığım kodları denediysen görürsün iyi günler */
}
 
Son düzenleme:

Son mesajlar

Üst