[adatak1]

Merhabalar,

bu konuyla ilgili forumda arama yaptim ama benzer basliklar bulamadim ya da kafam artik cok allak bullak oldu o yüzden gözden kacirmis olabilirim.

Amatörce bir site yapmaya çalışıyorum. Tasarımını Photoshop'ta yaptıktan sonra html'e geçişini Dreamweaver'da CSS kullanarak yapmaya çalışıyorum. Google aramalarımın sonucunda sayfa görünümü (layout) için tablo veya frame'ler yerine div kullanılmasının doğru olduğunu öğrendim. Ama div'le işin altından kalkamadım. Relative, absolute positioning'le alakalı bir çözüm olması gerekiyor ama malesef ben o çözüme ulaşamadım.

Ekteki örnekteki gibi üst ve alt sütunlari sabit tutmaya çalışıyorum. Üst sütun logo için, alt sütun da copyright (geyik de olsa böyle bi bölüm var ) bölümü için. İçerik sayfa boyutundan büyükse aşağıya kayma olmalı. Tabi bu arada sağ ve sol sütunların sabit kalması gerekiyor.

Bir çözüm önerisinde bulunabilirseniz çok sevinirim.

Şimdiden teşekkürler.

[cihangir]

Bu adresteki örnekler ihtiyacinizi karsilayacaktir. Ilgili sayfalardaki calismalari inceleyerek istediginiz sayfa tasarimini gerceklestirebilirsiniz.

Daha fazla örnek icin:

• http://www.dynamicdrive.com/style/layouts/category/C11/
• http://www.thenoodleincident.com/tut...son/boxes.html

Forum arama motorundan tablosuz tasarim diye aratirsaniz, sorunuz ile ilgili yine benzer konulara ulasabilirsiniz.

[kerem1905]

bu adrese bir bak istersen, hazır bedava css sayfa düzenleri var.

bu adreste de işin mantığını anlatan bir eğitsel mevcut.

[erdinç]

DIV doğru yöntem. Positioning çoğu zaman boş bırakılır. Boş olunca statik anlamına geliyor.

Şimdi sizin yapmanız gereken şey şuna karar vermek: Sitenin sabit bir genişliği olacak mı yoksa esnek mi olacak? Benim tavsiyem sabit genişlik olsun çünkü widescreen monitörlerde veya 19" monitörlerde %100 genişlik her zaman iyi durmuyor. İçerikleri düzenlemek zor oluyor. Onun yerine 950px genişlikte ve ortaya hizalı bir tasarım tavsiye ederim.

Herkes birkaç link vermiş. Ben de geleneği bozmayayım. Hazır tasarımları bu sayfada bulabilirsiniz. Bu konuların açıklamasını ise bu sayfada bulmak mümkün.

Şüphesiz kaynakları okuyup çok şey öğrenilebilir ancak bu konuyu bir de benden dinleyin:

950px sabit genişlikte resimde gösterdiğiniz tasarımı adım adım yapalım:

1. 950px genişlik ve ortaya hizalama konusu için önce bir container div koyuyoruz. Yani bütün herşeyi içine alacak bir container. HTML sayfamızın body kısmına şunu yazıyoruz:
<div id="container"></div>

Şimdi CSS ile container divini biçimlendirelim. HTML sayfamızın head tagları arasına ise şunu yazıyoruz:
<style type="text/css">
<!--
#container {
width: 950px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
background-color: #FFFF00;
}
-->
</style>

Margin değerlerini bu şekilde yazıp ortaya hizalama yaptım. Container kolay anlaşılsın diye sarı background rengi kullandım. Ayrıca geçici olarak yükseklik değeri verdim gözüksün diye.

2. Siteyi, önce 3 parçaya bölelim: üst, orta ve alt. Sol, sağ ve içerik dediğiniz yerleri orta isimli divin içinde oluşturacağım. Şimdilik sol sağ ve içeriği bırakıp üst, orta ve alt kısımlarını div olarak container'in içine ekliyorum. Gözüksünler diye divlerin içine birer karakter boşluk koydum. &nbsp; yazan şey bir karakter boşluktan başka bir şey değil.

