Dreamweaver'da Arka Planı Ortalama

spyland7k · 15 Kas 2011

Öncelikle merahaba arkadaşlar, aranıza yeni katıldım ve ufak tefek sorularım olacak sizlere..

soruma geleyim , site yapmak istiyorum fakat arka plana resim koyunca farklı tarayıcılarda ve farklıı bilgisayarlarda bu sayfayı açınca resimin bir bölümü gözüküyor,şimdi ben 1024x768 'e göre yaptıysam 1280x1200 çözünürlüklü bir pc de ufak kalıyor bunu nasıl tam yerleştircem bütün kullanıcılara göre yardım edebilirmisiniz?

DW CS4 kullanıyorum.
CSS konusunda hiç bir bilgim yok.

sanaluser · 15 Kas 2011

dreamveaverle olacak bir şey değil. absolute bir divin içine img src ile imajı koyarsın. sayfanın width ve height değerini javascript ile alıp değişkenlere atarsın. imajın width ve height değerine bu değişkenleri koyarsın. bitti gitti

spyland7k · 16 Kas 2011

sanaluser' Alıntı:
dreamveaverle olacak bir şey değil. absolute bir divin içine img src ile imajı koyarsın. sayfanın width ve height değerini javascript ile alıp değişkenlere atarsın. imajın width ve height değerine bu değişkenleri koyarsın. bitti gitti

anlatımın için sağol ama nasıl yapıcam , geniş anlatımlı bir konu varmı? veya daha basiti

createk · 16 Kas 2011

sanaluser · 16 Kas 2011

spyland7k' Alıntı:
anlatımın için sağol ama nasıl yapıcam , geniş anlatımlı bir konu varmı? veya daha basiti

En basiti bu. Tabi ilk önce sayfana jquery yi yüklemen gerekiyor. Ben örnekte direkt img yi koydum sen yaparken seçimi özelleştirmen gerekiyor yoksa tüm imglere bu işlem uygulanır

$(document).ready(function(){
var en = window.width();
var boy = window.height();
$("img").css("width", en);
$("img").css("height", boy);
});

spyland7k · 17 Kas 2011

createk' Alıntı:
<style type="text/css" media="screen">
body {height:100%;margin:0;padding:0;text-align:center;}
#arka{width:100%;height:100%;margin-top:0px;padding:0;z-index:-1;position:fixed;}
</style>

<body>
<div id="arka">
<img src="images/bgaa.jpg" width="100%" height="100%">
</div>

kodlamanin geri kalani....
...
...
..
.

gibi yazarsan olcak. Eger istedigin bu degilse farkli yontemler deneriz.

Kardeş çok sağolda bu kodları nereye ekliyeceğim yardımcı olurmusun o konuda?

sanaluser' Alıntı:
En basiti bu. Tabi ilk önce sayfana jquery yi yüklemen gerekiyor. Ben örnekte direkt img yi koydum sen yaparken seçimi özelleştirmen gerekiyor yoksa tüm imglere bu işlem uygulanır

$(document).ready(function(){
var en = window.width();
var boy = window.height();
$("img").css("width", en);
$("img").css("height", boy);
});

Bende üstte arkadaşın dediği gibi bişeyler arıyodur %100 felan erkanın çözünürlük ölçüsünü alıp ona göre yerleştiriyo sanırım.

createk · 17 Kas 2011

<html>
<head>
<style type="text/css" media="screen">
body {height:100%;margin:0;padding:0;text-align:center;}
#arka{width:100%;height:100%;margin-top:0px;padding:0;z-index:-1;position:fixed;}
</style>
</head>
<body>
<div id="arka">
<img src="images/bgaa.jpg" width="100%" height="100%">
</div>
<table>
<tr>
<td> yazi yazi yazi dsqfs </td>
</tr>
</table>
</body>
</html>

bak bunu aynen yaz olayi anlarsin. en basite indirgenmis sekli.

table olan yere sayfanin body arasindaki kodlarini yerlerstir buyuk ihtimalle olu eger baska ayar gerektirmiyorsa. basarilar

sanaluser · 17 Kas 2011

spyland7k' Alıntı:
Kardeş çok sağolda bu kodları nereye ekliyeceğim yardımcı olurmusun o konuda?

Bende üstte arkadaşın dediği gibi bişeyler arıyodur %100 felan erkanın çözünürlük ölçüsünü alıp ona göre yerleştiriyo sanırım.

Bu kodları js uzantılı sayfadaysan direk bu şekilde kullanabilirsin, html sayfadaysan

<script type="text/javascript">

kodlar buraya gelsin

