Css ve Xhtml İle Yatay Menü Oluşturma

[guclusat]

Bu yazımda sizlere basitce bir yatay menü yapmayı anlatıcam menümüzü yaparken xhtml ve css kodlamalarından faydalanıcaz.Günümüzde bir çok sitede kullanılan css menüler sabit düz menülerin tahtına çokdan oturmuş durumda artık sabit menüler yerine hareketli css menüler kullanılmakta bu menülerin yapımına basitce örnek vererek şık bir css yatay menü hazırlayalım hazırlarken kullanacağımız tek şey boş bir not defteri hiç bir tasarım programına ihtiyaç duymuyoruz..
Aşağıda vermiş olduğum kodları boş bir not defterine yapıştırıp style.css adıyla kaydedin.

#menu {
width:600px;
height:40px;
background-image:url(menubg.gif);
color:#fff;
font:bold 14px arial, verdana, helvetica, sans-serif;
border:1px solid #999;
}

#menu ul {
list-style-type:none;
padding:0;
margin:0;
}

#menu li {
display:inline;
margin:0;
padding:0;
}

#menu li a {
text-decoration:none;
color:#fff;
background:#333 url(menubg.gif);
padding:12px;
float:left;
}

#menu li a:hover {
color:#333;
background:#fff url(menuhover.gif);
text-decoration:none;
padding:12px;
float:left;
}
style dosyamızı oluşturmuş olduk sıra geldi menümüzün görünür kısmını oluşturmaya.Aşağıda verdiğim kodları menu.html veya linkler.html adıyla kaydedebilirsiniz isteğinize kalmış kaydedip style dosyamızı kaydettiğimiz dizine kaydediyoruz.