CSS ile Kutu Şeklinde Menü Hazırlamak (display:block)

14 Nisan 2009
Kategori Menüler | 2 Yorum

İlk önce html sayfamızı oluşturup index.html olarak kayıt edin içerisindeki kodlar aşağıda.

HTML:
<div id="menu">
<ul>
    <li> <a href="hakkimizda.html">Anasayfa</a></li>
    <li> <a href="hakkimizda.html">Hakkımızda</a></li>
    <li> <a href="urunler.html">Ãœrünler</a></li>
    <li> <a href="üye girisi.html">üyegiriÅŸi</a></li>
    <li> <a href="iletisim.html">iletiÅŸim</a></li>
</ul>
</div>

Bir dosya daha oluşturup menu.css diye kayıt edin.

CSS:
body {
font-family:tahoma;
font-size:12px;
}
#menu  ul
{
list-style:none
}
#menu  ul li
{
text-align:center;
width:100px;
display:block;
}
#menu  ul li a
{
color:yellow;
padding:10px 0px 0px 0px;
text-decoration:none;
height:30px;
background-color:red;
display:block;
}
#menu  ul li a:hover
{
color:red;
text-decoration:underline;
background-color:yellow;
display:block;
}

CSS dosyasını oluştururken ilk önce

body ile sayfamızın yazı fontunu ve yazı büyüklüğü ayarladık.İstersek bunu a ve a:hover etiketleri içindede tanımlaya bilirsiniz.

CSS:
body {
font-family:tahoma;
font-size:12px;
}

Listemizin önündeki noktaları iptal etmek için ul etiketi içindeki noktaları aşağıdaki kodu yazıyoruz.

CSS:
#menu  ul
{
list-style:none
}

ul etiketi içindeki li etikerlerini block biçimi alması için display:block; yazıları ortalamak için text-align:center; li nin genişliği içinde width:100px; yazıyoruz.

CSS:
#menu  ul li

{
text-align:center;
width:100px;
display:block;
}

a yani link etiketimiz içinde renk belirliyoruz site açıldığında linklerin rengi color:yellow; linklerin üste yapışık çıkmaması için padding:10px 0px 0px 0px;
altındaki çizgiyi kaldırmak için text-decoration:none; yüksekliğini belirtmek için height:30px; arkaplan rengi için background-color:red; block şeklini alması için display:block; kullanıyoruz.

CSS:
#menu  ul li a

{

color:yellow;

padding:10px 0px 0px 0px;

text-decoration:none;

height:30px;

background-color:red;

display:block;

}

üstüne geldiğinde renklerin değişmesi için color:red; renkleri değiştiriyoruz text-decoration:underline; yazıların altını çiziyoruz background-color:yellow; arkaplan resmini değiştiriyoruz display:block; şeklinde görünyülüyoruz.

CSS:
#menu  ul li a:hover

{
color:red;
text-decoration:underline;
background-color:yellow;
display:block;
}

menülerin soldan sağa doğru sıralanması için float:left; kodunu #menu ul li içerisine ekliyoruz.

CSS:
#menu  ul li

{
text-align:center;
width:100px;
display:block;
float:left;
}

menülerin sağdan sola doğru sıralanması için float:right; kodunu #menu ul li içerisine ekliyoruz.

CSS:
#menu  ul li

{
text-align:center;
width:100px;
display:block;
float:right;
}

Renkler: , , , , , , , ,

Reklam Bolumu

Baðlantýlar

Webmaster Sözlük Yakında

Webmaster sözlük çok yakında hizmetinize açılacaktır.