Css ile tablo yapısı

19-09-2008, 12:51:02

Yukarıdaki resim gibi bir tablo yapısını css ve divleri kullanarak oluşturmaya çalışıyorum ama çıktılar hatalı oluyor. Yan yana div olayına baktım biraz ve anlatılanları uyguladım ama sonuç istediğim gibi değil.
Atıyorum en dıştaki div 900px olsun,1 no'lu div 120px olsun ve 2 nolu div ise otomatik olsun. Yani 1 no'lu div bitince hemen onun yanından başlayım en sona kadar gitsin. Ekteki dosya benim yaptığım örnek.

Bu konuda yardımcı olursanız çok makbule geçer.

19-09-2008, 20:50:42

#2

UZAYMEDYA

<!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-9" />
<title>deneme</title>
<style type="text/css">

</style>
</head>

<body>

<div class="anatablo">
<div class="birinci">1</div>
<div class="ikinci">2</div>
</div>

</body>
</html>

şimdi yaptım, tüm tarayıcılarda aynı görüntüleniyor. ölçüleri uyarlarsın kendine göre, kolay gelsin.

20-09-2008, 11:07:11

#3

ChaoticThundeR

Çok teşekkürler.

20-09-2008, 13:10:58

#4

gonejko

olay float left te bitiyor

20-09-2008, 15:21:15

#5

Kelebek

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" />
<title>deneme</title>
<style type="text/css">

</style>
</head>
<body>
<div id="sayfa">

<div id="div1">içerik</div>
<div id="div2">içerik</div>

</div>
</body>
</html>

tarayıcılarda denemeden verdim ama büyük ihtimal sorun çıkarmaması lazım.

ek: ikinci div örneğinde göreceksin otomatik olduğu için içeriğe göre boyutlanacak, onu da hesaplayıp pixel cinsinden değer vermeni tavsiye ederim, böylece fixlenir, yana doğru genişlemelerde sorun çıkarmaz.

21-09-2008, 16:36:12

#6

ChaoticThundeR

Aslında benim tam olarak istediğim aşağıdaki kodların çıktısıydı. Ramazam'da biraz dalgın oluyorum, ilk başta isteğimi eksik yazmışım.
style.css :

.main_area{
	background: #51b9ee;
	width:900px;
	border:1px solid;
}
.container{
	background: #51a1aa;
	margin:3px;
	width:auto;
	display:table; 
	text-align:left;
}
.menu_area{
width:120px;
float:left;
margin-right:5px;
}
.content_area{
width:755px;
float:left;
}
.content_box {
	border: 1px solid #ffffff;
	margin-bottom: 3px;
}
.content_header {
	background: #0099CC url(images/bar.png);
	color: #FFFFFF;
	font-family: Arial;
	font-weight: bold;
	font-size: 11px;
	text-align: left;
	padding: 2px;
	padding-left: 4px;
}
.content_content {
	font-family: Arial;
	font-size: 11px;
	color: #333333;
	text-align: left;
    padding: 3px;
}

index.html :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-9" />
	<link rel="stylesheet" type="text/css" href="style.css" />
	<title>deneme</title>	
</head>
<body>
	<div class="main_area">
	<div class="container">
		<div class="menu_area">
			<div class="content_box">
				<div class="content_header">Baslik</div>
				<div class="content_content">içerik</div>
			</div>
			<div class="content_box">
				<div class="content_header">Baslik</div>
				<div class="content_content">içerik</div>
			</div>
		</div>
		<div class="content_area">
			<div class="content_box">
				<div class="content_header">Baslik</div>
				<div class="content_content">Sag taraf</div>
			</div>
		</div>
	</div>
	</div>
</body>
</html>

21-09-2008, 23:13:00

#7

~~KnopArt~~

Üyeliği durduruldu

Kelebek adlı üyeden alıntı: mesajı görüntüle

<html>
#div1 {padding:10px; margin:0px; width:120px; border:1px solid #000000; float:left; }
#div2 {padding:10px; margin:0px 0px 0px 10px; border:1px solid #000000; float:left; }

bende bir şey sorayım birinci koyu ile ikinci koyu yazı arasındaki 0px ler ne işe yarıyor 3tane 0px olmasının nedeni ne acaba

22-09-2008, 02:22:53

#8

Kelebek

margin : 0px kullandığınız zaman 4 yönden uzaklık değeri alınır. Saat yönünde, Üstten, sağdan, alttan, soldan hepsindede aynı anda 0px uzaklık olsun denmiş orada

margin: 0px 1px 2px 3px; derseniz bu defa saat yönünde her kenarın dayanması gereken kenara uzaklığı farklı olur. üstten 0px, sağdan 1px, alttan 2px, soldan 3px.