reklam
SİTE YARIŞMALARI İÇİN HAZIRLIKLAR SON HIZIYLA SÜRÜYOR.Hazırlikların Ne Aşamada Oldugunu Görmek İçin DEVAMI Yazan Butona Tıklayınız | Devamı

En Kısa Sürede 2011-2012 Pop/Arebesk/Rap/Fantezi Gibi Müzikler Eklenecektir.| Devamı

En güncel videoları bulabileceğiniz bir sayfa hazırlamayı düşünüyordum sonunda oda oldu artık buradan sizler için internetteki ünlü sitelerden seçtiğim videoları buradan yayınlayacağım (youtube,izlesene,face...) komik,korku,hüzün...| Devamı

Google'nin en eski halinden bugünki haline kadar olan bütün her halini sizler için araştırdık bir arşivde topladık.Google'nin ne hallerden bugünlere geldiini bu yazıda görme imkanını bulacaksınız.| Devamı

140 Tane Arama Motoruna Sitenizi Eklemek İstemezmisiniz? O Zaman DEVAMI Yazan Yere Tıklayıp Sayfaya Gidelim.| Devamı



Sizler İciniz.Tr.Gg / 2012-2013 / Linklere Tıkladıktan Sonra Konular Aşşagıdadır/

Sizler İçin Varız/Türkiyenin En Güncel Yardım Sitesi

kolaycssyapimi

Basit bir CSS tasarımın nasıl yapıldığını hep beraber göreceğiz.Makaleyi Maddeler halinde açıklayacağım.

1. İlk Önce Taslağımızı oluştularım.

<div id="anakatman">
<div id="ust"></div>
<div id="menu"></div>
<div id="icerik"></div>
<div id="solkisim"></div>
<div id="alt"></div>
</div>

2. Oluşturduğumuz taslağın içeriğini düzenleyelim.

<div id="anakatman">
<div id="ust"><h1>KodArsivi.Net</h1></div>
<div id="menu">
<ul>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>

</ul>
</div>
<div id="icerik">
<h2>İçeriğin Başlığı</h2>
<p>Burası içeriğinizi yazacağınız yer</p>
</div>
<div id="solkisim">
<h3>Linkler</h3>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
...
</ul>
</div>
<div id="alt">
<p>Burasıda Sitemizin alt kısmı</p>
</div>
</div>

3.Şimdi sitemizi yavaş yavaş şekillendirmeye başlıyoruz.


body,html { margin:0; padding:0; background:#a7a09a; color:#000; }
body { min-width:750px; }
#anakatman { background:#99c; margin:0 auto; width:750px; } 



#ust { background:#ddd; }
#menu { background:#c99; }
#icerik { float:left; width:500px; background:#9c9; }
#solkisim { float:right; width:250px; background:#c9c; }
#alt { clear:both; background:#cc9; }
#menu ul{ margin:0; padding:0; list-style:none; }
#menu li{ display:inline; margin:0; padding:0; } 



#ust h1 { padding:5px; margin:0; }
#menu { background:#c99; padding:5px; }
#icerik h2, #icerik h3, #icerik p { padding:0 10px; }
#solkisim ul { margin-bottom:0; }
#solkisim h3, #solkisim p { padding:0 10px; }
#alt p { padding:5px; margin:0; } 







Şimdi kısa bir derleme yapalım ilk verdiğim HTML kodları ikinci verdiğim CSS kodları 



HTML Kodları

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div id="anakatman">
<div id="ust"><h1>KodArsivi.Net</h1></div>
<div id="menu">
<ul>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>

</ul>
</div>
<div id="icerik">
<h2>İçeriğin Başlığı</h2>
<p>Burası içeriğinizi yazacağınız yer</p>
</div>
<div id="solkisim">
<h3>Linkler</h3>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
...
</ul>
</div>
<div id="alt">
<p>Burasıda Sitemizin alt kısmı</p>
</div>
</div>

</form>
</body>
</html>

CSS Kodları

body,html { margin:0; padding:0; background:#a7a09a; color:#000; }
body { min-width:750px; }
#anakatman { background:#99c; margin:0 auto; width:750px; }

#ust { background:#ddd; }
#menu { background:#c99; }
#icerik { float:left; width:500px; background:#9c9; }
#solkisim { float:right; width:250px; background:#c9c; }
#alt { clear:both; background:#cc9; }
#menu ul{ margin:0; padding:0; list-style:none; }
#menu li{ display:inline; margin:0; padding:0; }

#ust h1 { padding:5px; margin:0; }
#menu { background:#c99; padding:5px; }
#icerik h2, #icerik h3, #icerik p { padding:0 10px; }
#solkisim ul { margin-bottom:0; }
#solkisim h3, #solkisim p { padding:0 10px; }
#alt p { padding:5px; margin:0; }

Hepsi bukadar

Kolay Gelsin...
sizlericiniz.tr.gg
toplist |Mirc indir| Mirc| Sohbet| => Sen de ücretsiz bir internet sitesi kurmak ister misin? O zaman burayı tıkla! <=