css ile yerleşim sorunum

asker · 07/05/2007, 15:37

ceviz deki makaleler ve dream desteği ile sitenin iskeletini css ile oluşturmaya çalıştım. Kod aşağıdaki gibidir. Yalnız taglara tam hakim olmadığım için yerleştirmeyi istediğim gibi yapamadım.

Alıntı:

<!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=utf8" />
<title>Untitled Document</title>
<style type="text/css">
body {
font-family: "Comic Sans MS", Verdana, Tahoma;
font-size: 11px;
line-height: 1.5em;
color: #CCCCCC;
}
#tumalan {
float: left;
width: 900px;
border: 1px solid #000000;
margin-left: 20px;
margin-top: 50px;
height: 600px;
}
#sag {
float: right;
margin-right: 10px;
margin-top: 5px;
width:100px;
height:400px;
border: 1px solid #000000;
}
#logo {
float: left;
margin-left:10px;
margin-top:5px;
width:350px;
height:70px;
border: 1px solid #000000;
}
#icerik {
clear: left;
float: left;
margin-left:10px;
margin-top:80px;
width: 650px;
border: 1px solid #000000;
}
#alt {
float: left;
margin-left: 0px;
margin-bottom: 5px;
width: 80%;
border: 1px solid #000000;
}
</style>
</head>
<body>

<div id="tumalan">
<div id="logo">logo</div>
<div id="icerik">icerik</div>
<div id="sag">sag alan</div>
<div id="alt">alt</div>
</div>

</body>
</html>

Sorunum :

Sag kolonun, ana çerçenin en üste yapışmasını istiyorum, oysa firefox ile açtığımızda logonun bittiği yerde oluşuyor. ie ile sorun yok.
Alt alanın, ana çerçevenin alt satırının 5 px üstünde olmasını istiyorum, oysaki içerik alanın bitiminden itibaren oluşuyor.

Yardımcı olursanız sevinirim...

selfblood · 08/05/2007, 00:48

Kod:

body {font-family: "Comic Sans MS", Verdana, Tahoma; font-size: 11px; line-height: 1.5em; color: #CCCCCC;}

#tumalan {width:800px; height:455px; margin:0px auto; padding:5px; border:1px solid #666;}
#ust {width:800px; height:400px;}
#alt {width:800px; height:50px; margin-top:5px; background-color:#06C;}
#solbolum {width:695px; height:400px; float:left;}
#sagbolum {width:105px; height:400px; float:right;}
#sag {width:100px; height:400px; background-color:#06C; margin-left:5px;}
#logo {width:500px; height:90px; margin-bottom:5px; background-color:#06C;}
#icerik {width:695px; height:305px; background-color:#06C;}

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=utf8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="tumalan">
	<div id="ust">
		<div id="solbolum">
			<div id="logo">logo</div>
			<div id="icerik">icerik</div>
		</div>
		<div id="sagbolum">
			<div id="sag">sag alan</div>
		</div>
	</div>
	<div id="alt">alt</div>
</div>
</body>
</html>

Kutucuklar dışarısından sol bölüm, sağ bölüm şeklinde kutularla taşınırsa daha kolay kontrol edilebilir.

bybye · 08/05/2007, 01:05

bunu dene ...

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=utf8" />
<title>Untitled Document</title>
<style type="text/css">
body {
font-family: "Comic Sans MS", Verdana, Tahoma;
font-size: 11px;
line-height: 1.5em;
color: #CCCCCC;
}
#tumalan {
float: left;
width: 900px;
position:relative;
border: 1px solid #000000;
margin-left: 20px;
margin-top: 50px;
height: 600px;
}
#sag {
float: right;
margin-right: 10px;
margin-top: 5px;
width:100px;
height:400px;
border: 1px solid #000000;
}
#logo {
float: left;
margin-left:10px;
margin-top:5px;
width:350px;
height:70px;
border: 1px solid #000000;
}
#icerik {
clear: left;
float: left;
margin-left:10px;
margin-top:80px;
width: 650px;
border: 1px solid #000000;
}
#alt {
position:absolute;
bottom:5px;
left:10px;
width: 80%;
border: 1px solid #000000;
}
</style>
</head>
<body>

<div id="tumalan">
<div id="sag">sag alan</div>
<div id="logo">logo</div>
<div id="icerik">icerik</div>
<div id="alt">alt</div>
</div>

</body>
</html>

asker · 08/05/2007, 12:07

teşekkürler arkadaşlar

08/05/2007, 12:07	#4 (permalink)
asker Ceviz Yiyerek Büyüyoruz Üyelik Tarihi: 01/2005 Yer: istanbul Mesaj: 748	teşekkürler arkadaşlar __________________ maydanozun faydaları yemek tarifleri

Benzer Konular
Konu	Konuyu açana göre	Forum	Cevap	En Son Mesaj
Ağ sorunum var:(	gbtrabzon	Ağ / Güvenlik	7	06/03/2007 12:38
Sorunum ne?	ubuntu	C / C++	9	25/02/2007 16:09
Bi Sorunum Var	lordmrkoray	ASP	4	11/09/2004 20:06
Sorunum Mouse!	handsome	Flash / Director / Swift 3D ...	2	19/05/2004 00:02
IIS sorunum var	qitted	ASP	5	27/04/2003 21:14

Seçenekler
Yazdırmaya Uygun Sayfa Sayfayı E-posta İle Gönder