Css & Div ile 3 blok

ahmetkoray · 27.03.2007

arkadaşlar bütün CSS ve alakalı konuları okumama rağmen tablo sisteminden yeni geçmeye çalıştığım div ve CSS ile bir arayüz hazırlamak istedim ama çuvalladım yapmaya çalıştığım arayüz ekte yalnız likit bir arayüz olması lazım (çözünürlüğe göre boyut değişecek) yardımlarınızı bekliyorum

Kod:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML>

<head>
<meta http-equiv="Content-Type" content="text/HTML; charset=utf-8" />
<title>Untitled 1</title>
<style type="text/CSS">

#endis{
	margin:0 auto auto auto;
	width:83%;
	height:400px;
	padding:5px;
	border:1px gray solid;
	
}
#baslik{
	height:70px;
	}
	
	
#sol{
	width:170px;
	height:100px;
	float:left;
	margin-top:15px;
	
	
}
#icerik{
	width:49%;
	height:55%;
	float:left;
	margin:15px 15px auto 15px;

}
#sag{
	float:left;
	width:170px;
	height:100px;
	margin-top:15px
		
	
	
	
}
</style>
</head>

<body>

<div id="endis">

<div id="baslik"></div>

<div id="sol"></div>

<div id="icerik"</ div>

<div id="sag"></div>

</div>


</body>

</HTML>

MGoktas · 27.03.2007

Kodlarda ufak tefek kaymalar yapmışsınız. O yüzden çalışmıyor olabilir.
icerik adli divi kapatmayı unutmuşsunuz ve / işaretinden sonra boşluk bırakmışsınız.
Onu düzeltince sorun yok, çalışıyor. Başka hata var mı bilmiyorum.

Kod:

<div id="endis">

<div id="baslik"></div>

<div id="sol"></div>

<div id="icerik"></div>

<div id="sag"></div>

</div>

alp3r · 27.03.2007

sag divini float left değil right yapsan tam süper olacak

ahmetkoray · 28.03.2007

ilgilendiğiniz için teşekkür ederim
div deki hatalar kopy paste yaparken olmuş normalde yok,
sorun 1 : ortadaki divin likit olması(çözünürlüğe göre width in değişmesi)
sorun 2 :
<div id="baslik"></div>

<div id="sol"></div>

<div id="icerik" style="width: 40%"></div>

<div id="sag"></div>

bu üç div, id si endis olan divin içerisinde ortalanması yani en soldaki div sola yapışık en sağdaki div sağa yapışık id si içerik olan div de ortalı ve kenarlarındaki (margin) boşluk eşit olmalı (aynı zaman da likit olmalı)

ZDikmen · 01.04.2007

Alıntı:

ahmetkoray tarafından gönderilen mesaj:

ilgilendiğiniz için teşekkür ederim
div deki hatalar kopy paste yaparken olmuş normalde yok,
sorun 1 : ortadaki divin likit olması(çözünürlüğe göre width in değişmesi)
sorun 2 :

<div id="baslik"></div>

<div id="sol"></div>

<div id="icerik" style="width: 40%"></div>

<div id="sag"></div>

bu üç div, id si endis olan divin içerisinde ortalanması yani en soldaki div sola yapışık en sağdaki div sağa yapışık id si içerik olan div de ortalı ve kenarlarındaki (margin) boşluk eşit olmalı (aynı zaman da likit olmalı)

İyi günler

Kod:

#sol{float:left;width:20%;}
#sag{float:right;width:20%;}
#icerik{
/* iskelette belirlenmiş olan inline style(style="width: 40%")  override etmemesi için silindi */
margin:0 20%;width:100%;}

<div id="baslik"></div>
<div id="sol"></div>
<div id="icerik"></div>
<div id="sag"></div>

Denemedim ama umarım çalışır

ahmetkoray · 03.04.2007

teşekkür ederim ama işe yaramadı

metsatöll · 03.04.2007

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>
<body>
<style>

/* CSS Document */

body {
	background:#9343B9;
	text-align:center;
	margin:20px;
	padding:0;
	font:normal 0.8em/1.2em verdana,aria,sans-serif;
	color:#666;
	}

#wrapper1 {
	position:relative;
	text-align:left;
	width:100%;
	background:#0f0;
	}
#wrapper2 {
	position:relative;
	text-align:left;
	width:100%;
	background:#fff;
	}
