Forum'da ara:
Ara


« Önceki başlık :: Sonraki başlık »  
Yazar Mesaj
Mesaj03.03.2010, 20:08 (UTC)    
Mesaj konusu: Css Tasarım Yapma

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...
______________
Mesaj03.03.2010, 20:11 (UTC)    
Mesaj konusu:

Kodları
Kod:
 [code] Kod [/code]
Olarak EkLeyin..
Mesaj03.03.2010, 20:20 (UTC)    
Mesaj konusu: bs

adontasarim yazmış:
Kodları
Kod:
 [code] Kod [/code]
Olarak EkLeyin..


Arkadaş sadece anlatım yapmış kodları kutu içine almasına gerek yok sanırım Wink
______________
Mesaj03.03.2010, 21:02 (UTC)    
Mesaj konusu:

Kod:

</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>


Bunlar Kod'Dur.. ve Code Olarak GöstériLirse Daha ii oLur Tesekkürler. Smile
Önceki mesajları göster:   


Powered by phpBB © 2001, 2005 phpBB Group
Türkçe Çeviri: phpBB Türkiye & Erdem Çorapçıoğlu