CSS İle Div Ortalamak

Tahribat.com Forumları
line

Html - CSS - XML - JavaScript - Ajax
line

CSS İle Div Ortalamak

24/Tem/13 22:47 Kısayol Şikayet Özel Mesaj

manyaki

Kayıt Tarihi: 27/Temmuz/2005

Sayfamı 1024*748 e göre ayarlayıp Dreamweaver ile tasarladım, fakat sayfa başka çözünürlük ayarlarında ortalanmıyor, sola yaslı çıkıyor. Sorunu nasıl çözebilirim? Kod aşağıda...

<!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 type="text/css">

#bg {

position: absolute;

width: auto;

height: auto;

z-index: 1;

left: 0px;

top: -1px;

background-image: url(../bg.png);

}

#bg #apDiv1 {

position: absolute;

width: 1024px;

height: 180px;

z-index: 1;

left: 0px;

top: -1px;

}

#bg #apDiv2 {

position: absolute;

width: 1024px;

height: 238px;

z-index: 2;

left: -14px;

top: 179px;

}

#bg #apDiv3 {

position: absolute;

width: 270px;

height: 33px;

z-index: 1;

left: 772px;

top: -158px;

}

#bg #word {

position: absolute;

width: 153px;

height: 17px;

z-index: 1;

left: 15px;

top: 3px;

border: 0px solid;

}

</style>

</head>

<body>

<div id="bg">

<div id="apDiv1"><img src="../images/Untitled-2_02.png" width="138" height="180" alt="anasayfa" /><img src="../images/Untitled-2_03.png" width="200" height="180" alt="satiliklar" /><img src="../images/Untitled-2_04.png" width="179" height="180" alt="kiraliklar" /><img src="../images/Untitled-2_05.png" width="147" height="180" alt="arama" /><img src="../images/Untitled-2_06.png" width="211" height="180" alt="hakkimizda" /><img src="../images/Untitled-2_07.png" width="149" height="180" alt="iletisim" />

</div>

<div id="apDiv2"><img src="../emlak banner (1).jpg" width="1037" height="151" alt="banner" />

<div id="apDiv3"><img src="../images/search-fields_03.png" width="190" height="40" alt="search_text" />

<div id="word">

<form id="form1" name="form1" method="post" action="">

<label for="word"></label>

<input type="text" name="word" id="word" />

</form>

</div>

<img src="../images/search-fields_04.png" width="67" height="40" alt="search_button" />

</div>

<img src="../ALT.jpg" width="1037" height="86" alt="alt" />

</div>

</div>

</body>

</html>

since 2005 // tbt

Alıntı yap
24/Tem/13 22:50 Kısayol Şikayet Özel Mesaj

Daniel-Koo

Kayıt Tarihi: 22/Ekim/2010

width: height: auto vermişsin bunlar ne?

genel container divi aç içinde olsun içerikler o container'ı da

div#container {

width:980px;
height:auto;
margin-left:auto;
margin-right:auto;

}

dediğinde ortalar

ne diyon?

Alıntı yap
24/Tem/13 22:52 Kısayol Şikayet Özel Mesaj

1234567B

Kayıt Tarihi: 04/Şubat/2010

body e 1024 ver sonra margin:0px auto;

arbeit macht frei

Alıntı yap
24/Tem/13 22:53 Kısayol Şikayet Özel Mesaj

manyaki

Kayıt Tarihi: 27/Temmuz/2005

hocam kodu düzelttim ama işe yaramadı aynen kopyalıyorum sorun nerde?

<!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 type="text/css">

#container {

width:980px;

height:auto;

margin-left:auto;

margin-right:auto;

}

#bg {

position: absolute;

width: 1024px;

height: 748px;

z-index: 1;

left: 0px;

top: -1px;

background-image: url(../bg.png);

}

#apDiv1 {

position: absolute;

width: 1024px;

height: 180px;

z-index: 1;

left: 0px;

top: -1px;

}

#apDiv2 {

position: absolute;

width: 1024px;

height: 238px;

z-index: 2;

left: -14px;

top: 179px;

}

#apDiv3 {

position: absolute;

width: 270px;

height: 33px;

z-index: 1;

left: 772px;

top: -158px;

}

#word {

position: absolute;

width: 153px;

height: 17px;

z-index: 1;

left: 15px;

top: 3px;

border: 0px solid;

}

</style>

