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