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

ErrorCorrection · 27 Şubat 2023

Ü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?

Beroski · 28 Şubat 2023

ErrorCorrection dedi:
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>

682784 · 27 Şubat 2023

Kodları atabilir misiniz?

ErrorCorrection · 27 Şubat 2023

Silinen üye dedi:
Kodları atabilir misiniz?

HTML:

<!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;
            padding: 2px;
        }
    </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>

Beroski · 28 Şubat 2023

Şu kodu main-div__item:hover sınıfı içine ekleyin düzelecektir.

Kod:

.main-div__item:hover {
  background-color: #F5FFC9;
  border: 2px solid #F5FFC9;
  box-sizing: border-box;
}

ErrorCorrection · 28 Şubat 2023

Beroski dedi:
Şu kodu main-div__item: Hover sınıfı içine ekleyin düzelecektir.

Kod:

.main-div__item:hover { background-color: #F5FFC9; border: 2px solid #F5FFC9; box-sizing: border-box; }

Değişmedi hocam maalesef.

Beroski · 28 Şubat 2023

ErrorCorrection dedi:
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>

ErrorCorrection · 28 Şubat 2023

Beroski dedi:

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>

Oldu hocam teşekkür ederim. Bende eklemiştim de border box özelliğini ama yanlış yere eklemiştim galiba
İyiy Sosyaller.

Beroski · 28 Şubat 2023

ErrorCorrection dedi:
Oldu hocam teşekkür ederim. Bende eklemiştim de border box özelliğini ama yanlış yere eklemiştim galiba
İyiy Sosyaller.

Tam da yeni kod paylaşmıştım, neyse düzelmişse sevindim. İyi geceler dilerim.

ErrorCorrection · 28 Şubat 2023

Beroski dedi:
Tam da yeni kod paylaşmıştım, neyse düzelmişse sevindim. İyi geceler dilerim.

Yeni kodu da paylaşın hocam. Belki işime yarar sonradan.

Beroski · 28 Şubat 2023

ErrorCorrection dedi:
Yeni kodu da paylaşın hocam. Belki işime yarar sonradan.

Paylaştım "edit" diye belirterek.

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

Ayrıntılı düzenleme

ErrorCorrection

Hectopat

Beroski

682784

Hectopat

ErrorCorrection

Hectopat

Beroski

Hectopat

ErrorCorrection

Hectopat

Beroski

Hectopat

ErrorCorrection

Hectopat

Beroski

Hectopat

ErrorCorrection

Hectopat

Beroski

Hectopat

Benzer konular