Parent elementin Padding'i ile child Padding'i birleştirme

ErrorCorrection · 18 Temmuz 2023

Başlıktan belki anlamamış olabilirsiniz.
Şimdi bir navbar içinde ben Ul'ye bir padding verdim mesela 10px bir Padding'i var.
Bu Ul'nin içindeki Li'ye 10px padding verince Ul'nin 10Px'li üzerine gelip 20px olması kötü gözükür.
Benim istediğim Li'ye verdiğimiz 10px Padding'in Ul'nin paddingi ile birleşmesi.

Biraz karışık gelmiş olabilir. Şöyle de anlatmayı deneyeyim. Bu fotoğrafta navigation Bar'ın bir kısmı gözükmekte. Ben ul etiketine bir padding verdim yukarıdan ve aşağıdan 10px verdim. Şimdi li etiketlerine hover olunca kötü gözüküyor ve iyi gözükmesi için ise li etiketlerinin bir Padding'i olması lazım. Ama padding verince li etiketllerine, ul etiketinin de Padding'i olduğu için toplamda 20Px'lik kötü bir görüntü oluyor.

Biliyorum biraz karışık anlamadığınız yer olursa sorun

533388 · 18 Temmuz 2023

@ErrorCorrection hocam ben hiçbir şey anlamadım biraz daha detaylı ve açıklayıcı anlatir misiniz?

ErrorCorrection · 18 Temmuz 2023

533388 dedi:
@ErrorCorrection hocam ben hiçbir şey anlamadım biraz daha detaylı ve açıklayıcı anlatir misiniz?

Hocam tam olarak nereyi anlamadınız? Öyle belirtirseniz daha iyi açıklayabilirim.

533388 · 18 Temmuz 2023

@ErrorCorrection hocam tam olarak ne istiyorsunuz kodunuzda onu anlamadim.

ErrorCorrection · 18 Temmuz 2023

533388 dedi:
@ErrorCorrection hocam tam olarak ne istiyorsunuz kodunuzda onu anlamadim.

Nasıl anlatsam bilemedim ki çok karışık. Neyse deneyeyim.

Hocam şimdi bir ul etiketimiz var ve paddingi 10px.
İçinde iseli etiketlerimiz var bunlara ise hover olduğunda bir arka plan oluşmasını istiyoruz.
Şimdi oluşacak arka plan çok çirkin görünecek çünkü hiç padddingi yok.
Bunun içinli etiketine bir padding verdik 10px.
Amali etiektine verdiğimiz 10px ile ul etiketine verdiğimi< 10px birleşti ve 20px oldu. Ve navigation barı'ımız 10px arttı ve kötü durdu.
Ben burada hover olunca Padding'i direk ul elemntiyle birleştirmek istiyorum.

533388 · 18 Temmuz 2023

@ErrorCorrection hocam siz en iyisi yapmak istediğiniz projenin videosunu ya da resmini çekip atın ya da kodları ben size yapıp buradan paylaşayım ya da size direk bir tane navbar yapıp atım sizde inceleyin.

pottie4r · 18 Temmuz 2023

Bir daha li'lere padding vermenize gerek yok. li'ler için
display:flex;
align-items:center;
justify-content:center;
uygulayıp dener misiniz?

ErrorCorrection · 18 Temmuz 2023

533388 dedi:
@ErrorCorrection hocam siz en iyisi yapmak istediğiniz projenin videosunu ya da resmini çekip atın ya da kodları ben size yapıp buradan paylaşayım ya da size direk bir tane navbar yapıp atım sizde inceleyin.

pottie4r dedi:
Bir daha li'lere padding vermenize gerek yok. li'ler için
display:flex;
align-items:center;
justify-content:center;
uygulayıp dener misiniz?

https://codepen.io/ErrorFromJs/pen/XWyqpYQ

533388 · 18 Temmuz 2023

@ErrorCorrection hocam siz buna tam olarak ne yapılmasını istiyorsunuz.

pottie4r · 18 Temmuz 2023

CSS:

   body {
      margin: 0;
      padding: 0;
    }
.navbar h1{
  margin:0;
}
    .navbar {
      background-color: #f2f2f2;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding:0 30px;
    }

    .navbar h1 {
        font-size: 24px; /* Başlık boyutu */
    }

    .navbar ul {
        list-style-type:none;
        display:flex;
        gap: 20px;
     }
    
     .navbar li{
       padding:20px;
       /* İşte buraya padding konulunca çok büyük oluyor. Konulmayınca kötü duruyor. */
       border-radius:10px;
       margin-left :10px;
     }

    .navbar li:hover{
      cursor:pointer;
      background-color:black;
      color:white;
    }

Parent elementin Padding'i ile child Padding'i birleştirme

Ayrıntılı düzenleme

ErrorCorrection

Hectopat

533388

Hectopat

ErrorCorrection

Hectopat

533388

Hectopat

ErrorCorrection

Hectopat

533388

Hectopat

pottie4r

Megapat

ErrorCorrection

Hectopat

533388

Hectopat

pottie4r

Megapat

Benzer konular

Technopat Haberler

Yeni konular

Yeni mesajlar

Gizliliğinize önem veriyoruz