Ana içeriğe atla

CSS üstte sabit duran menü yapımı

Sitenin en üstünde sabir şekilde duran menüler ile birçok site ve blog’da karşılaşıyoruz. Benzer bir menüyü sizde sitenize eklemek istiyorsanız basitçe özel hazırlanan bu örneği de kullanabilirsiniz.

 HTML Kodu:

<html>
<head>
    <meta charset="utf-8">
    <title>Yusuf Akdin</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="ust">
        Üst taraftaki sabit menü
    </div>
    <div class="orta">
        Site İçeriği
    </div>
</body>
</html>

CSS Kodu:

html,body{
    margin: 0;
    padding: 0;
}
 
body{
    font-family: 'lucida grande',tahoma,verdana,arial,sans-serif;
    font-size: 100%;
    background-color: #CCCCCC;
    width: 100%;
    text-align: center;
}
 
.ust{
    position: fixed;
    width: 100%;
    height: 50px;
    background-color: #FFF;
    border-bottom: 1px solid #111;
    z-index: 2;
}
 
.orta{
    position: absolute;
    top: 350px;
    width: 100%;
    height: 800px;
    z-index: 1;
}
Etiketler:

Yorumlar

Yorum Gönder

Bu blogdaki popüler yayınlar

Css ve Div ile Web Sitesi Yapmak

XHTML Kodumuz: <div id= "site" > <div id= "ust" > üst kısım </div> <div id= "icerik" > içerik </div> <div id= "sol" > sol kısım </div> <div id= "alt" > alt kısım </div> </div> CSS Kodumuz: #site { width : 768px ; margin:0 auto; /* sayfayı ortalama kodu */ } #ust { width : 768px ; } #icerik { float : right ; /* sağ tarafa yaslama kodu */ width : 568px ; } #sol { float : left ; /* sol tarafa yaslama kodu */ width : 200px ; } #alt { width : 768px ; clear : both ; /* bir çeşit float temizleme kodu, bu kod ile alt kısım alt tarafta kalacak*/ }
Yorum Gönder
Devamı

Normalize.Css Nedir? Nerede Kullanılır? Ne işe Yarar?

Normalize.css ile bütün tarayıcıları ayarlarını normalleştirerek yazdığımız kodların anormal bir şekilde her tarayıcıda farklı bir görünüm ve anlayış göstermemesini sağlar. Normalize.css'in yenilikçi bir yapıt olmasının en iyi örneği HTML5 uyumlu bir durumda ve mobil site anlayışında bile etkileyici bir uyumluluk söz konusu. Hoşunuza gitmeye başladı öyle değil mi? Haklısınız çünkü Normalize.css'i  Twitter Boostrap ,  CSS Tricks ,  GitHub ,  SoundCloud  gibi yapıtlar da kullanıyor. Normalize.css'i indirmek için : https://necolas.github.io/normalize.css linkine tıklayıp download butonu yardımıyla Normalize.css'in en güncel sürümüne ulaşabilie ve indirebilirsiniz. Normalize.css'i projemde nasıl kullanabilirim? : Aşağıdaki kodu yardımıyla kolayca projenizde kullanabilirsiniz. <link href="normalize.css" rel="stylesheet">
Yorum Gönder
Devamı