iki ayrı div bitisik ve ortada nasıl?

gurelcenk · 14/04/2006, 00:59

Merhaba

table yerine div kullanmaya başladım , çok acemiyim
aşağıdaki kodlarda gözüken
menü ile anasayfayı yanyana getirip sayfayı ortayamadım bir türlü

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=utf-8" />
<title>Untitled Document</title>
</head>
<style>
#menu
{
	width: 60px;
	left: 4px;
	position: relative;
	float: left;
}
#menu a
{
  
   text-decoration: none;
   width: 60px;
   border-top: 1px #eee solid;
   border-left: 1px #eee solid;
   border-bottom: 1px #996 solid;
   border-right: 1px #996 solid;
}
#anacerceve
{
	position: relative;
	width: 560px;
	margin: 0px auto;
	padding: 5px;
	border: 1px #666 solid;
	text-align: left;
	float: none;
   }
#sayfa
{
    background-color: #fff;
	border: 1px solid #999;
	margin: 0px 0px 20px 0px;
	padding: 0px 0px 40px 0px;
   width: 500px;
}



</style>
<body>

<div id="menu">
   <a href="xxx.php?id=1" >button 1  </a>
  <a href="xxx.php?id=1" >button 2  </a>
  <a href="xxx.php?id=1" >button 3  </a>
  <a href="xxx.php?id=1" >button 4  </a>
  <a href="xxx.php?id=1" >button 5  </a>
  <a href="xxx.php?id=1" >button 6  </a>
  <a href="xxx.php?id=1" >button 7  </a></div>
<div id="anacerceve">
  <div id="sayfa">
    <p>deneme</p>
    <p>deneme</p>
    <p>deneme</p>
    <p>deneme</p>
    <p>deneme</p>
    <p>deneme</p>
    <p>deneme</p>
    <p>deneme</p>
    <p>deneme</p>
  <p>deneme</p>
  </div>
</div>

</body>
</html>

buna gore anacerceve ve icindekiler sayfanın ortasında
menu sayfanın solunda kalıyor
1.gif olarak screenshot aldım (ekte)
ben ikisininde ortada ve bitisik olmasını istiyorum
anacerceve float:none; olarak duruyor left yaparsam yapışıyorlar ancak ikiside solda duruyor
yapmaya çalıştığımı (fireworks sağolsun) 2.gif olarak upload ettim
yardım edebilirseniz cok sevinirim

syg.

Ansugo · 14/04/2006, 04:36

Menu ve icerik icin bir ust katman kullan, oyle ki

Kod:

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

seklinde olsun. Boyle kullanmasi cok daha rahat olur.

gurelcenk · 14/04/2006, 09:53

Merhaba,
teşekkürler Ansugo
menu ve anacerceveyi #genel katmanı içerisine aldım

Kod:

#genel
{
	position: relative;
	width: auto;
	margin: 0px auto;

   }

margin: 0px auto;yaptım ancak bir sonuc alamadım
son olarak
genel div'in genişliğini auto yerine width: 645px; yapınca birbirine bitişti ve ortalandı
bu seferde şöyle bir sorun çıkıyor
eger sayfanın içeriğinde

Kod:

<p>denemessssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss</p>

olursa bu div direkt bir aşağı kayıyor
yana doğru uzasa yine tamam derim

ama menu yukarda sayfa aşağıda kalıyor
sanki "<br>" basmışım gibi.

fatihhayri · 20/04/2006, 12:52

Sayfa planalama için

http://css.maxdesign.com.au/floatutorial/index.htm

bir göz at derim

ayrıca

eğer bu kadar uzun bir içerik olacaksa(denemessssss...) muhahhakkak kayma olacaktır.

slay3r · 20/04/2006, 13:47

Sitil dosyanda body etiketine aşağıdaki kodu yerleştir. Buradaki 'width' değeri sayfamızın toplam genişliği olacak. Yani sen ne kadar sayfan geniş olmasını istiyorsan o kadar piksel değeri gireceksin. Bu kod sayfamızın ortalanmasını sağlıyor.

Kod:

body{ width:710px;margin:0 auto;padding:0;position:relative;}

Ansugo'nun belirttiği şekilde iki tane katmanın(menu ve icerik adında) olduğunu varsayarsak ikisinin de 'Float' değerini 'left' yapınca sorunun düzelmesi gerekiyor.

Düzeltme: Üstte 'margin:0 auto' olacaktı, şimdi farkına vardım.

HunTER · 20/04/2006, 16:30

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" xml:lang="en" lang="eng">
<head>
   <title>Test</title>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9"/>
   <style type="text/css">
      #cerceve{
         width: 750px;
         margin: 0px auto 0px auto;
      }
      #kolon{
         float: left;
         width: 200px;
         background-color: red;
      }
      #govde{
         float: left;
         width: 550px;
         background-color: green;
      }
   </style>
