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

Arkadaşlar neredeyse kodladığım çoğu çalışmada bu ekran çözünürlüğü problemini yaşıyorum lütfen artık şuna bir çözüm istiyorum;

1. Relative ile absolute ve fixedin farkını gördüm yani hangisini koyunca ne oluyor gördüm ama hangisini kullanmalıyım hangisinde problem yaşamam çözemedim, şuan relative kullanıyorum tüm elemanlarda absolutede sıkıntı oluyor çünkü ekran kayınca site de kayıyor, fixed de kaydırma çubukları falan çıkmıyor her neyse bunlardan hangisini kullanmak iyidir.

2. Örneğin şöyle bir kodum var ;

#baslik{
position: relative;
width: 1364px;
height: 100px;
top: -147px;
left: -7px;
background-color: black;
}
üste böyle düz bir alan çiziyorum diyelim hani örneğin bir tema yapacağım wp için falan, bunun üstüne de logo falan koyucam neyse, şimdi bu 1364 benim ekran çözünürlüğümde ve diğer tüm pixeller benim ekran çözünürlüklerime uygun, mesela operadan girince siteyi tam istediğim gibi görüyorum çünkü onda kodluyorum ama google chromeden girince alttan 5px yukarda görünüyor, hadi onu geçtim bunu ekran çözünürlüğü küçük biri açtığında daha kötü görecek ben bu işten hiç çıkamadım lütfen bir el atın, teşekkürler.

Google da responsive tasarım olarak araştırma yapmanızı tavsiye ederim.

Hocam sorununuzu tam anlayamamakla birlikte galiba siz position olayını tam kavrayamamışsınız.Google'dan bu konuyla ilgili bilgilere tekrar bakabilirsiniz.
Ekrana göre genişlik vermek istiyorsanız yani -responsive tasarıma girer- px yerine % kullanmanız gerekir.

Alttaki arkadaşa verdiğim cevaba bakarsanız tam olarak ne dediğim anlaşılır :)



Hocam şimdi şöyle ki evet positiondan hiç bir şey anlamadım, bende 50 tane bilgisayar, telefon, tablet yokki hepsi için ayrı media şeyisi ekleyeyim, pixelleri ayarlayamıyorum ancak kendim için oluyor şöyle söyleyim size, şimdi diyelim ki ben bir site yaptım şöyle ;

bu bende tam gözüküyor yani ben kodlarken pixelleri deneyerek tamı tamına koyduğum için yani 1300 vs yazmak yerine tam oturtarak 1364 yazdığım için bu bana tam uygun oluyor, ancak başkası bu siteye girdiğinde diyelimki adamın ekranı yanlamasına genişliğine küçük ben demişim ki ekrandaki şerit uzunluğu 1364 pixel olacak bende tam ama adamda ekran 960px bende ekrana tam sığan şerit onda kayıp gidecek çubukla çekmesi gerekecek, sizin söylediğiniz % olayını yeni duyuyorum, eğer ki öyle bir şey varsa yapmak isterim ben istiyorum ki ben nasıl görüyorsam karşımdaki de öyle görsün mesela wmaraci.com'a girince bende sağa sola çekme çubuğu çıkmıyor altta, sizde de çıkmıyor ama ben bu siteyi kodlasam bende çıkmasa sizde çıkar, bunu beceremiyorum, biraz araştırdım responsive olayını ama diyorki şu pixelin altındaysa şu olsun şunun üstündeyse şu falan öyle istemiyorum sadece çekme çubuğu çıkmasın tarayıcıya sabit güzel bir site olsun örneğin burası gibi.

% ile width verebilirsiniz. Örn width:100%;

sürekli position ve px kullanmak yerine ana bir div oluşturup orada mümkün oldukça sadece float:left & right kullanın hocam.

Yazıları buraya ekleyin

Ek Olarak: örnek:

sol bölüm

sag bölüm

Teşekkür ederim bu kısa kod açısından avantaj olur ama dediğim gibi hala pixellerle oynuyoruz, bende tam otursa başkasında oturamayabilir :(



bakın bu sorunumu çözebilir teşekkür ederim :) birde bunu bahsettikleri @all media ile nasıl kullanabileceğimi biliyormuydunuz gece gece sıkmıyorsam ?

Hocam responsive -uyumlu- olayı 2 şekilde gerçekleşir.Birincisi genişliği esnek verirsin yani benim daha önce söylediğim (%) kullanımı gibi.
Diğeri de media queries kullanımı yani sizin şu ekran genişliğin de şu olsun,şu genişlikte şu olsun olayını yapmak için.
Size lazım olan sadece genişlik onun içinde 1364px genişlik verdiğiniz div veya her neyse onun genişliğine width: 100%; yazın istediğiniz tarayıcıda deneyebilirsiniz.

şuan yaptım teşekkürler, kenarlarda 2-3 px lik boşluklar kaldı onları da padding ekleyip margin ile çektirerek topladım şu şekilde;

position: relative;
background-color: black;
width: 100%;
height: 100px;
top:-150px;
padding: 0px 5px 0px 5px;
margin-left: -5px;

tekrardan teşekkür ediyorum hepinize :)

*,*:after,*:before { margin: 0; padding: 0; } kullanarak boşluk sorunu halledebilirsin.