Div kullanımı veya tablo

Kodla Büyü
B

burak0692

Site Gezgini
Mesajlar
53
Merhabalar Web sitesi yapmaya çalışıyorum tabloyla aşşağıdaki görseli yapmaya çalıştım ama orta kolon olmuyor ve çok uğraştırıyor. Div ile de yapılıyormuş ama ben yapamadım. Aşşağıdaki resimideki gibi birşey nasıl oluşturabilirim dreamweaver programında.

Banner kısmı - Sol Kolon - Orta İçerik - Sağ Kolon - Alt kolon şeklinde.



Yardımlarınız için şimdiden teşekkür ederim.
 
Tüm divleri içine alacak ana adında bir div açtık.
Banner divi açıp kapattın.
Altına govde diye bir div aç. Bu gövde içine nav, main ve side divlerini sola yaslayarak yerleştir. Gövde divi kapat.
Govde divinden sonrada footer gelecek.
Kod: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9">
<title>Başlıksız Belge</title>
<style type="text/css">
<!--
.banner {
	float: left;
	height: 100px;
	width: 400px;
	background-color: #000;
	color: #FFF;
}
.footer {
	float: left;
	height: 100px;
	width: 400px;
}
.govde {
	float: left;
	height: auto;
	width: 400px;
}

.ana {
	height: auto;
	width: 400px;
    margin-left: auto;
    margin-right: auto;
	
}
.nav {
	background-color: #900;
	float: left;
	height: auto;
	width: 75px;
}
.main {
	background-color: #9FC;
	float: left;
	width: 250px;
	height: auto;
}
.side {
	background-color: #060;
	float: left;
	height: auto;
	width: 75px;
}
-->
</style>
</head>

<body>
<div class="ana">
<div class="banner"> Banner burada</div>
<div class="govde">
  <div class="nav"> Navv</div>
  <div class="main"> main</div>
  <div class="side"> Side</div>
</div>
<div class="footer">Alt footer</div>
</div>
</body>
</html>
 
Kod: 
<!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=utf-8" />
<title>Untitled Document</title>
<style>
*{
padding:0px;
margin:0px;}
#sayfa{
	top: auto;
	right: auto;
	width: 836px;
	color:#FFFFFF;
	margin: 5px;
}
#banner{
	height:100px;
	background-color:#000000;
	
	padding: 5px;
	border:1px solid;
}
#nav{
	float:left;
	width: 150px;
	background-color: #9999FF;
	padding: 0px;
	height: 300px;
	margin: 5px;
	border: 1px solid #000000;
}
#main{
	float:left;
	width: 500px;
	background-color: #FF66FF;
	padding: 0px;
	height: 300px;
	margin: 5px;
	border: 1px solid #000000;
}
#side{
	float:left;
	width: 150px;
	background-color: #336600;
	height: 300px;
	margin: 5px;
	border: 1px solid #000000;
}
#footer{
	color: #000000;
	background-color: #FFFFFF;
	margin: 5px;
	height: 30px;
	border:1px solid #000000;
	clear: left;
	padding: 5px;
}
</style>

</head>

<body>
<div id="sayfa">
  <div id="banner">#banner</div>
  <div id="nav">#nav</div>
  <div id="main">#main</div>
  <div id="side">#side</div>
  <div id="footer">#footer</div>  
</div>

</body>
</html>
 
"tayinci42" Verdiğiniz Siteleri sabahtan itibaren çalışmaya başlıyacağım çok teşekkür ederim.

GezginN61 Teşekkür ederim Çok sağolun.

bilogrt38 Kodlarınızı aldım Sizinde Yanlız Sayfada çalıştırdığımda Sayfanın tümümü kaplamıyor. Tek Tek Yükseklik Ve Genişlikleriyle oynarsak Divlerin Bir şekilde olur herhalde
ama bunun kısa bi yolu yokmu.

Mesela şöyle ;

1- Sayfa tam ortalı olacak Kenarlarda Boşluklar Olacak ve o div'ler tam tamına sayfayı oturacak sayfaya.

Kodun Görünümü şu ;

 
sayfanın tümünü kaplamaz çünkü sayfa divini 800px ile sınırladım
bunu siler diğer divleri de % olrak verirseniz sayfayı tam kaplar
 
Kod: 
<!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=utf-8" />
<title>Untitled Document</title>
<style>
*{
padding:0px;
margin:0px;}
#sayfa{
	top: auto;
	right: auto;
	color:#FFFFFF;
	margin-top: 5px;
	margin-right: 100px;
	margin-bottom: 5px;
	margin-left: 100px;
}
#banner{
   height:100px;
   background-color:#000000;
   
   padding: 5px;
   border:1px solid;
}
#nav{
	float:left;
	background-color: #9999FF;
	padding: 0px;
	height: 300px;
	margin: 5px;
	border: 1px solid #000000;
	width: 20%;
}
#main{
	float:left;
	width: 60%;
	background-color: #FF66FF;
	padding: 0px;
	margin: 5px;
	border: 1px solid #000000;
	height: 300px;
}
#side{
	float:left;
	background-color: #336600;
	height: 300px;
	margin: 5px;
	border: 1px solid #000000;
}
#footer{
   color: #000000;
   background-color: #FFFFFF;
   margin: 5px;
   height: 30px;
   border:1px solid #000000;
   clear: left;
   padding: 5px;
}
</style>

</head>

<body>
<div id="sayfa">
  <div id="banner">#banner</div>
  <div id="nav">#nav</div>
  <div id="main">#main</div>
  <div id="side">#sidebar sidebar sidebar sidebar</div>
  <div id="footer">#footer</div>  
</div>

</body>
</html>
 
bilogrt38 çok teşekkür ederim gerçekten çok yardımcı oldunuz. Sayenizde site tasarımına ufak ufak başladım. Tekrar çok teşekkür ederirm.
 
Sol tarafa menü yapmaya çalışıyorum ama yanlarına sıralı liste şeklinde noktalar koymak istiyorum. Dışarı taşıyor noktalar soldaki kolonu genişletipde denedim yine olmadı.

 
Sitemin şimdiki hali bu yarın banner gelecek üst tarafa. Geriye Şu işlemlerim kaldı galiba

1- Banner yerleştirilecek

2- Sağ, üst ve alt taraftaki menülere link verilecek. Bu linklere tıklandığında sayfanın sadece ortadaki main kısmı tıklanan sayfaya gidecek yani sadece orta main kısmı.

3 - Sağ alta kaç ziyaretçi geldi paneli konulacak.

4- Bu kadar galiba Başka yapılacak birşey yok gibi:)

Bu konuda tüm destek verenlere tekrar teşekkürler diliyorum.

Not: İlk Denememdir güzel oldu diyemem ama yapa yapa öğreneceğiz inşallah bu işe çok ilgi duyuyorum.

 
hocam dediginiz sekilde css ile yapmak istiyorsaniz css icindeki kodlara dikkat etmeniz lazim.. en kucuk bir hata da goruntu bozulur.. ayrica o css clear ozelligini bilmeniz gerekiyor..
 
sanalkurs'da bakıyodum bende konuya, tasarım, cleaner, ul-li leri yeni kurallar oluşturarak kullanmak konusunda güzel bi anlatım olmuş tavsiye ederim.
 
Cevap yazmak için giriş yap yada kayıt ol.
BBNET
Geri
Üst