Layouts

Kategori: CSS , 29 Ekim 2019 , JanFranco


HTML'de her bir elementin aslında bir blok olduğunu, bir kutu içerisinde olduğundan bahsetmiştim. Bu yazımda bu kutuların web sayfasındaki yerleri ile oynayacağız, sayfa düzenini değiştireceğiz.

CSS'te blok pozisyonları için 5 şema bulunur: Normal flow, relative positioning, absolute positioning, fixed positioning, floating elements. Normal flow ile başlayalım:

Normal flow default sayfa düzeni şemasıdır. Her blok element yeni satırda başlara. Biz belirtmesek de zaten her obje normal flow şemasına göre dizilir ancak bunun için gerekli syntax aşağıdaki gibidir:


position: static;
Eğer bir objeyi normal akıştan çıkarıp, relative positioning şemasına sokarsak, bu objeyi sağa sola veya yukarı aşağıya hareket ettirebiliriz. Bunun için ilgili objenin position özeliğinin değerini relative vereceğiz. Daha sonrasında top, bottom, left, right özellikleri ile pozisyon verebiliriz:


<!DOCTYPE html>
<html>
	<head>
		<title>Boxes</title>
		<style type="text/css">
			body {
				width: 750px;
				font-family: Arial, Verdana, sans-serif;
				color: #665544;
			}
			h1 {
				background-color: #efefef;
				padding: 10px;
			}
			p {
				width: 450px;
			}
			p.example {
				position: relative;
				top: 10px;
				left: 100px;
			}
		</style>
	</head>
	<body>
		<h1>The Evolution of the Bicycle</h1>
		<p>In 1817 Baron von Drais invented a walking
		machine that would help him get around the
		royal gardens faster...</p>
		<p class="example">In 1817 Baron von Drais invented a walking
		machine that would help him get around the
		royal gardens faster...</p>
		<p>In 1817 Baron von Drais invented a walking
		machine that would help him get around the
		royal gardens faster...</p>
	</body>
</html>
css-layouts

Bir objeyi olağan akışından çıkarıp, spesifik yer bilgisi verebiliriz. Bunun için position özelliğinin değerini absolute olarak belirlemeliyiz. Sonrasında left, right, top, bottom özelliklerini kullanabiliriz:


h1 {
	position: absolute;
	top: 0px;
	left: 500px;
	width: 250px;
}
Fixed positioning şemasında, absolue positioning şemasında olduğu gibi spesifik yer bilgisi verebiliriz. Fakat fixed positioning şemasında, kullanıcı sayfanın herhangi bir yerine gitse bile objenin lokasyon bilgileri güncellenir ve obje hep belirlediğimiz yerde kalır:


h1 {
	position: fixed;
	top: 0px;
	left: 50px;
	padding: 10px;
	margin: 0px;
	width: 100%;
	background-color: #efefef;
}
z-index değeri ile objelere öncelik sırası verebiliriz. Bir şekilde objeler çakışırsa web sayfasında bu objeler üst üste görüntülenir. z-index değeri büyük olan objeler daha üstte görünür:


h1 {
	position: fixed;
	top: 0px;
	left: 0px;
	margin: 0px;
	padding: 10px;
	width: 100%;
	background-color: #efefef;
	z-index: 10;
}
Eğer bir objenin float özelliğini kullanırsak, objeyi kendisinden önceki objenin sağına veya soluna tam kaydırabiliriz:


<!DOCTYPE html>
<html>
	<head>
		<title>Boxes</title>
		<style type="text/css">
			body {
				width: 750px;
				font-family: Arial, Verdana, sans-serif;
				color: #665544;
			}
			h1 {
				background-color: #efefef;
				padding: 10px;
			}
			p {
				width: 450px;
			}
			p.example {
				position: relative;
				top: 10px;
				left: 100px;
			}
			blockquote {
				float: right;
				width: 275px;
				font-size: 130%;
				font-style: italic;
				font-family: Georgia, Times, serif;
				margin: 0px 0px 10px 10px;
				padding: 10px;
				border-top: 1px solid #665544;
				border-bottom: 1px solid #665544;
			}
		</style>
	</head>
	<body>
		<h1>The Evolution of the Bicycle</h1>
		<blockquote>"Life is like riding a bicycle.
		To keep your balance you must keep moving." -
		Albert Einstein</blockquote>
		<p>In 1817 Baron von Drais invented a walking
		machine that would help him get around the royal
		gardens faster: two same-size in-line wheels, the
		front one steerable, mounted in a frame ... </p>
	</body>
