Web Site Boyutu hk.

Inan Cok Basit Bir Olay Tabloların Esneyen Özelliği Aktif Ediliyor. Ama Program Kurulu Değil Ne zamandır. Spacer.gif adinda bir image dosyası ekliyordu hatta Dreamweaver MX Ana Penceresıne ama araştırıp tekrar yazıcam.

Sayfanın sabit kalmasını css ile yapabilirsin ilk olarak bir tane sabit div oluştur. Bunu için insert div tagı kullan div'e bir isim ver sonrada css ayarlarını istediğine göre ayarla kaça kaç istiyosan yerini padding vs..Sonra bu oluşturduğun div senin ana div olur ve diğer oluşturacağın bütün divleri ana div in tagları içine atasan sorun kalmaz sayfa boyutu değişsede senin herşey tam istediğin gibi gözükür. Tam sorunun bumuydu bilmiyorum ama kısaca anlatmaya çalıştım.

Eğer sitenize sabit bir genişlik değeri ör: 1000px atayıp taşıyıcı div i ortalarsanız siteniz tüm ekran çözünürlüklerinde tarayıcı tarafından ortalanacak ve aynı görünüm elde edeceksiniz. Şimdi "container" id sine sahip bir div açın:


CSS Kodu:

Ali Emre' Alıntı:

Eğer sitenize sabit bir genişlik değeri ör: 1000px atayıp taşıyıcı div i ortalarsanız siteniz tüm ekran çözünürlüklerinde tarayıcı tarafından ortalanacak ve aynı görünüm elde edeceksiniz. Şimdi "container" id sine sahip bir div açın:

HTML:

<div id="container">
Tüm içerik bu div içinde olacak...
</div>

CSS Kodu:

Kod:

#container {
width: 1000px;
margin-left: auto;
margin-right: auto;
}

Genişletmek için tıkla ...

Bir deneyelim bakalım

Ali Emre' Alıntı:

Eğer sitenize sabit bir genişlik değeri ör: 1000px atayıp taşıyıcı div i ortalarsanız siteniz tüm ekran çözünürlüklerinde tarayıcı tarafından ortalanacak ve aynı görünüm elde edeceksiniz. Şimdi "container" id sine sahip bir div açın:

HTML:

<div id="container">
Tüm içerik bu div içinde olacak...
</div>

CSS Kodu:

Kod:

#container {
width: 1000px;
margin-left: auto;
margin-right: auto;
}

Genişletmek için tıkla ...

Bu kodların doğru kullanımı şudur;

#countainer{width: 1000px;margin:0 auto;}

Genişletmek için tıkla ...

Sitenizin ana divi sabit bir genişlik değeri almıyorsa % ler ile belirlenmişse genişlikler değişik ekran çözünürlüklerine ayak uyduracaktır mesela ana div yada table değeri 100% ise ve ekran çözünürlüğü 800x600 ise divin genişliği 800px olacaktır.
Bu değeri sabitlemek için arkadaşların dediği gibi table yada ana divinize sabit bir değer vermeniz ve sayfayı ortalamak istiyorsanız margin değerini auto olarak ayarlamalısınız. Ana div içerisindeki diğer alanlarda sabit değerler yoksa sorun cıkmayacaktır.
Css ile ilgili sorunlarınız devam ederse yazınız, memnuniyetle çözümler üretiriz.
Kolay gelsin.

Merhaba bir sitenin genişliği en fazla 960px olmalı. Artık en düşük çözünürlük 1024 www.960.gs adresinde bir framework mevcut. Çok kullanışlı ve güzel tavsiye ederim. Kolay gelsin.

hsamet' Alıntı:

Merhaba bir sitenin genişliği en fazla 960px olmalı. Artık en düşük çözünürlük 1024 www.960.gs adresinde bir framework mevcut. Çok kullanışlı ve güzel tavsiye ederim. Kolay gelsin.

Genişletmek için tıkla ...

pardon hocam.Bu dediğiniz web sayfasından bu tasarımları nasıl alabiliriz peki.ben pek anlayamadım bu sayfayı?