</script>

seklinde script tagları arasına yazman gerekiyor.

spyland7k · 18 Kas 2011

createk' Alıntı:
<html>
<head>
<style type="text/css" media="screen">
body {height:100%;margin:0;padding:0;text-align:center;}
#arka{width:100%;height:100%;margin-top:0px;padding:0;z-index:-1;position:fixed;}
</style>
</head>
<body>
<div id="arka">
<img src="images/bgaa.jpg" width="100%" height="100%">
</div>
<table>
<tr>
<td> yazi yazi yazi dsqfs </td>
</tr>
</table>
</body>
</html>

bak bunu aynen yaz olayi anlarsin. en basite indirgenmis sekli.

table olan yere sayfanin body arasindaki kodlarini yerlerstir buyuk ihtimalle olu eger baska ayar gerektirmiyorsa. basarilar

sağol kardeş bunu anladım =)

vulturemess · 25 Kas 2011

Bende bu problem yüzünden kafayı yiyordum . Ama css3 ile gelen yenilikler işinizi daha da kolaylaştırıyor . bende ufak bi örnek vereyim umarım işinizi görür

Kod:

<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Full BG</title>

<style>
		img.bg {
			/* arkaplanı belirleyen komut bölümü */
			min-height: 100%;
			min-width: 1024px;
			
			/* Orantılı ölçekleme bölümü */
			width: 100%;
			height: auto;
			
			/* Pozisyon*/
			position: fixed;
			top: 0;
			left: 0;
		}
		
		@media screen and (max-width: 1024px){
			img.bg {
				left: 50%;
				margin-left: -512px; }
		}

</style>

</head>

<body>
<img src="image.jpg" class="bg" />
</body>
</html>

Bu kod , hangi çözünürlükte olursa olsun, resim otomatik olarak kaplanacaktır. Umarım işinizi görür

freedoom16 · 26 Kas 2011

Resmi Div içine alıp css 'ile position:absolute yapıp left ve top komutlarıyla saga asagı ıstedıgın yere kaydır.

max1299 · 28 Kas 2011

spyland7k' Alıntı:
Öncelikle merahaba arkadaşlar, aranıza yeni katıldım ve ufak tefek sorularım olacak sizlere..

soruma geleyim , site yapmak istiyorum fakat arka plana resim koyunca farklı tarayıcılarda ve farklıı bilgisayarlarda bu sayfayı açınca resimin bir bölümü gözüküyor,şimdi ben 1024x768 'e göre yaptıysam 1280x1200 çözünürlüklü bir pc de ufak kalıyor bunu nasıl tam yerleştircem bütün kullanıcılara göre yardım edebilirmisiniz?

DW CS4 kullanıyorum.
CSS konusunda hiç bir bilgim yok.

belkide 1440 piksel genişlik ile olabilir

sanaluser · 28 Kas 2011

Arkadaşlar (freedoom16, max1299) belkilerle, teorilerle konuşmaya gerek yok, biz zaten olurunu yazmışız oraya. Fantezi peşinde koşmayın

Bayfresh · 28 Kas 2011

createk' Alıntı:
<style type="text/css" media="screen">
body {height:100%;margin:0;padding:0;text-align:center;}
#arka{width:100%;height:100%;margin-top:0px;padding:0;z-index:-1;position:fixed;}
</style>

<body>
<div id="arka">
<img src="images/bgaa.jpg" width="100%" height="100%">
</div>

kodlamanin geri kalani....
...
...
..
.

gibi yazarsan olcak. Eger istedigin bu degilse farkli yontemler deneriz.

Bence bu yanlis bir teknik. Kodlama herzaman reset.css le baslamasi lazim. Bunun nedeni ise InternetExplorer FireFox, Safari ve diyer browser larin margin, padding gibi degerli baska render yapmasi (kusuruma bakmayin Turkcem bozuk biraz)

Ornek bi site yapiyorsunuz. Bu yapmis oldugunuz site Internet Explorer da istediginiz gibi cikiyor (uygulamis oldugunuz pozisyon ayarlari) ama FireFox da istediginiz gibi cikmiyor. Bunun nedeni ise Reset kullanmamis olmaniz.

CSS Reset burda paylasmistim: https://www.grafikerler.net/css-reset-t54632.html

Bunu yaptiktan sonra. Gelelim Arka plani ortalama bolumune. Bunun icin javascript veya zor bi kolama gerekmez. Aslinda cok basit birsey.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="/css/reset.css" />
<title>SITE ISMI</title>
<style type="text/css">
#wrapper{ margin: 0 auto; width: 986px; height: auto; position:relative; background:url(arkaplan.jpg) #fff no-repeat}
</style>
</head>
<body>
<div id="wrapper">
ICEREK
</div>
</body>
</html>