</head>

<body>

<div id="container">

<div id="bg">

<div id="apDiv1"><img src="../images/Untitled-2_02.png" width="138" height="180" alt="anasayfa" /><img src="../images/Untitled-2_03.png" width="200" height="180" alt="satiliklar" /><img src="../images/Untitled-2_04.png" width="179" height="180" alt="kiraliklar" /><img src="../images/Untitled-2_05.png" width="147" height="180" alt="arama" /><img src="../images/Untitled-2_06.png" width="211" height="180" alt="hakkimizda" /><img src="../images/Untitled-2_07.png" width="149" height="180" alt="iletisim" />

</div>

<div id="apDiv2"><img src="../emlak banner (1).jpg" width="1037" height="151" alt="banner" />

<div id="apDiv3"><img src="../images/search-fields_03.png" width="190" height="40" alt="search_text" />

<div id="word">

<form id="form1" name="form1" method="post" action="">

<label for="word"></label>

<input type="text" name="word" id="word" />

</form>

</div>

<img src="../images/search-fields_04.png" width="67" height="40" alt="search_button" />

</div>

<img src="../ALT.jpg" width="1037" height="86" alt="alt" />

</div>

</div></div>

</body>

</html>

since 2005 // tbt

Alıntı yap
24/Tem/13 22:55 Kısayol Şikayet Özel Mesaj

SinusX

Kayıt Tarihi: 14/Aralık/2010

böyle yapacaksan absolute pozisyonda

#bg{width:980;left :50%;margin-left:-490px;} yap

Si vis pacem para bellum.

Alıntı yap
24/Tem/13 22:57 Kısayol Şikayet Özel Mesaj

manyaki

Kayıt Tarihi: 27/Temmuz/2005

SinusX bunu yazdı

böyle yapacaksan absolute pozisyonda

#bg{width:980;left :50%;margin-left:-490px;} yap

işte bu işe yaradı sağol hocam

since 2005 // tbt

Alıntı yap
24/Tem/13 22:58 Kısayol Şikayet Özel Mesaj

SinusX

Kayıt Tarihi: 14/Aralık/2010

manyaki bunu yazdı

SinusX bunu yazdı

böyle yapacaksan absolute pozisyonda

#bg{width:980;left :50%;margin-left:-490px;} yap

işte bu işe yaradı sağol hocam

üsttekinde yaramaz position'ın absolute olduğu için ya bg içindeki absolute u sil yada container a position:relative ver o zaman yine olur

Si vis pacem para bellum.

Alıntı yap
24/Tem/13 23:24 Kısayol Şikayet Özel Mesaj

asiminnesli

Kayıt Tarihi: 19/Mart/2010

body{width:1024px;

right:0px auto;

left:0px auto ;}

veya

body{width:1024px;

margin-left:auto;

margin-right:auto ;}

I am Jack's inflamed sense of rejection

Alıntı yap
24/Tem/13 23:28 Kısayol Şikayet Özel Mesaj

camarade
ontedi

Kayıt Tarihi: 04/Eylül/2005

position:absolute

niteliğine sahip olan bir elementi css ile ortalayamazsın.

Matematikçi ve Yazılımcı. http://www.ontedi.com ve http://www.cizgi.site Siteme beklerim herkesi.

Alıntı yap
24/Tem/13 23:29 Kısayol Şikayet Özel Mesaj

asiminnesli

Kayıt Tarihi: 19/Mart/2010

bu arada yer igelmişken sorayım bazen çok nadir de olsa <center> kullanıyorum eskide mi kaldı kullanmamalıyım kullanırsam sıkıntı olur mu v.sv.s ... .

I am Jack's inflamed sense of rejection

Alıntı yap
25/Tem/13 00:02 Kısayol Şikayet Özel Mesaj

shock56

Kayıt Tarihi: 31/Mart/2007

asiminnesli bunu yazdı

bu arada yer igelmişken sorayım bazen çok nadir de olsa
kullanıyorum eskide mi kaldı kullanmamalıyım kullanırsam sıkıntı olur mu v.sv.s ... .

html5 ile center kullanımı kalktı. center yerine css kullan. (text-align:center)

http://www.w3schools.com/tags/tag_center.asp

The <center> tag is not supported in HTML5. Use CSS instead.

Alıntı yap

Toplam Hit: 1830 Toplam Mesaj: 12

Cevapla