960px genişlik yap css ile sayfanı ortala gerisi tamam çözünürlüklere tam ayak uydurayım dersen olmaz.
Son beş yıldır tasarımlar böyle ama ileride ekran çözünürlükleri çok yükselirse değişir, yok hepsinde yayılsın sayfayı tam kaplasın dersen küçük bir css ayarı ile olur ama tavsiye etmem...

hataman' Alıntı:

Bu kodların doğru kullanımı şudur;



Sitenizin ana divi sabit bir genişlik değeri almıyorsa % ler ile belirlenmişse genişlikler değişik ekran çözünürlüklerine ayak uyduracaktır mesela ana div yada table değeri 100% ise ve ekran çözünürlüğü 800x600 ise divin genişliği 800px olacaktır.
Bu değeri sabitlemek için arkadaşların dediği gibi table yada ana divinize sabit bir değer vermeniz ve sayfayı ortalamak istiyorsanız margin değerini auto olarak ayarlamalısınız. Ana div içerisindeki diğer alanlarda sabit değerler yoksa sorun cıkmayacaktır.
Css ile ilgili sorunlarınız devam ederse yazınız, memnuniyetle çözümler üretiriz.
Kolay gelsin.

Genişletmek için tıkla ...

yukardaki kod da yanlış değilki sizinki kısa yazımı olmuş

sanaluser' Alıntı:

yukardaki kod da yanlış değilki sizinki kısa yazımı olmuş

Genişletmek için tıkla ...

Valid ve düzenli css yazmak adına bunu eklemiştim, bir çok css yazarıın validlikle yada düzenli css yazma ile cok alakadar olmadıklarını görüdüğümden üzerinde duruyorum bunun sadece.

960 grid diye arat google da...

beyler aynı dediğiniz gibi yaptım çözünürlükte dğeişiklik yok yine aynı sadece sayfayı ortaladı sayfa küçülmedi otomatik olarak anlamadım :S bir bakarmısınız ?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0014)about:internet -->
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#container {
width: 1000px;
margin-right: auto;
margin-left: auto;
}
</style>
<div id="container">
<title>anasayfa.jpg</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">td img {display: block;}</style>
<!--Fireworks CS5 Dreamweaver CS5 target. Created Sun Apr 21 20:02:44 GMT+0300 2013-->
<script language="JavaScript1.2" type="text/javascript">
<!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.document);
if(!x && d.getElementById) x=d.getElementById; return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}
}

