Çok büyük sorunum CSS Ekran Çözünürlüğü

Beyler tekrardan bir şey diyeceğim ama bakın oldu dedimde tamam oldu olmasına da şöyle oldu bakınız şimdi ben size direk kodları vereyim :
CSS KODLARI ;

body{margin:0 auto; padding: 0; width: 100%; height: 100%; border:1px solid red;}
#bas{width: %100; height: 100px; background-color: black;}
#alt{position:relative; bottom: -505px; width:%100; height:50px; background-color: black;}

HTML KODLARI ;













sadece bunlarla bir sayfa oluşturmanızı ve ardından tarayıcınızın boyutlarıyla oynamanızı istiyorum, ne dediğimi anlayacaksınız :( bir çözemedim gitti ne anlayışsız herifim yav

bottom:-505px diye bir kullanım olmaz, ekran çözünürlüğü sadece width, yani genişlikten ibaret değildir. Yükseklik de bunun bir parçasıdır. Sen kendi ekran çözünürlüğüne göre en altta durması için böyle bir şey yapmışsın. Bu şekilde css olmaz.

Şimdi bu footer olayı için sana google üzerinde sticky footer diye aratmalısın diyeceğim ama daha öğreneceğin çok şey var.. yanlış anlama hevesini kırmak için değil sadece yanlışlarını gösteriyorum, hepimiz bu yollardan geçtik..


en temelini söyleyeyim ama bunun da handikapları olacaktır ancak konuya biraz daha vakıf olabilmen için küçük bir örnek vereceğim..

body {margin:0px; padding:0px;}
.wrapper {width:100%; height:100%;}
.header {width:100%; height:100px; background-color:blue;}
.footer {position:absolute; bottom:0px; left:0px; height:100px; width:100%; background-color:yellow;}

Hocam böyle olmaz. Kendi bilgisayarına göre yapma. Bırak kenarda boşluk kalsın ve site genişliğine bir standarta oturt. 1364px olmaz. 1024 yap bari. 1024 ile başla yavaş yavaş responsive olayına doğru geliştirirsin kendini.

Sana anlatayım. Senin ihtiyacın olan tek şey (şu an için) katmanların site ne çözünürlükte olursa olsun tam ortaya hizanlanması.
Ana katmana position:relative;margin:0px auto; verirsen, o ana katmaz boyut küçültülsede her zaman kendini yanlardan otomatik hizalar ve ortada kalır. Tarayıcıda sağa sola kaymaz.
Böyle olunca bu katmanın altında kalan diğer position:relative; katmanlarda o katmana göre hareket eder ve oynaklık yapmaz. Onlarda kendini duruma göre ayarlar.

Eğer position:absolute verirsen her zaman verdiğin değere göre kayma olur. Mesela position:absolute;right:120px; dedinmi kendini sağdan 120px boşluk kalacak şekilde sağa çeker. Sayfa yakınlaştırması küçültülünce sağdaki boşlukta artacağı için bu katman sağda kalır. Bozulur.

Sen ilk önce ana katmanlarına position:relative;margin:0px auto; değeri vererek o katmanları hizala. Sonra geçersin diğer ayrıntılara.

Hocam

[css]
max-width: 1200px;
min-width: 1200px;
[/css]