#header {
	background:#bf0021;
	padding:10px;
	margin:0;
	text-align:center;
	color:#FFF;
	}
#maincol {
	position:relative;
	margin:0;
	padding:10px;
	}
#leftcol { 
	position:relative;
	top:-10px;
	left:-10px;
	float:left;
	width:220px;  /* for IE5/WIN */
	voice-family: "\"}\"";
	voice-family:inherit;
	width:200px; /* actual value */
	margin:0 0 -10px 0;
	padding:10px;
	background:#ECB9E8;
	z-index:100;
	}
#rightcol {
	position:relative;
	top:-10px;
	right:-10px;
	float:right;
	width:220px;  /* for IE5/WIN */
	voice-family: "\"}\"";
	voice-family:inherit;
	width:200px; /* actual value */
	margin:0 0 -10px 0;
	padding:10px;
	background:#D7C4FA;
	z-index:99;
	}
#centercol {
	position:relative;
	padding:0 240px;
	}
</style>
</head>

<div id="header"><h1>baslik</h1></div>

<div id="wrapper1">
	<div id="wrapper2">
	
		<div id="maincol">
			<div id="leftcol">sol kisim</div>
			<div id="rightcol">sag kisim</div>
			<div id="centercol">icerik</div>	
		</div>
	</div>
</div>
	
</body>
</HTML>

Link

ahmetkoray · 03.04.2007

sağolasın işe yaradı gerçi kodlar falan farklı ama değişik yollarlada yapılabiliyormuş.

ZDikmen · 03.04.2007

Kod:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<style>
#baslik{width:100%;}
#sol{width:20%;float:left;}
#sag{width:20%;float:right;}
#icerik{width:auto;margin:0 21%;}
</style>
<body>
<div id="baslik">baslik</div>
<div id="sol">sol</div>
<div id="sag">sag</div>
<div id="icerik">icerik</div>
</body>
</HTML>

Yalnız bununla ie5.5 ile problem yaşayabilirsiniz.
En iyisi makale
http://alistapart.com/articles/holygrail

27.03.2007	#2 (permalink)
MGoktas Üyelik Tarihi: 26.01.2007 Yer: Kayseri Mesaj: 326 Görsel: 17	Re: Css & Div ile 3 blok Kodlarda ufak tefek kaymalar yapmışsınız. O yüzden çalışmıyor olabilir. icerik adli divi kapatmayı unutmuşsunuz ve / işaretinden sonra boşluk bırakmışsınız. Onu düzeltince sorun yok, çalışıyor. Başka hata var mı bilmiyorum. Kod: <div id="endis"> <div id="baslik"></div> <div id="sol"></div> <div id="icerik"></div> <div id="sag"></div> </div>

27.03.2007	#3 (permalink)
alp3r Üyelik Tarihi: 06.03.2007 Yer: Istanbul Mesaj: 22	Re: Css & Div ile 3 blok sag divini float left değil right yapsan tam süper olacak

28.03.2007	#4 (permalink)
ahmetkoray Üyelik Tarihi: 26.07.2006 Yer: sivas Mesaj: 19	Re: Css & Div ile 3 blok ilgilendiğiniz için teşekkür ederim div deki hatalar kopy paste yaparken olmuş normalde yok, sorun 1 : ortadaki divin likit olması(çözünürlüğe göre width in değişmesi) sorun 2 : <div id="baslik"></div> <div id="sol"></div> <div id="icerik" style="width: 40%"></div> <div id="sag"></div> bu üç div, id si endis olan divin içerisinde ortalanması yani en soldaki div sola yapışık en sağdaki div sağa yapışık id si içerik olan div de ortalı ve kenarlarındaki (margin) boşluk eşit olmalı (aynı zaman da likit olmalı)

03.04.2007	#6 (permalink)
ahmetkoray Üyelik Tarihi: 26.07.2006 Yer: sivas Mesaj: 19	Re: Css & Div ile 3 blok teşekkür ederim ama işe yaramadı

03.04.2007	#8 (permalink)
ahmetkoray Üyelik Tarihi: 26.07.2006 Yer: sivas Mesaj: 19	Re: Css & Div ile 3 blok sağolasın işe yaradı gerçi kodlar falan farklı ama değişik yollarlada yapılabiliyormuş.