Divler üst üste çıkıyor

muharremB

Yeni Üye
İYİNET Üyesi
Katılım
18 Ara 2018
Mesajlar
2
Beğeniler
0
Yaş
28
#1
Merhaba iyi forumlar, ders için hazırladığım html+css sitede menüde divler üstü üstüne biniyor.Denemediğim yol kalmadı margin ile ikinci divi alta almaya çalışıyorum ama ikisi birden alta iniyor.Forumlarda olabilecek çözüm yollarının hepsini denedim yardımcı olabilirseniz çok sevinirim.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Anasayfa</title>

    <link rel="stylesheet" href="kaynak/css/style.css">
    <link href="https://fonts.googleapis.com/css?family=Lato:100,300,300i,400" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="kaynak\css\normalize.css">
    <link rel="stylesheet" type="text/css" href="kaynak\css\grid.css">
</head>

<body>
<header>
    <div id="baslik">
        <a href="index.html" id="site-logo"><img src="kaynak/img/logo.png" height="100" width="200"></a>
        <nav>
            <a href"#" id="menu-icon"></a>
            <ul>
                <li><a href="#">ANASAYFA</a></li>
                <li><a href="#">POP</a></li>
                <li><a href="#">YABANCI</a></li>
                <li><a href="#">HABER&SPOR</a></li>
                <li><a href="#">DİNİ</a></li>
                <li>
                <form class="arama-formu">
                    <input type="text" placeholder="Ne dinlemek istersin"/>
                </form>
            </li>
            </ul>
        
        
        
        </nav>
    
    
    
    </div>
<div class="temizle"></div>

</header>

<div class="ana-alan">
    <div class="radyolar">
        <a href="#">kral ffm</a>
    </div>
</div>





</body>
</html>
</div>css kodu:
HTML:
*{
    margin:0px;
    padding:0px;    
    }
    
body{
    font-family: "Lato", Arial, sans-serif;
    width: 1170px;
        }


header{
    background:tomato;
    color:white;
    position:fixed;
    width:100%;    
    height: auto;
    }
    
#baslik{
    max-width:1170px;
    margin:0px auto;
    float: none;
    }
#baslik #site-logo {
    float: left;
    line-height: 86px;
    width: 260px;
    height: 100px;
    font-weight: 700;
    font-size: 36px;
    color: white;
    text-decoration: none;
}
#baslik a img{
    padding-left: 0px;
}
#baslik nav {
    float: right;
    margin-right: 20px;
}
#baslik nav #menu-icon {
    background-image: url(img/icon.png);
    height: 34px;
    width: 40px;
}
#baslik nav ul {
    list-style-type: none;
}
#baslik nav ul li {
    display: inline-block;
    padding-right: 10px;
}
#baslik nav ul li a {
    color: #FFF;
    text-decoration: none;
    line-height: 86px;
    font-weight: 700;
}
#baslik nav ul li a:hover {
    text-decoration: underline;
    font-size: 20px;
    background-color: rgb(47,29,32);
    
}
input[type=text] {
  width: 100%;
  height: 20px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  font-size: 16px;    
  padding: 12px 20px 12px 40px;
}

.ana-alan{
    height: auto;
    width: 80%;
    display: block;
}
.radyolar{

    height: 150px;
    border:1px solid black;
    display: block;

}
.temizle{
    clear: both;
}
@media screen and (max-width:768px){
    header{
        position:absolute;
            
                
        }
    
    
        
    #baslik nav #menu-icon{
        
        display:inline-block;
        margin-top:25px;
        }
    
    #baslik nav:hover ul{
        display:block;
            
        }
        
    #baslik nav ul, #baslik nav :active ul{
        
        display:none;
        position:absolute;
        background:tomato;
        width:30%;
        right:20px;
        border:1px solid #FFF;
        border-radius:10px;
            
        }    
        
    nav li{
        text-align:center;
        width:100%;    
                }
        
   
    }
 

Bu konuyu okuyanlar (Üyeler: 1, Misafirler: 0)

Üst