CSS ile basit tasarımlı yatay menü yapımı

Bu derste CSS ile basit tasarımlı yatay bir menü yapımını görelim.

Bu derste CSS ile basit tasarımlı yatay bir menü yapımını görelim.

İlk olarak index.html adında bir sayfa açalım ve aşağıdaki kodları yazalım.


<html>

<head>

<title>Css ile menü yapımı</title>

<link rel="stylesheet" type="text/css" href="style.css" />

</head>

<body>

<ul id="menu">

<li><a href="#">Ana Sayfa</a></li>

<li><a href="#">Hakkımızda</a></li>

<li><a href="#">Ürünlerimiz</a></li>

<li><a href="#">Referanslarımız</a></li>

<li><a href="#">İletişim</a></li>

</ul>

</body>

</html>



index.html sayfamızın kodlarını yazdıktan sonra style.css sayfamızın kodlarını yazalım.


#menu {

    margin: 0px;

    padding: 0px;

    list-style-type: none;

}

#menu li {

    float: left;

    width: 150px;

    position: relative;

}

#menu a {

    font-family: "Times New Roman", Times, serif;

    font-size: 16px;

    color: #FFFFFF;

    text-decoration: none;

    background-color: #00CCFF;

    display: block;

    padding-top: 5px;

    padding-right: 5px;

    border: 1px solid #00CCFF;

    text-align: center;

    line-height: 30px;

    margin-right: 2px;

}

#menu a:hover {

    background-color: #0099FF;

}





Sayfalarımız kaydettikten sonra çalıştıralım. Aşağıdaki gibi bir görüntü elde ettik.




Menümüzün üzerine gelinceki hali ise aşağıdaki gibidir.

  • Etiketler;
Genceraziz Genceraziz
Sanalkurs.net
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

çok teşekkürler
[b]Çok fayfalı oldu teşekkürler.[/b]
DREAMWEAVER 5,5 TE MENÜ YAPTIM BEN ANASAYFA HAKKIMIZDA ADRES İLETİŞİM DİYE ADRES YAZAN YERİN İÇİNE ADRES YAZMAK İSTİYORUM ADRESE TIKLAYINCA İÇİNDEKİ ADRES YAZISI GÖRÜNECEK AMA BİR TÜRLÜ OLMUYOR HAKKIMIZDAYA TIKLAYINCADA HAKKIMIZDA BİLGİLERİ GÖRÜNECEK BUNU SİTEYE NASIL ENTEGRE EDECEÐİM İLİŞKİLENDİRECEÐİM BANA BU KONU HAKKINDA YARDIMCI OLURSANIZ SEVİNİRİM GEREÐİNİN YAPILMASINI SAYGILARIMLA ARZ EDERİM .
Selamlar bunun dikey versiyonu nasıl yapabilirim acaba bu arada çok yardımcı oldunuz teşekürler :)
style.css dosyasına gelip. #menu li { float: left; satırını silersen aşağı doğru sıralanır.
ABi Bunu Yaptikta Nasil Ortaya Alabiliriz ?

Yukarı Git