Kapat

bir önceki yazımda css ile açılır bir menü yapmıştım. bu yazımda ise sade bir yatay menü örnek kodlarını sizlere yazacağım.

bunu yapmamdaki sebep elbette ikisi arasındaki farkı görmenizdir.

yine tek html sayfası yapacağım tek sayfada kodları birleştireceğim.

benim yazdığım gibi de yapabilirsiniz. ayrı style dosyasıda oluşturup yapabilirsiniz tercih size kalmış.

ben style kodlarımı <head>   </head> etiketleri arasına aldım.

 

ilk olarak head kısmını yazalım ve css kısmını yazalım sonrada body kısmını yazacağız.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows1254" />
<title> css ile yatay menü yapımı </title>
<style type="text/css">
.menu {
width:100%;
height:auto;
float:left;
}
.menu a{
width:auto;
height:30px;
float:left;
text-align:center;
padding-left:10px;
padding-right:10px;
margin-right:10px;
line-height:30px;
color:#FFFFFF;
background:#006600;
text-decoration:none;
}
.menu a:hover{
background: #003300;
}
</style>
</head>

<body>

<a href="#">Anasayfa</a>
<a href="#">Hakkımızda</a>
<a href="#">galeri</a>
<a href="#">anket</a>
<a href="#">ürünlerimiz</a>
<a href="#">İletişim</a>
</div>
</body>
</html

 

bu menümüzün kodlarıda bu şekilde arkadaşlar.

iyi bloglamalar herkese.

Bir önceki yazımız olan css-yatay açılır menü başlıklı makalemizde açılır menü, css menü ve css örnekleri hakkında bilgiler verilmektedir.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

*

code


Kapat