<div id="container">
<div id="ust">&nbsp;</div>
<div id="orta">&nbsp;</div>
<div id="alt">&nbsp;</div>
</div>

CSS'e gelirsek: Orta her zaman üst'ün altında olmalı. Ayrıca alt her zaman ortanın altında olmalı. Bundan emin olmak için clear değeri kullancağım. Ayrıca yine kolay anlaşılsın diye renk veriyorum.

<style type="text/css">
<!--
#ust {
background-color: #0099FF;
}
#orta {
background-color: #00FF00;
clear: both;
}
#alt {
background-color: #FF0000;
clear: both;
}
-->
</style>

Şimdi diyeceksiniz ki ust, orta ve alt divleri için genişlik falan vermedik. Doğrudur. zaten gerek yok çünkü genişlik verilmeyince %100 oluyor. Bunlar 950px'lik container'in içinde olduğu için genişlik onun genişliği kadar olacak.

Şimdi orta isimli divin içine sol, içerik ve sag divlerini koyalım:
<div id="container">
<div id="ust">&nbsp;</div>
<div id="orta">
<div id="sol">&nbsp;</div>
<div id="icerik">&nbsp;</div>
<div id="sag">&nbsp;</div>
</div>
<div id="alt">&nbsp;</div>
</div>

Şimdi sol, içerik ve sag için biçimlendirme yapacağım. Sol ve sağ için bir genişlik belirlemem lazım. Varsayalım onların her biri 160px genişlikte olsun. Bu durumda icerik =950-160-160=630px eder. Ancak solda ve sağda 5 px boşluk bırakacağım için 620 yapıyorum.

Sol'u sola hizalayacağım. Sag'ı sağa hizalayacağım. İçeriği de sola hizalayacağım. Hiçbirine positioning yazmıyorum.

<style type="text/css">
<!--
#sol {
background-color: #990066;
float: left;
width: 160px;
height: 500px;
margin-top: 5px;
margin-bottom: 5px;
}
#sag {
background-color: #9999FF;
float: right;
width: 160px;
height: 500px;
margin-top: 5px;
margin-bottom: 5px;
}
#icerik {
background-color: #CC6633;
float: left;
width: 620px;
height: 500px;
margin: 5px;
}
-->
</style>
Container için geçici olarak verdiğim yüksekliği iptal ettim. Ayrıca üst, alt, sol, sağ, icerik divleri için yükseklik verdim. Bir de içerik, sol, sağ divlerinün üstünde altında boşluk bıraktım. Firefox'ta düzgün çalışsın diye orta divine boşluğu eklemek yerine ortanın içindeki elemanlara ayrı ayrı ekledim.

Sonuçta bütün HTML sayfamızın içi şu oldu:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>css layout</title>
<style type="text/css">
<!--
#container {
	width: 950px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}
#ust {
	background-color: #0099FF;
	height: 120px;
}
#orta {
	clear: both;
}
#alt {
	background-color: #FF0000;
	clear: both;
	height: 80px;
}
#sol {
	background-color: #990066;
	float: left;
	width: 160px;
	height: 500px;
	margin-top: 5px;
	margin-bottom: 5px;
}
#sag {
	background-color: #9999FF;
	float: right;
	width: 160px;
	height: 500px;
	margin-top: 5px;
	margin-bottom: 5px;
}
#icerik {
	background-color: #CC6633;
	float: left;
	width: 620px;
	height: 500px;
	margin: 5px;
}
-->
</style>
</head>

<body>
	<div id="container">
		  <div id="ust">&nbsp;</div>
	  		<div id="orta">
			  <div id="sol">&nbsp;</div>
			  <div id="icerik">&nbsp;</div>
			  <div id="sag">&nbsp;</div>
	  		</div>
		  <div id="alt">&nbsp;</div>
	</div>
</body>
</html>

[adatak1]

Merhabalar,

verdiginiz cevaplar icin cok tesekkürler. Sinavlardi, tez baslangiciydi derken bu konudan biraz uzaklasmistim. Simdi geri döndüm En kisa zamanda önerilerinizi deneyecegim. Ve belki yeni sorularla geri dönecegim

Tekrar tesekkürler..