</html>
css-layouts

Yan yana bloklar oluşturabilmek için float özelliğini kullanabiliriz:


<!DOCTYPE html>
<html>
	<head>
		<title>Boxes</title>
		<style type="text/css">
			body {
				width: 750px;
				font-family: Arial, Verdana, sans-serif;
				color: #665544;
			}
			p {
				width: 230px;
				float: left;
				margin: 5px;
				padding: 5px;
				background-color: #efefef;
			}
		</style>
	</head>
	<body>
		<h1>The Evolution of the Bicycle</h1>
		<p>In 1817 Baron von Drais invented a walking
		machine that would help him get around...</p>
		<p>In 1817 Baron von Drais invented a walking
		machine that would help him get around...</p>
		<p>In 1817 Baron von Drais invented a walking
		machine that would help him get around...</p>
		<p>In 1817 Baron von Drais invented a walking
		machine that would help him get around...</p>
		<p>In 1817 Baron von Drais invented a walking
		machine that would help him get around...</p>
		<p>In 1817 Baron von Drais invented a walking
		machine that would help him get around...</p>
		<p>In 1817 Baron von Drais invented a walking
		machine that would help him get around...</p>
	</body>
</html>
css-layouts

Bazı durumlarda yukarıdaki şekilde blokları yan yana oluşturduğumuzda kaymalar, bozulmalar olabilir. Bu durumda clear özelliğini kullanabiliriz. Clear özelliği ile aynı objelerin birbirine değmemesini sağlayabiliriz:


clear: left;
Bir web sayfası oluşturduğumuzda tüm kullanıcıların belli makinelerden sitemize ulaşması, aynı çözünürlükte bilgisayara sahip olmaları düşük olasılıktır. Kullanıcılar telefonlardan, laptoplardan, tabletlerden, boyutu büyük monitörlü masaüstü bilgisayarlardan sitemize giriş yapabilirler. Ayrıca aynı cihaza sahip kullanıcıların da ekran çözünürlükleri birbirinden farklı olabilir. Bu durumu iki şekilde kontrol edebiliriz: fixed width layouts, liquid layouts.

Fixed with layout kullanıyorsak objelerimizin genişlik, yükseklik, margin gibi değerlerini piksel olarak veririz:


body {
	width: 960px;
	margin: 0 auto;
}

#content {
	overflow: auto;
	height: 100%;
}

#nav, #feature, #footer {
	background-color: #efefef;
	padding: 10px;
	margin: 10px;
}

.column1, .column2, .column3 {
	background-color: #efefef;
	width: 300px;
	float: left;
	margin: 10px;
}

li {
	display: inline;
	padding: 5px;
}
Liquid layout kullanıyorsak bahsettiğim değerleri piksel olarak değil oran olarak veririz:


body {
	width: 90%;
	margin: 0 auto;
}

#content {
	overflow: auto;
}

#nav, #feature, #footer {
	margin: 1%;
}

.column1, .column2, .column3 {
	width: 31.3%;
	float: left;
	margin: 1%;
}

.column3 {
	margin-right: 0%;
}

li {
	display: inline;
	padding: 0.5em;
}

#nav, #footer {
	background-color: #efefef;
	padding: 0.5em 0;
}

#feature, .article {
	height: 10em;
	margin-bottom: 1em;
	background-color: #efefef;
}
Liquid layoutlarda oranlı değerler verdiğimiz için sayfayı büyülttüğümüzde küçülttüğümüzde obje boyutları da sayfanın boyutuna göre değişir. Fixed width layout'ta değişmez, sabittir.


Sonraki Yazı: Images
Yorumlar

Henüz bir yorum bulunmuyor.
Yorum bırakın