CSS 960 Grid Framework ile Uygulama

Frameworkü www.960.gs ‘den indirebilirsiniz.İndirdiğiniz frameworkü açın bi yere ve code bölümünden css klasörü altından 960.css ve reset.css yi projeniz altında herhangi bi yere veya derli toplu olması acısından css adında bi klasör oluşturun ve içine onları atın.Sonra kendinizde style.css adında kendi css dosyamızı /css klasörü altında oluşturun.

960 Grid Framework sistemi çok kolay.Tüm tarayıcılarda sorunsuzca çalışıyor.Çok rahat şekilde sitemizi oluşturmamızı sağlıyor.Şimdi container_12 ve container_16 diye classlarımız var bunların özelliklerine 960.css i açarak bakabilirsiniz.960 Grid Frameworkümüzde kısaca değinmek gerekirse 960px lik genişliğe sahip.Anlatıma kodlar üzerinden devam etmek benim için daha kolay olucak :)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title>960 Framwork</title>
	<link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="css/960.css">
	<link rel="stylesheet" href="css/style.css">
</head>
<body>
	<div id="container" class="container_12">
		<div id="header" class="grid_12">
			
				<ul id="nav">
					<li><a href="#">Anasayfa</a></li>
					<li><a href="#">Urunler</a></li>
					<li><a href="#">Iletisim</a></li>
					<li><a href="#">Hakkimizda</a></li>
				</ul>
			
		</div>
		<div id="main">
			<div class="grid_6">
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			</div>
			<div class="grid_6">
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			</div>
			
			<div id="grid3" class="grid_3">
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			</div>
			<div id="grid3" class="grid_3">
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			</div>
			<div id="grid3" class="grid_3">
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			</div>
			<div id="grid3" class="grid_3">
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			</div>
		<div id="footer">
			<div class="grid_4">
				<p>Lorem ipsum dolor sit amet.</p>
			</div>
			<div class="grid_4">
				<p>Lorem ipsum dolor sit amet.</p>
			</div>
			<div class="grid_4">
				<p>Lorem ipsum dolor sit amet.</p>
			</div>
			
			
		</div>
			
		</div>
	</div>
</body>
</html>
#container{
background: red;

}

.grid_6{
	margin-top:10px;
	background:white;
}

.grid_3{
	margin-top:20px;
	background:green;
}

#header{
background: #e3e3e3;
}

	#header #nav{
	margin-left:250px;
	}
	
		#header #nav li{
		float:left;
		list-style: none;
		}
		
			#header #nav li a{
			color:green;
			text-decoration:none;
			margin-right: 5px;
			padding-right:25px;
			border-right:1px solid black;
			}
			
			#header #nav li:last-child a{
			border-right: none;
			}

#footer{
	clear:both;
	margin-top:25px;
	background:blue;
}

	#footer .grid_4{
	background:blue;
	}

Şimdi açıklama yapcak olursak , açıklamayı html ve css i açtıktan sonra takip ederek okuyun lütfen.

İlk olarak ana divimiz olan containerı oluşturduk ve buna bu projemizde kullandığımız container_12 classını verdık.Daha sonrada container içinde header divimizi oluşturup bu sefer buna da grid_12 classını verdik.grid_12 classının özelliğiyse 940px genişliğinde özelliği olması vs.Yani yanlardan 10 ‘ar px içerde.Daha sonra bu header divimize bi navigasyon oluşturduk bunu anlatmaya gerek yok.

Sonra main divimizi oluşturduk ve bunun içinde iki tane div oluşturduk fakat dikkat ederseniz grid_6 classını verdik.12 ‘nin yarısı 6 olduğuna göre burda grid_6 yı verip 2 tane kolon oluşturcağımızı söyledik 2 kolonuda oluşturduk.Yani burda mantık kaç tane kolon oluşturmak istiyorsak ona göre grid_6 vs. diye oluşturuyoruz.Sonrada main içinde tekrardan divler oluşturduk grid_3 classıyla ve 4 kolona bölceğimizi söyledik ve bunu 4 kere tekrarladık.

Sonrada footer’ımızı oluşturduk ve içine bu sefer grid_4 classlarıyla 3 div oluşturduk 3 kolondan oluşcağını söyledik yani.Böyleliklede uygulamamızın iskeletini tamamlamış olduk.Gerisi style.css’imize kalmış onuda okuyarak yapabilirsiniz.

Tarih:
Hit: 2358
Yazar: dyrnade



Yorumlar

Siftahı yapan siz olun
Yorum yapabilmek için üye girişi yapmalısınız.