Çözüldü HTML / CSS Menü boşluğunu nasıl gideririm?

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

Dabaddu38

Centipat
Katılım
15 Ekim 2019
Mesajlar
100
Çözümler
2
Yer
444th Air Base
Merhaba

Bu menü çubuğundaki aradaki boşlukları nasıl giderebilirim. HTML + CSS öğreniyorum. Çok uğraştım bir şey deneyince diğeri bozuluyor sürekli.

Ek Açıklama 2020-01-15 194608.png


HTML:
<!DOCTYPE html>
<html>
<head>
    <title>Menü</title>
    <meta charset="utf-8">
</head>
<body>
    <ul class="gez">
        <li><a href="/0">Anasayfa</a></li>
        <li><a href="/0">Hakkımızda</a></li>
        <li><a href="/0">Tarihçe</a></li>
        <li><a href="/0">Vizyon</a></li>
        <li><a href="/0">Misyon</a></li>
        <li><a href="/0">Faaliyetlerimiz</a></li>
        <li><a href="/0">Basında Biz</a></li>
        <li><a href="/0">İletişim</a></li>
    </ul>
</body>
</html>

CSS:
.gez {
    margin: 20px 10px;
    text-align:center;
    width : 100%;
    list-style: none;
    padding:0;
}

.gez li {
    float: left;
    list-style-type: none;
    padding: 0 10px 0 0;
    float: none;
    display: inline-block;
}

.gez li a {
    background: #444;
    color: #fff;
    display: block;
    padding: 10px 20px;
    text-decoration: none;
}

.gez li a:hover {
    background: #666
}

.gez li:first-child a {
    border-radius: 30px 0 0 30px;
}

.gez li:last-child a {
    border-radius: 0px 30px 30px 0px;
}
 
Son düzenleyen: Moderatör:

xenefon

Hectopat
Katılım
23 Aralık 2014
Mesajlar
125
Makaleler
1
Çözümler
1
Bu css kodundaki fark menünün eni ölçeklendiriliyor. Padding sıfırlanıyor.
CSS:
.gez {
    text-align:center;
    list-style: none;
    width: 900px;
    margin: 20px auto;
}

.gez li {
    float: left;
    list-style-type: none;
}

.gez li a {
    background: #444;
    color: #fff;
    display: block;
    padding: 10px 20px;
    text-decoration: none;
}

.gez li a:hover {
    background: #666
}

.gez li:first-child a {
    border-radius: 30px 0 0 30px;
}

.gez li:last-child a {
    border-radius: 0px 30px 30px 0px;
}
 
Katılım
18 Ağustos 2014
Mesajlar
2.136
Çözümler
24
li'ye verdiğiniz padding yalnızca sağdan 10piksellik boşluk vermeyi sağlıyor. Bu padding özelliğini li'ye değil içerisindeki a'ya vermiş olsaydınız o boşluklar olmazdı. Yani; .gez li içerisindeki padding özelliğini kaldırın.
 
KS
Dabaddu38

Dabaddu38

Centipat
Katılım
15 Ekim 2019
Mesajlar
100
Çözümler
2
Yer
444th Air Base
Yani; .gez li içerisindeki padding özelliğini kaldırın.
Evet, kaldırınca boşluk kıslaldı ama tam olarak birleşmedi.
Bu css kodundaki fark menünün eni ölçeklendiriliyor. Padding sıfırlanıyor.
Boşluk kalmadı. Teşekkürler. Ama ben pixel değilde yüzde olarak çalışmak istiyordum. Tarayıcının çözünürlüğünü değiştirince yazılar kayboluyor. yüzde ile çalışıp mobil uyumlu olmasını istiyorum. Verdiğiniz değeri 90% ile değiştirince de menü sayfanın tam ortasında olmuyor sola yatık oluyor.

@overvoltage arkadaşın dediğini yapınca oldu, teşekkür ediyorum.
 
Katılım
18 Ağustos 2014
Mesajlar
2.136
Çözümler
24
Ek olarak, Türkçe kodlarla yazılım geliştirmeyin. İngilizce kullanmaya alışın sürekli İngilizce kullanın.
 

xenefon

Hectopat
Katılım
23 Aralık 2014
Mesajlar
125
Makaleler
1
Çözümler
1
Mobil uyumlu olması için ayrı bir kod bloğu gereker. Mesela şu şekilde:
CSS:
.gez {
    text-align:center;
    list-style: none;
    width: 900px;
    margin: 20px auto;
}

.gez li {
    float: left;
    list-style-type: none;
}

.gez li a {
    background: #444;
    color: #fff;
    display: block;
    padding: 10px 20px;
    text-decoration: none;
}

.gez li a:hover {
    background: #666
}

.gez li:first-child a {
    border-radius: 30px 0 0 30px;
}

.gez li:last-child a {
    border-radius: 0px 30px 30px 0px;
}

@media screen and (max-width: 800px) {

.gez {
    width: 90%;
    padding: 0;
}

.gez li {
    float: none;
}

.gez li:first-child a {
    border-radius: 0;
}

.gez li:last-child a {
    border-radius: 0;
}

}

Bu kod ile 800px'den küçük ekranlı cihazlarda responsive bir menüye döner.
 
Yukarı