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.
</div>css kodu:
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>
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%;
}
}