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
