Çözüldü CSS elementin Padding'i artınca arka plan kayıyor

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

ErrorCorrection

Hectopat
Katılım
11 Ağustos 2022
Mesajlar
2.547
Çözümler
4
Daha fazla  
Cinsiyet
Erkek




Üstüne geldiğinde Paddin'i 5px artması için ayarladım ama arkadaki sarı arka plan aşağıya kayıyor.
Nasıl çözebilirim?
 
Çözüm
Değişmedi hocam maalesef.
Tekrar şu kodu dener misin.

Kod:
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Css-sites</title>
    <style type="text/css">
        body {
            margin: 0;
        }

        * {
            margin: 0;
        }

        .navbar {
            background-color: yellow;
            padding: 15px 0 15px 10px;
        }

        .main-div__items > li > a {
            text-decoration: none;
            color: #4E6E81;
            font-weight: bold;
            font-size: 15px;
            font-family: sans-serif;
        }

        .main-div {
            display: inline-block;
            width: calc(100% - 150px);
            text-align: center;
        }

        .main-div__items {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .main-div__item {
            display: inline-block;
            margin-left: 10px;
            box-sizing: border-box;
        }

        .main_logo {
            color: #40513B;
            text-decoration: none;
            font-size: 15px;
            font-weight: bold;
        }

        .main-div__item:hover {
            background-color: #F5FFC9;
            border: 2px solid #F5FFC9;
        }
    </style>
</head>
<body>
    <header class="main-header">
        <div class="navbar">
            <div class="main-div">
                <ul class="main-div__items">
                    <li class="main-div__item"><a href="#">Bu</a></li>
                    <li class="main-div__item"><a href="#">Bir</a></li>
                    <li class="main-div__item"><a href="#">Deneme</a></li>
                    <li class="main-div__item"><a href="#">Yazısıdır.</a></li>
                </ul>
            </div>
        </div>
    </header>
</body>
</html>

Edit; Eğer ki yine düzelmezse border kodunu kaldırdım şu kodu deneyin.

Kod:
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Css-sites</title>
    <style type="text/css">
        body{
            margin: 0;
        }
        *{
            margin: 0;
        }
        .navbar{
            background-color: yellow;
            padding: 15px 0 15px 10px;
        }
        .main-div__items > li > a{
            text-decoration: none;
            color: #4E6E81;
            font-weight: bold;
            font-size: 15px;
            font-family: sans-serif;
        }
        .main-div{
            display: inline-block;
            width: calc(100% - 150px);
            text-align: center;
        }
        .main-div__items{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .main-div__item{
            display: inline-block;
            margin-left: 10px;
        }
        .main_logo{
            color: #40513B;
            text-decoration: none;
            font-size: 15px;
            font-weight: bold;
        }
        .main-div__item:hover{
            background-color: #F5FFC9;
            border: 2px solid #F5FFC9;
        }
    </style>
</head>
<body>
<header class="main-header">
<div class="navbar">
    <div class="main-div">
    <ul class="main-div__items">
        <li class="main-div__item"><a href="#">Bu</a></li>
        <li class="main-div__item"><a href="#">Bir</a></li>
        <li class="main-div__item"><a href="#">Deneme</a></li>
        <li class="main-div__item"><a href="#">Yazısıdır.</a></li>
    </ul>
    </div>
</div>
</header>
</body>
</html>
Padding: 2px stil özelliğini border: 2px Solid stil özelliği ile değiştirdim basit ama etkili. Henüz test etmedim siz test edip hata veriyorsa belirtin.

Etkisiz galiba çünkü border verdiğimde de hata veriyordu. Onu outline hata kalkıyor.
 
Bu siteyi kullanmak için çerezler gereklidir. Siteyi kullanmaya devam etmek için çerezleri kabul etmelisiniz. Daha Fazlasını Öğren.…