chat eczaonline.com yazılım uzmanı

Divler üst üste çıkıyor

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)

Türkiye’nin ilk webmaster forum sitesi iyinet.com'da forum üyeleri tarafından yapılan tüm paylaşımlardan; Türk Ceza Kanunu’nun 20. Maddesinin, 5651 Sayılı Kanununun 4. maddesinin 2. fıkrasına göre, paylaşım yapan üyeler sorumludur. iyinet.com sayfalarında yer alan yazı, görsel ve linklerle ilgili hukuki şikayetleriniz için Buradan iletişime geçmeniz durumunda, ilgili kanunlar ve yönetmelikler çerçevesinde en geç 7 gün içerisinde iyinet yönetimince tarafınıza dönüş sağlanacaktır. Betcup Artemisbet Forum pulibet
Üst