İlk önce html sayfamızı oluşturup index.html olarak kayıt edin içerisindeki kodlar aşağıda.
Bir dosya daha oluşturup menu.css diye kayıt edin.
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.
body {
font-family:tahoma; // yazı sitili
font-size:12px; // yazının büyüklüğü
}
Listemizin önündeki noktaları iptal etmek için ul etiketi içindeki noktaları aşağıdaki kodu yazıyoruz.
#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.
#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.
#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.
#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.
#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.
#menu ul li
{
text-align:center;
width:100px;
display:block;
float:right;
}
Alıntı
http://www.csstema.com/dersler/menuler/css-ile-kutu-seklinde-menu-hazirlamak-displayblock.html kendi sitem
HTML:
<html>
<head>
<title>Menü Deneme</title>
</head>
<link type="text/css" href="menu.css" rel="stylesheet">
<body>
<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>
</body>
</html>Bir dosya daha oluşturup menu.css diye kayıt edin.
HTML:
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.
body {
font-family:tahoma; // yazı sitili
font-size:12px; // yazının büyüklüğü
}
Listemizin önündeki noktaları iptal etmek için ul etiketi içindeki noktaları aşağıdaki kodu yazıyoruz.
#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.
#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.
#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.
#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.
#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.
#menu ul li
{
text-align:center;
width:100px;
display:block;
float:right;
}
Alıntı
http://www.csstema.com/dersler/menuler/css-ile-kutu-seklinde-menu-hazirlamak-displayblock.html kendi sitem