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

Dabaddu37 · 15 Ocak 2020

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.

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

Theİ3lü · 15 Ocak 2020

Kutuların boyutunu büyütün.

overvoltage · 15 Ocak 2020

CSS:

.gez li {
    margin-right: -14px;
}

xenefon · 15 Ocak 2020

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

Fatalis · 16 Ocak 2020

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.

Dabaddu37 · 16 Ocak 2020

Fatalis dedi:
Yani; .gez li içerisindeki padding özelliğini kaldırın.

Evet, kaldırınca boşluk kıslaldı ama tam olarak birleşmedi.

xenefon dedi:
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.

Fatalis · 16 Ocak 2020

Ek olarak, Türkçe kodlarla yazılım geliştirmeyin. İngilizce kullanmaya alışın sürekli İngilizce kullanın.

xenefon · 16 Ocak 2020

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.

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

Ayrıntılı düzenleme

Dabaddu37

Hectopat

overvoltage

Theİ3lü

Decapat

overvoltage

Centipat

xenefon

Kilopat

Fatalis

Megapat

Dabaddu37

Hectopat

Fatalis

Megapat

xenefon

Kilopat

Benzer konular

Yeni konular

Yeni mesajlar

Gizliliğinize önem veriyoruz