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

mali2012 · 7 Ekim 2020

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

ointer;
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;
}
}

Asuna-san · 7 Ekim 2020

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 · 7 Ekim 2020

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 */
}

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

mali2012

Asistan

Asuna-san

Öğrenci

Asuna-san

Öğrenci

Benzer konular

SDN Haberleri

Son mesajlar

Forum istatistikleri

Sosyal ağlar