##Aciklama##

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Bu bolum kullanmis oldugunuz xHTML versiyonu browserlara belirtir.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Bu bolumun onemi ise. Kullanmis oldugunuz Turk yazi tipleri ö, ü vesayre UTF8 charset ile dogru gosterilmesidir.

#wrapper margin: 0 auto; widht:986px;

Margin ust ve asaga degerli "0" yapip sag ve sol bolumu auto yaparsaniz. Browser bunu otomatikman ayarlar. Ve width de belirtiginiz width le kullanmak istediginiz arka planin olcusunu belirlersiniz..

freedoom16 · 28 Kas 2011

sanaluser' Alıntı:
Arkadaşlar (freedoom16, max1299) belkilerle, teorilerle konuşmaya gerek yok, biz zaten olurunu yazmışız oraya. Fantezi peşinde koşmayın

sanaluser Belki diye bişey yazmadım ayrıca benim yazdığım kod ilede istedigin katmanı ortalarsın

Bizim fantazi peşinde koştugumuz yok bu senin takıntın

Bayfresh · 28 Kas 2011

Kusuruma bakma ben sorunu yanlis yorumlamisim. Eger arka plan resminin cesitli boyutlarda tum ekrani doldurmasini istiyorsan bu CSS kodlamasini kullanman gerekir

body {
background-color: #fff;
background-image: url("RESIM.jpg");
background-attachment: scroll;
background-repeat: no-repeat;
background-position-x: 50%;
background-position-y: 0px;
background-size: auto;

}

Resim.jpg nin orginal boyutu mesela 1920px x 1600px olursa o zaman buyuk ekran kullanicilarda (24 inch) full size olarak gorebilir

sanaluser · 28 Kas 2011

freedoom16' Alıntı:
sanaluser Belki diye bişey yazmadım ayrıca benim yazdığım kod ilede istedigin katmanı ortalarsın

Bizim fantazi peşinde koştugumuz yok bu senin takıntın

Peki, sen daha iyi biliyormuşsun o zaman ama arkadaşın sorunu değişen çözünürlüğe göre resmin yeniden boyutlanması bunu da bilsen iyi olur.

freedoom16 · 28 Kas 2011

Benım hangi satırımda ben daha iyi biliyorum yazıyor ?

sanaluser · 28 Kas 2011

freedoom16' Alıntı:
Benım hangi satırımda ben daha iyi biliyorum yazıyor ?

Bildiğin konularda yaz o zaman. yanlış bilgilerle insanların zamanını harcama absolutçü çocuk

freedoom16 · 29 Kas 2011

Zaman geçtikçe konuları kavrıyorum.
2-3 sene sonra piyasada hepinizi bağımsız bir katman ''absolute'' yapacagım

	Benzer konular	Forum			Tarih
D	Dreamweaver'da Hazır WordPress Tema Düzenleme	Dreamweaver	3	5K	27 Nis 2016
S	Dreamweaver'da Farklı font kullanmak??	Dreamweaver	2	1K	27 Mar 2012
	Dreamweaver'da siteyi türkçe ve ingilizce yapmak...	Dreamweaver	2	2K	7 Ocak 2012
	Flash&Dreamweaver'da SWF dosylarını boyutlandırma! (Acil112):)	Flash	0	810	15 Eyl 2011
	Dreamweaver'da SWF dosylarını boyutlandırma! (Acil112):)	Dreamweaver	4	1K	15 Eyl 2011
	Dreamweaver'da link verilen yazının rengini değiştirmek.	Dreamweaver	5	11K	21 Ağu 2009
	Dreamweaver'da Özel Karakter Eklemek [Trademark, Copyright, Registered vb.]	Dreamweaver	16	5K	3 May 2009
R	Dreamweaver'da Sayfa Ortalama, Sayfa Ebatı Sınırlama ve Layer hakkında yardım talebi	Web Tasarımı	1	10K	11 Eyl 2008

Ara

Yeni mesajlar Yeni konular En çok mesaj En çok tepki En çok görüntülenen

Dreamweaver'da Arka Planı Ortalama

spyland7k

Benzer konular

sanaluser

spyland7k

createk

sanaluser

spyland7k

createk

sanaluser

spyland7k

vulturemess

freedoom16

max1299

sanaluser

Bayfresh

freedoom16

Bayfresh

sanaluser

freedoom16

sanaluser

freedoom16