e-dersler   Positioning with CSS

Navigation'a Girecek Elemanları Tasarlama

Navigation bölümünde, doğal olarak, sitemizde yer alan sayfalara linkler yapılacaktır. Tabii, istenirse, başka sitelerin başka sayfalarına da linkler yapılabilir. Arama motorları konulabilir.

Navigation bölümünü biçimlendirmek için, aşağıdaki kodları head içindeki stil bölümüne yazıyoruz:

.navbox {
	background-color: #003366;
	border-color: #FF6633;
	border-style: groove;
	border-width: 2px;
	color: #FFFFFF;
	font-family: Arial, Tahoma, Verdana, Helvetica, sans-serif;
	font-size: 15px; 
	margin: 0.1px;
	padding: 2px;
}		

Aşağıdaki kodlar, soldaki navigation içine giren elemanları belirlemektedir.

<div class="Navigation">


<div class="navbox"><a class="nav" href="/~tkaracay/index.html">Home</a></div>
<div class="navbox"><a class="nav" href="/~tkaracay/agora/index.html">Agora</a></div>
<div class="navbox"><a class="nav" href="/~tkaracay/news/index.html">Haberler</a></div>

<div class="navbox">
<a class="nav" href="/~tkaracay/ders/index.html">Dersler:</a><br />
<a class="navtot2"> • Programlama</a><br />
<a class="nav2" href="/~tkaracay/ders/index.html"> • Internet</a><br />
<a class="nav2" href="/~tkaracay/ders/index.html"> • Veritabanı</a><br />
</div>

<div class="navbox"><a class="nav" href="/~tkaracay/agora/">Söyleşi</a></div>
<div class="navbox"><a class="nav" href="/~tkaracay/agora/">Etkinlikler</a></div>
<div class="navbox"><a class="nav" href="/~tkaracay/agora/">Linkler</a></div>

</div>

Kodları inceleyip, işlevlerini açıklayınız. Kendi sayfanız için, sitenize uygun linkleri koymalısınız.

Gövdeye girecek metni koymadan önce, istersek sayfa başlığı (header) ve sayfa altlığı (footer) tasarlayabiliriz. Bundan sonraki adım o işi yapacaktır.


|||||||||| Yedinci Adım (Diğer Elemanları Yerleştirme) >>