</head>
<body>
   <div id="cerceve">
      <div id="kolon">
         kolon<br/>
         kolon<br/>
         kolon<br/>
         kolon<br/>
      </div>
      <div id="govde">
         govde<br/>
         govde<br/>
         govde<br/>
         govde<br/>
      </div>
   </div>
</body>
</html>

slay3r · 20/04/2006, 17:36

Bir tavsiyem daha var eğer o resimde gönderdiğiniz gibi menü oluşturacaksanız <ul><li> taglarını kullanarak menülerinizi oluşturun.

gurelcenk · 20/04/2006, 23:50

arkadaşlar hepinize çok çok teşekkür ederim
bu bilgiler çok yardımcı oldu

CSS 'le çalışmak biraz karışık ama oldukça zevkli

sevgiler & saygılar

14/04/2006, 04:36	#2 (permalink)
Ansugo Registered User Üyelik Tarihi: 07/2002 Mesaj: 6,401	Menu ve icerik icin bir ust katman kullan, oyle ki Kod: <div id="genelkatman"> <div id="menu"></div> <div id="icerik"></div> </div> seklinde olsun. Boyle kullanmasi cok daha rahat olur.

14/04/2006, 09:53	#3 (permalink)
gurelcenk Ceviz' in BeZgiN kEdisi Üyelik Tarihi: 02/2004 Yer: istanbul Mesaj: 539	Merhaba, teşekkürler Ansugo menu ve anacerceveyi #genel katmanı içerisine aldım Kod: #genel { position: relative; width: auto; margin: 0px auto; } margin: 0px auto;yaptım ancak bir sonuc alamadım son olarak genel div'in genişliğini auto yerine width: 645px; yapınca birbirine bitişti ve ortalandı bu seferde şöyle bir sorun çıkıyor eger sayfanın içeriğinde Kod: <p>denemessssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss</p> olursa bu div direkt bir aşağı kayıyor yana doğru uzasa yine tamam derim ama menu yukarda sayfa aşağıda kalıyor sanki "<br>" basmışım gibi. __________________ I'm like a bird, I only fly away , I don't know where my soul is, I don't know where my home is, All I need for you to know is

20/04/2006, 12:52	#4 (permalink)
fatihhayri talebe Üyelik Tarihi: 07/2003 Yer: istanbul Mesaj: 754	Sayfa planalama için http://css.maxdesign.com.au/floatutorial/index.htm bir göz at derim ayrıca eğer bu kadar uzun bir içerik olacaksa(denemessssss...) muhahhakkak kayma olacaktır. __________________ http://www.fatihhayrioglu.com CSS Notlarım

20/04/2006, 13:47	#5 (permalink)
slay3r Eski Cevizci Üyelik Tarihi: 06/2005 Yer: Hellforge Mesaj: 637	Sitil dosyanda body etiketine aşağıdaki kodu yerleştir. Buradaki 'width' değeri sayfamızın toplam genişliği olacak. Yani sen ne kadar sayfan geniş olmasını istiyorsan o kadar piksel değeri gireceksin. Bu kod sayfamızın ortalanmasını sağlıyor. Kod: body{ width:710px;margin:0 auto;padding:0;position:relative;} Ansugo'nun belirttiği şekilde iki tane katmanın(menu ve icerik adında) olduğunu varsayarsak ikisinin de 'Float' değerini 'left' yapınca sorunun düzelmesi gerekiyor. Düzeltme: Üstte 'margin:0 auto' olacaktı, şimdi farkına vardım. Enson 21/04/2006 12:35 tarihinde slay3r tarafından düzenlenmiştir..

20/04/2006, 23:50	#8 (permalink)
gurelcenk Ceviz' in BeZgiN kEdisi Üyelik Tarihi: 02/2004 Yer: istanbul Mesaj: 539	arkadaşlar hepinize çok çok teşekkür ederim bu bilgiler çok yardımcı oldu CSS 'le çalışmak biraz karışık ama oldukça zevkli sevgiler & saygılar __________________ I'm like a bird, I only fly away , I don't know where my soul is, I don't know where my home is, All I need for you to know is

20/04/2006, 17:36	#7 (permalink)
slay3r Eski Cevizci Üyelik Tarihi: 06/2005 Yer: Hellforge Mesaj: 637	Bir tavsiyem daha var eğer o resimde gönderdiğiniz gibi menü oluşturacaksanız <ul><li> taglarını kullanarak menülerinizi oluşturun.

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

Benzer Konular
Konu	Konuyu açana göre	Forum	Cevap	En Son Mesaj
İki tarih arasındaki günleri ayrı ayrı Hesaplamak?	/usr/local	PHP	11	30/12/2007 18:38
açılan sayfada scrollbarın ortada çıkmasını nasıl sağlarım	semain	Javascript / DHTML / Ajax	3	20/01/2007 01:26
5 ayrı Linke bağlı olarak database den 5 ayrı ürün listesi çekmek istiorum teksayfada	zantanex	ASP	2	09/05/2006 17:31
her inputa ayrı id nasıl olur?	ajnglagla	ASP	5	03/03/2005 09:48