@Özgül
çok yaşayın çok güldüm yoruma.
öyleyse anlatıyorum. beğenisiz bırakma beni öyleyse
Soruya gelince:
aynı problem bir kaç ay önce bendede vardı zaten forumlarda cirit atıp dirhem dirhem not topladım
ekran çöznürlüğüne uygun site yaparken genelde en prestijli siteler dahi bu konuya çok bulaşmak istemiyor.
youtube mesela ekrana sola dayamış nerde açarsan aç solda duruyor
ekranın sağı beyazmış kötü duruyormuş adamların umrunda değil.
yine diğer hemen hemen bütün sitelerde ve yaygın kullanımlı olarak
1000 px vermişler ekranı ortaslamışlar olay bitmiştir.
grafikerler.org böyle bir site işte. arka planı yani body: background siyah yapmış, üstüne ortalanmış bir div oluşturmuş içini doldurmuş. nerde açarsan aç hep böyle gözükecek.
eğer bunları yaparsan hiç problem yok yap gitsin.....
yooook ben bunu istemiyorum benim tam ekran resmim var her yerde aynı çıksın diyorsan işin zor.
ama ben size araştırdığım notları burada yazacağımdan şanslısın, hazır kodları al yapıştır.
Fakat şunu belirtmeden konuya geçmeyeyim. çok önemli bu kısmı iyi anlayın çünkü insiyatif kullancaksınız sorun çıkarsa karışmam:
web tasarımı aşçılık gibidir. 1. 2. 3. aşçılara aynı malzemeleri verirsin ve dersin ki
"bu un ve diğer malzemlerle ne yaprsanız yapın."
1. aşçı tatlı yapar
2. aşçı hamur işi yapar
3. aşçı yemek yapar
nihayetinde tasarım yapacak adamın eline kodlar verirlir. ne yaprsan yap denilir
ödüllü süper siteler gördüm ve rezalet tasarımlı sitelerde... bu adamlar hepsi aynı kodu kullanmışlar ama ortaya farklı birşeyler çıkmış.
burada kodu suçlayamayız.
bu kadar neden laf ettiğime gelince bu çözünürlük olayında farklı yöntemler kullnaılıyor fakat tasarımına göre sen seçeceksin:
başlıyorum nihayet:
tam ekranlı bir resim koydun ve bunun monitöre uygun olmasını istiyorsan kendine şunu soracaksın:
"resimin üstüne yazı yazacakmıyım yoksa başlık gibi yukarıda dursun altına yazı eklerim?
eğer resmin üzerine yazı yazmayacaksan işin çok kolay
html de örneğin:
<body id="main">
<div id="anasayfa" class="resim">
<div id="baslık" align="center">
<div id="logo"><img src="LOGOLAR.png" alt="resim bilgisi yazarsın buraya" width="100%" height="100%"/></div>
gibi yazdın. divin resmini ekleyebiliyorsun sayıyorum
boşluk bırakınca width ve height değerini yukarıdaki gibi yapcaksın.hepsi bu...
sonra bunların altına divler oluşurup yazı yazarsn 1000px de de 1920 px de de çalışır.
fakat herşeyi kodlardan beklemek haksızlık. kullanacağın resimin boyutunu photohopta 1920 px yap yada interneteen hd 1920 px foto yaz, arat bir tane bul.
çünkü komutu verdin büyüt diye, o divi büyütecek, resimi değil.
bunu hesaba katmalısın yoksa 1920 px gelince resim ortada kalır düşersin yollara neden resim küçük kaldı diye
gelelim bunun css ine pek önemli birşey değil muhtemelen kullanmayacaksın htmlde halloldu ama yinede yazayım:
#main {
background-color: rgb(51,51,51);
margin: 0px;
padding: 0px;
}
#main #anasayfa #baslık #logo {
height: 50px;
width: 500px;
border-right-style: none;
border-right-color: rgb(0,0,0);
padding-top: 0px;
padding-right: 1px;
padding-bottom: 1px;
padding-left: 1px;
background-color: rgb(0,0,0);
z-index:21;
margin-right:auto;
margin-left:auto;
margin-top:5px;
}
.resim {
overflow: hidden;
height:100%;
width:100%;
background-position: center center;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
ve son olarak bu kuralla ilgili en güzel çalışan yöntem budur kanımca hiç uğraştırmıyor. her fotoyuda rahatlıkla kullanıyorsun. kolaydan başladım. ama ben üstüne illa yazı yazacağım diyorsan bunu üstüne yazı yazılıyor
oda şöyle:
bir absulate div oluşturup bunun üstüne yazı yazıyorsun
absulate divler zaten hiçbirşey tanımadığından resmin üstüne kayıyor.
ama ben tavsiye etmiyorum çünkü bir ara çok uğraşmıştım yazı istediğim yerde durmamıştı ve beni sinir etmişti.
o gündür tekrar denemeye çalışmadım. ben yaparım diyorsan yap.
aynı şekilde bir yöntem daha var yine bir div oluşturuyorsun yazını yazıyorsun
sonra resmimin bulunduğu divin kordinatlarını veriyorsun
yani 2 div üstüste geliyor.
daha sonra z-index değerini 1 yapıp resimi öne taşıyorsun böylece resimin üstünde yazı oluyor.
hatırlıyorum bunun içinde çok uğraşmış ve sinir olmuştum. ben yaparım diyen yapsın.
ilk kural burada bitmiştir
gelelim 2. kurala ve şuan sitemde denediğim bir özellik güzel çalışıyor ancak burada her kafana esen resimi kullanamıyorsun.
bunu derken ne kast ettiğimi söyleyim. resimi tam ekran yapıyor ama üstteki özellik gibi değil resmin bir köşesinde tutup büyütüyor küçültüyor. yani lastik gibi çekiyor. böyle olunca resimin bir kısmı bazen dışarıda kalabiliyor.
bu yüzden resim seçimi çok önemli. mesela 5 kişinin yanyana resmi var diyelim... sağ ve soldakiler güme gidebilir. bu yüzden ya resmi photohopta ortalaycaksın kesinti olsa bile belli olmayacak.
buradaki temek prensip resmin bozulduğunu sen farket ama siteye giren resimin orjinali o sansın.
ben manzara kullandım gökyüzü biraz gitmiş yada çimenlerin bir kısmı görünmüyor bunu sadece ben biliyorum. sorun yok...bütünlük bozulmadı.
nedir bu yöntem peki:
