Çözüldü Margin özelliği çalışmıyor

Bu konu çözüldü olarak işaretlenmiştir. Çözülmediğini düşünüyorsanız konuyu rapor edebilirsiniz.
Katılım
30 Kasım 2018
Mesajlar
5.765
Makaleler
2
Çözümler
14
Merhabalar, mavi alanlı section kısmını turuncu alandan yukarıdan margin veya padding verdim, hiçbiri çalışmıyor. Nerede hata var acaba?

HTML:
<main class="mother-main">

<section class="header-area">
<header class="header-main-area">

    <div class="logo-linkprimary">
        <div class="logo">
            <img src="img/logo.png" class="logo-image" alt="">
        </div>

        <nav class="navigation">
            <ul>
                <li><a href="hospital/hastanemiz.html">Hastanelerimiz</a></li>
                <li><a href="tıbbi-birimler/tibbi-bolumler.html">Tıbbi Birimlerimiz</a></li>
                <li><a href="hekimler.html">Hekimlerimiz</a></li>
                <li><a href="saglik-katalog.html">Sağlık Kataloğu</a></li>
                <li><a href="iletisim.html">İletişim</a></li>
            </ul>
        </nav>
        </div>

</header>
</section>

<section class="slider-area">

</section>

</main>


CSS:
*
{
    margin: auto;
    padding: 0;
    text-align: justify;
    font-family: Exo, -apple-system, BlinkMacSystemFont, Segoe UI,
 Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
 box-sizing: border-box;
}
body
{
    height: 100%;
    color: #000;
}
.mother-main
{
    width: 100%;
    height: 100%;
}
.header-area
{
    width: 100%;
    height: 70px;
    background-color:#F15A29;
    position: fixed;
    z-index: 1;
}

.logo-linkprimary
{
    width:90%;
    height: 50px;

    margin-top: 10px;
    margin-left: 50px;
    display: flex;
}
.logo
{
    width:200px;
    height: 45px;
    text-align: center;

}
.navigation
{
    width:730px;
    height: 50px;
    margin-left: 10px;
}
.logo-image
{
    position: relative;
    top:20%;
}
ul
{
    width: 727px;
    height: 35px;
    float: left;

    margin-top: 7px;
    margin-left: 10px;
    display: flex;
    justify-content: flex-start;
}

li
{
    list-style-type: none;
    width: 136px;
    float: left;
    margin-left: 7px;
    vertical-align: middle;
    margin-top: 6px;
    text-align: center;
    position: relative;
    color: #fff;
 
}
li::before
{
    width: 6px;
    height: 6px;
    background-color: #fff;
    list-style-type: disc;
    position: absolute;
    content: '';
    top:50%;
    border-radius: 50%;

}
.header-main-area
{
    width: 100%;
    height: 70px;
    display: flex;
    flex-wrap: nowrap;

}
li:nth-child(1)::before
{
    display: none;
}

li:nth-child(2)::before
{
    top:45%;
    left: 0px;
}
li:nth-child(2)
{
    width: 160px;
    padding-left: 5px;
    box-sizing: border-box;
}
li:nth-child(3)
{
    width: 140px;
    padding-left: 5px;
    box-sizing: border-box;
}
li:nth-child(5)
{
    width: 82px;
}
li:nth-child(4)
{
    width: 160px;
}
li:nth-child(3)::before
{
    top:45%;
    left: 6px;
}
li:nth-child(4)::before
{
    top:45%;
    left: 7px;
}
li:nth-child(5)::before
{
    top:45%;
    left: 0px;
}
a
{
    text-align: center;
    text-decoration: none;
    font-size: 17px;
    font-weight: 500;
    text-transform: capitalize;
    color: #fff;
    width: auto;
    height: auto;
    ;
}
.slider-area
{
    width:100%;
    height: 300px;
    background-color: aqua;
margin-top: 20px;
 
}
 
Çözüm
Çünkü header-area position:fixed ve mavi kısmın üstüne biniyor. Margin artarsa o zaman headerın yüksekliğini geçer ve çalışır.

Ayrıca ul'yi de flex yaparsan nth-child kullanarak tek tek width vermene gerek kalmaz.
Çünkü header-area position:fixed ve mavi kısmın üstüne biniyor. Margin artarsa o zaman headerın yüksekliğini geçer ve çalışır.

Ayrıca ul'yi de flex yaparsan nth-child kullanarak tek tek width vermene gerek kalmaz.
 
Son düzenleme:
Çözüm

Şu ana kadar Flex kavramını doğru kullanmış oluyor muyum acaba? Full- stack developer gözünden bakarsanız.


Gözüme çok orantısız boşluk var gibi geldi ondan ayrı ayrı verdim. Hafif simetri takıntım varda maalesef.

Kod uğraşınız için teşekkür ederim. İzniniz olursa body etiketine neden padding verdiniz ve neden padding verince çalışıyor.
 
Kod uğraşınız için teşekkür ederim. İzniniz olursa body etiketine neden padding verdiniz ve neden padding verince çalışıyor.
Çünkü header fixed olduğunda sayfada uçar pozisyonda ve tepede sabit kalıyor. Body elemanına padding verince de headerın uçtuğu alanı (70px) kullanım dışı bırakıyorum gibi düşünebilirsin.

Bu flex'in çok basit bir kullanım alanı. Daha fazla örnek bulmaya çalış.
 
Bu siteyi kullanmak için çerezler gereklidir. Siteyi kullanmaya devam etmek için çerezleri kabul etmelisiniz. Daha Fazlasını Öğren.…