Div center yapma ve kayma sorunu.

11-01-2010, 11:32:06

arkadaşlar aşağıdaki divi ilk once nasıl center olarak yapabilirim. ikinci olarakta ben bu divi farklı ekran çözünürlüğünde bir bilgisayarda açtığımda bu divlerin yerleri kayıyor değişik bir şekle gibiyor. nasıl halledebilrim bu sorunları ? yardımcı olursanız çok sevinirim.

csss kodu

#serit1{
	height:208px;
	position:relative;
	top:50px;
	left:60px;
	text-align:center;}
.serit2{	
	height:208px;
	position:relative;
	top:70px;
	left:60px;
	 }
.serit3{	
	height:208px;
	position:relative;
	top:90px;
	left:60px;}
.div{
     float:left;
	 width:293px;
	 height:207px;
     margin:10px 10px;
	 background-image:url(../images/menu-bg.png);
	 background-repeat:no-repeat;
}

<!------BİRİNCİ SERİT BASLADI--------> 
<div id="serit1"> 
<div class="div"> 
	<div class="ust"> </div> 
	<div class="sag"> </div> 
</div> 
 
<div class="div"> 
	<div class="ust"> </div> 
	<div class="sag"> </div> 
</div> 
 
<div class="div"> 
	<div class="ust"> </div> 
	<div class="sag"> </div> 
</div> 
 
</div> 
<!----BİRİNCİ SERİT BİTTİT-----> 
 
<!----İKİNCİ SERİT BBASLADI-----> 
<div class="serit2"> 
<div class="div"> 
	<div class="ust"> </div> 
	<div class="sag"> </div> 
</div> 
 
<div class="div"> 
	<div class="ust"> </div> 
	<div class="sag"> </div> 
</div> 
 
<div class="div"> 
	<div class="ust"> </div> 
	<div class="sag"> </div> 
</div> 
</div> 
<!-----İKİNCİ SERİT BİTTİ-------> 
<!------UCUNCU SERİT BASLADI------> 
<div class="serit3"> 
<div class="div"> 
	<div class="ust"> </div> 
	<div class="sag"> </div> 
</div> 
 
<div class="div"> 
	<div class="ust"> </div> 
	<div class="sag"> </div> 
</div> 
 
<div class="div"> 
	<div class="ust"> </div> 
	<div class="sag"> </div> 
</div> 
</div> 
<!--------UCUNCU SERİT BİTTİ---------->

11-01-2010, 11:34:35

#2

gokhanazp

margin-left:auto;margin-right:auto;

yukardaki kodu centerlamak istediğin div in cssine ekleyerek deneyebilirsin.

11-01-2010, 11:44:02

#3

Berkt

Malesef olmadı dostum :/

11-01-2010, 12:34:51

#4

cocainer

En arkaya bir div tanımla sonra onun içinde çalışmalarını yap ayrıca top left yerine margin kullanabilirsin.
Nasl birşey yapmak istediğini çiz istersen üstünden konuşalım.

Ayrıca bir div i ortalamk için margin : 0 auto; kullabilirsin.

11-01-2010, 12:56:21

#5

Berkt

aşağıdaki şekildeki gibi yapmak istiyorum. tum bu şeritlerin başın bi div koydm "position:absolute;" ekledim sabitledim ama kötü oldu boylede. en iyisi bunların hepsini yeni baştan yapayım ben

http://img36.imageshack.us/img36/7647/adszwwf.jpg

11-01-2010, 14:32:31

#6

SefaCan

margin:auto; yeterlidir...

11-01-2010, 14:38:23

#7

Berkt

buyrun buraya attım " http://berkturan.com/div/ " marginle flnde hiç bir şekilde olmuyor.

11-01-2010, 17:28:36

#8

cocainer

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

aşağıdaki şekildeki gibi yapmak istiyorum. tum bu şeritlerin başın bi div koydm "position:absolute;" ekledim sabitledim ama kötü oldu boylede. en iyisi bunların hepsini yeni baştan yapayım ben

http://img36.imageshack.us/img36/7647/adszwwf.jpg

Sıfırdan yaptım kodlarıda aşağıda veriyorum. Kolay gelsin.

<!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" />
<style>
*{
	margin:0;
	padding:0;
}

#arka{
	width:950px;
	margin: 0 auto;
	background-color:#CCCCCC;
}

#ust{
	width:900px;
	height:100px;
	margin: 0 auto;
	border:3px #990000 solid;
	text-align:center;
	background-color:#999999;
}

#alt{
	width:900px;
	height:400px;
	margin: 0 auto;
	border:3px #990000 solid;
	text-align:center;
	background-color:#999999;
}

.kutu{
	position:static;
	width:100px;
	height:100px;
	margin: 23px;
	float:left;
	background-color:#666666;
	border:2px #0099FF solid;
}
</style>
</head>

<body>
<div id="arka">
	<div id="ust">Ust</div>
    <div id="alt">
        <div class="kutu">Kutu</div>
        <div class="kutu">Kutu</div>
        <div class="kutu">Kutu</div>
        <div class="kutu">Kutu</div>
        <div class="kutu">Kutu</div>
        <div class="kutu">Kutu</div>
        <div class="kutu">Kutu</div>
        <div class="kutu">Kutu</div>    
    </div>
</div>
</body>
</html>

11-01-2010, 17:35:45

#9

Berkt

Saolasın kardeş =)