//-->
</script>
</head>
<body bgcolor="#ffffff" onload="MM_preloadImages('images/anasayfa_r2_c2_s2.jpg','images/anasayfa_r2_c4_s2.jpg','images/anasayfa_r2_c6_s2.jpg','images/anasayfa_r2_c8_s2.jpg','images/anasayfa_r2_c10_s2.jpg','images/anasayfa_r2_c12_s2.jpg');">
<body leftmargin='0' topmargin='0' >
<div align="center">
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="display: inline-table;">
<!-- fwtable fwsrc="cansin ilk yardim.png" fwpage="anasayfa" fwbase="anasayfa.jpg" fwstyle="Dreamweaver" fwdocid = "569191801" fwnested="1" -->
<tr>
<td colspan="13"><img name="anasayfa_r1_c1_s1" src="images/anasayfa_r1_c1_s1.jpg" width="1350" height="188" border="0" id="anasayfa_r1_c1_s1" alt="" /></td>
</tr>
<tr>
<td rowspan="2"><img name="anasayfa_r2_c1_s1" src="images/anasayfa_r2_c1_s1.jpg" width="50" height="812" border="0" id="anasayfa_r2_c1_s1" alt="" /></td>
<td><a href="anasayfa.htm" target="_self" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('anasayfa_r2_c2_s1','','images/anasayfa_r2_c2_s2.jpg',1);"><img name="anasayfa_r2_c2_s1" src="images/anasayfa_r2_c2_s1.jpg" width="174" height="31" border="0" id="anasayfa_r2_c2_s1" alt="" /></a></td>
<td rowspan="2"><img name="anasayfa_r2_c3_s1" src="images/anasayfa_r2_c3_s1.jpg" width="44" height="812" border="0" id="anasayfa_r2_c3_s1" alt="" /></td>
<td><a href="yönetmelik.htm" target="_self" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('anasayfa_r2_c4_s1','','images/anasayfa_r2_c4_s2.jpg',1);"><img name="anasayfa_r2_c4_s1" src="images/anasayfa_r2_c4_s1.jpg" width="174" height="31" border="0" id="anasayfa_r2_c4_s1" alt="" /></a></td>
<td rowspan="2"><img name="anasayfa_r2_c5_s1" src="images/anasayfa_r2_c5_s1.jpg" width="37" height="812" border="0" id="anasayfa_r2_c5_s1" alt="" /></td>
<td><a href="egitimlerimiz.htm" target="_self" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('anasayfa_r2_c6_s1','','images/anasayfa_r2_c6_s2.jpg',1);"><img name="anasayfa_r2_c6_s1" src="images/anasayfa_r2_c6_s1.jpg" width="174" height="31" border="0" id="anasayfa_r2_c6_s1" alt="" /></a></td>
<td rowspan="2"><img name="anasayfa_r2_c7_s1" src="images/anasayfa_r2_c7_s1.jpg" width="43" height="812" border="0" id="anasayfa_r2_c7_s1" alt="" /></td>
<td><a href="galeri.htm" target="_self" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('anasayfa_r2_c8_s1','','images/anasayfa_r2_c8_s2.jpg',1);"><img name="anasayfa_r2_c8_s1" src="images/anasayfa_r2_c8_s1.jpg" width="173" height="31" border="0" id="anasayfa_r2_c8_s1" alt="" /></a></td>
<td rowspan="2"><img name="anasayfa_r2_c9_s1" src="images/anasayfa_r2_c9_s1.jpg" width="42" height="812" border="0" id="anasayfa_r2_c9_s1" alt="" /></td>
<td><a href="referanslarimiz.htm" target="_self" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('anasayfa_r2_c10_s1','','images/anasayfa_r2_c10_s2.jpg',1);"><img name="anasayfa_r2_c10_s1" src="images/anasayfa_r2_c10_s1.jpg" width="174" height="31" border="0" id="anasayfa_r2_c10_s1" alt="" /></a></td>
<td rowspan="2"><img name="anasayfa_r2_c11_s1" src="images/anasayfa_r2_c11_s1.jpg" width="41" height="812" border="0" id="anasayfa_r2_c11_s1" alt="" /></td>
<td><a href="iletisim.htm" target="_self" onmouseout="MM_swapImgRestore();" onmouseover="MM_swapImage('anasayfa_r2_c12_s1','','images/anasayfa_r2_c12_s2.jpg',1);"><img name="anasayfa_r2_c12_s1" src="images/anasayfa_r2_c12_s1.jpg" width="174" height="31" border="0" id="anasayfa_r2_c12_s1" alt="" /></a></td>
<td rowspan="2"><img name="anasayfa_r2_c13_s1" src="images/anasayfa_r2_c13_s1.jpg" width="50" height="812" border="0" id="anasayfa_r2_c13_s1" alt="" /></td>
</tr>
<tr>
<td><img name="anasayfa_r3_c2_s1" src="images/anasayfa_r3_c2_s1.jpg" width="174" height="781" border="0" id="anasayfa_r3_c2_s1" alt="" /></td>
<td><img name="anasayfa_r3_c4_s1" src="images/anasayfa_r3_c4_s1.jpg" width="174" height="781" border="0" id="anasayfa_r3_c4_s1" alt="" /></td>
<td><img name="anasayfa_r3_c6_s1" src="images/anasayfa_r3_c6_s1.jpg" width="174" height="781" border="0" id="anasayfa_r3_c6_s1" alt="" /></td>
<td><img name="anasayfa_r3_c8_s1" src="images/anasayfa_r3_c8_s1.jpg" width="173" height="781" border="0" id="anasayfa_r3_c8_s1" alt="" /></td>
<td><img name="anasayfa_r3_c10_s1" src="images/anasayfa_r3_c10_s1.jpg" width="174" height="781" border="0" id="anasayfa_r3_c10_s1" alt="" /></td>
<td><img name="anasayfa_r3_c12_s1" src="images/anasayfa_r3_c12_s1.jpg" width="174" height="781" border="0" id="anasayfa_r3_c12_s1" alt="" /></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

Web

web sitesi için yardım cı olacak varmı assagıdaki tasarımdakini yapıcam