Tamamen can sıkıntısından meydana gelen basit bir yatay menü.)
Ekran görüntüsü,
HTML kodları,
Kod:
<!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>
<title>Testing Menü!</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="stil.css"/>
</head>
<body>
<div class="menu">
<ul>
<li><a href="#">UnrealIRCd</a></li>
<li><a href="#">IRCServices</a></li>
<li><a href="#">Eggdrop</a></li>
<li><a href="#">Anope</a></li>
<li><a href="#">UIRC</a></li>
</ul>
</div>
</body>
</html>
CSS kodları,
Kod:
.menu { width:600px; height:32px; margin:10px auto}
.menu ul{ margin:0; padding:0; list-style:none}
.menu ul li{ float:left }
.menu ul li a{ display:block; width:120px; height:25px; background:#330000; color:#FFFFFF; font:italic 15px arial; text-align:center; padding:7px 0 0 0; text-decoration:none; border-radius:20px 20px 20px 20px}
.menu ul li a:hover{ color:red; background:#000099}
NOT: CSS kodlarını stil.css dosyası oluşturup, içerisine eklemeniz gerekmektedir. Yada html kodları arasında bulunan head etiketinin içerisindeki stil.css'i istediğiniz bir isim olarak belirtip, oluşturabilirsiniz.
İyi forumlar. ^^