Bu dersimizde CSS ile açıklamalı bir menü yapmayı öğreneceğiz.
Html Kodu:
<div id="menu">
<ul>
<li><a href="#">Anasayfa<span>Sitenin Bütün İçerik Linkleri Bu sayfada</span></a></li>
<li><a href="#">Sanalkurs Forum<span>Forum Bölümümüzden Bilgi Paylaşım Yapabilirsiniz</span></a></li>
<li><a href="#">Müzik<span>Müzik Bölümümüz Her Türlü Full Albüm</span></a></li>
<li><a href="#">Video<span>Video İçeriği</span></a></li>
</ul></div>Css Kodu:
/* Menu Div CerveVe bicimi */
#menu {
float:left;
width:150px;
}
/* Menu içindeki Liste EtiketLerini Bicimlendirme */
#menu li, #menu ul {
padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px;
list-style:none;
text-align:left;
}
/* Menu Liste içinDeki LinKleri Biçimlendirme */
#menu li a {
padding:8px 0px 0px 20px;
font-family:"Comic Sans MS";
font-size:13px;
text-decoration:none;
color:#FFFFFF;
background:url(buttona2.gif) no-repeat;
width:130px;
height:32px;
display:block;
}
/* Menu Liste içinDeki LinKleri Fare İmleci Üzerinde İken Biçimlendirme */
#menu li a:hover {
background:url(buttonahover2.gif) no-repeat;
font-size: 80%; /* IE5.x/Win duzeltmek icin Desteklemeyen İE Serisini için Çözüm*/
}
/* Menu Linkelere Eklenmiş Span Etiketi İçerğini İlk Sayfada Gizleme */
#menu li a span {
display:none;
}
/* Menu Linkelere Eklenmiş Span Etiketi İçerğini Fare Hareketi İle Gösterme */
#menu li a:hover span {
display:block;
position:absolute;
top:auto;
left:160px;
background:#000066;
font-family:"Comic Sans MS";
border:solid #0033FF 1px;
width:200px;
}CSS içine başlıklar koyarak açıkladım. Umarım işinize yarar.
CSS ile yapılabilecek onlarca şey var, ilk olarak tablo sistemini takvim şeklinde geliştirmek konusuna değinmek istedim.
Öncelikle bu kodları <head> ve </head> tagları arasına ekliyoruz:
<style>#takvim {
width:280px;
font-family:arial, helvetica, sans-serif;
font-size:9pt;
color:#000;
text-align:center;
line-height:30px;
}
#takvim h2 {
width:270px;
margin:0 5px 5px 5px;
font-size:12pt;
background:#004a80;
color:#fff;
}
#takvim ul {
width:280px;
margin:0;
padding:0;
}
#takvim ul li {
width:30px;
height:30px;
display:block;
float:left;
list-style:none;
border:5px solid transparent;
margin:0;
}
#takvim ul li.gun {
background:#666;
color:#fff;
font-weight:bold;
}
#takvim ul li.num { background:#ccc; }
#takvim a.olay {
display:block;
width:30px;
height:30px;
background:#6dcff6;
text-decoration:none;
color:#004a80;
font-weight:bold;
}
</style>
Böylelikle stil bilgilerini tanıtmış olduk, şimdi tek yapmamız gereken bu stil bilgilerini içeren bir tablo oluşturmak. Bu kodları kullanacağız:
<div id="takvim">
<h2>Eylül, 2007 - Sanalkurs.NET</h2>
<ul>
<li class="gun">Pzr.</li>
<li class="gun">Pzrts.</li>
<li class="gun">Salı</li>
<li class="gun">Çrş.</li>
<li class="gun">Perş.</li>
<li class="gun">Cuma</li>
<li class="gun">Cmts.</li>
<li class="num">01</li>
<li class="num"><a href="#" class="olay">02</a></li>
<li class="num">03</li>
<li class="num">04</li>
<li class="num">05</li>
<li class="num">06</li>
<li class="num">07</li>
<li class="num">08</li>
<li class="num">09</li>
<li class="num">10</li>
<li class="num">11</li>
<li class="num">12</li>
<li class="num">13</li>
<li class="num">14</li>
<li class="num">15</li>
<li class="num">16</li>
<li class="num">17</li>
<li class="num">18</li>
<li class="num">19</li>
<li class="num">20</li>
<li class="num">21</li>
<li class="num">22</li>
<li class="num">23</li>
<li class="num">24</li>
<li class="num">25</li>
<li class="num">26</li>
<li class="num">27</li>
<li class="num">28</li>
<li class="num">29</li>
<li class="num">30</li>
<li class="num">31</li>
<li class="num"> </li>
<li class="num"> </li>
<li class="num"> </li>
<li class="num"> </li>
</ul>
</div>
div ve class taglarıyla daha önce tanıtmış olduğum stil bilgilerini tabloya girdik. Fakat şimdiden söyleyim, gerçek takvim zamanlamasıyla yapılmamıştır, yani sadece taslaktır, geliştirmek size kalmış birşey.
Gerekli düzenlemeleri yapmayı unutmayın kodlar üzerinde, kolay gelsin.
Örnek:
Sayfalama yapmak için metinin içine belirleyiciler koymak gerekir.Mesela Sayfalama yapılması
istediğin yere "<!–bol–>"kodunu koyabilirsin. Bu Browserde görünmeyeceği için sorun olmaz.
Sonra sayfa içeriği için olan katmanın adına "icerik", sayfa numaralarının olduğu
katmanın adına da "sayfalar" diyelim.
Sonra bir fonksiyon yazıp içeriğimizi işaretli yerlerden keselim ve her
sayfayı bir dizi değişkenin elemanı olarak atayalım. Daha sonra bu fonksiyonun
içinde "sayfalar" katmanına sayfa sayılarını yazdıralım. Sonra sayfa sayılarına göre
"icerik" katmanının içeriğini dolduracak fonksiyonu yazalım. Yapalım edelim dedim ama
kodlar nerede? Aşağıda!
<div id="icerik" style="border:1px solid #000000"> </div>
<div id="sayfalar" style="border:1px solid #000000">Sayfalar = </div>
<script>
var metin = "deneme1 <!--bol-->deneme2 <!--bol-->deneme3 <!--bol-->deneme4"
var bolum = ""
function bol(metin) {
bolum = metin.split("<!--bol-->")
for(i=0;i<bolum.length;i++) {
document.getElementById("sayfalar").innerHTML += "<a href="javascript:" onclick="sayfaGoster("+(i)+")">"+(i+1)+"</a> "
}
}
function sayfaGoster(syf) {
document.getElementById("icerik").innerHTML = bolum[syf]
}
bol(metin)
sayfaGoster(1)
</script>
web tasarımı nasıl yapılır 