sağda sabit duran reklam

imalone · 13.10.2007

bazi haber sitelerinde mouse ile sayfada asagiya ilerlemeye ragmen, sagda (mesela haber7 de) sabit kalan bir reklam oluyor.
bizim sitemiz ise www.habersaati.com . bizim sitedede ayni sekilde calisiyor. fakat dikkat ederseniz titriyor.
bunu sanirim j.script ile yapiyorlar. titremeden sabit sekilde bunu yapmak istiyoruz. acaba bu konuda yardimci olabilirmisiniz.

BYK · 13.10.2007

Kod:

//external page&scroll size functions from http://www.softcomplex.com/docs/get_window_size_and_scrollbar_position.HTML
function f_clientWidth() {
 return f_filterResults (
 window.innerWidth ? window.innerWidth : 0,
 document.documentElement ? document.documentElement.clientWidth : 0,
 document.body ? document.body.clientWidth : 0
 );
}
function f_clientHeight() {
 return f_filterResults (
 window.innerHeight ? window.innerHeight : 0,
 document.documentElement ? document.documentElement.clientHeight : 0,
 document.body ? document.body.clientHeight : 0
 );
}
function f_scrollLeft() {
 return f_filterResults (
 window.pageXOffset ? window.pageXOffset : 0,
 document.documentElement ? document.documentElement.scrollLeft : 0,
 document.body ? document.body.scrollLeft : 0
 );
}
function f_scrollTop() {
 return f_filterResults (
 window.pageYOffset ? window.pageYOffset : 0,
 document.documentElement ? document.documentElement.scrollTop : 0,
 document.body ? document.body.scrollTop : 0
 );
}

Yukarıdaki fonksiyonlar sayesinde sayfanın toplam yüksekliği, toplam genişliği, yatayda ve dikeyde ne kadar kaydırıldığı gibi bilgilere pixel cinsinden erişebilirsin.

Kod:

document.getElementById("banner1").style.top=f_clientHeight() + f_scrollTop() - document.getElementById("banner1").offsetHeight + "px"

Bu sayede reklamın koordinatlarını sayfanın en altının hemen yukarısına alabilirsin. Bu işlemin sayfa her kaydırıldığında ve yeniden boyutlandırıldığında tekrarlanması gerektiğinden, bunu bir fonksiyon haline getirip "window.onscroll" ve "window.onresize" a atarsan sorunun çözülecektir. Tabi elemanın position özelliğinin absolute olması gerektiğini ve z-index'inin de sayfadaki en büyük z-index olması gerektiğini unutma

erturkerdal · 14.10.2007

CSS ile böyle bir şey mümkün mü?

BYK · 14.10.2007

CSS'de "position:static" özelliğiyle yapılabilir diye tahmin ediyorum ancak detaylı çalışmalara girmedim. Ve yapılabildiği takdirde CSS ile yapılması çok daha verimli bir sistem olur, hatırlatma için teşekkürler

Tarık · 14.10.2007

Merhaba
CSS yardımı ile şöyle olabilir.

default.ASP kodlarınız

Kod:

<style type="text/CSS"> 
<!-- 
@import url("CSS/mystyle.CSS"); 
--> 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<HTML xmlns="http://www.w3.org/1999/xhtml" XML:lang="en" lang="en"> 
<head> 
<title>.:: Title ::.</title> 
<meta http-equiv="Content-Type" content="text/HTML; charset=iso-8859-9"> 
<meta http-equiv="Content-Type" content="text/HTML; charset=windows-1254"> 
<meta http-equiv="content-language" content="TR"> 
<meta name="author" content="xxK -xx@yy.com"> 
<link rel="stylesheet" type="text/CSS" href="soykan.CSS" media="screen" /> 
</head 
<body> 
<div id="main"> 
<div id="top"><!-- #include file ="top.ASP"--></div> 
<div id="top2">menu</div> 
<div id="left"><!-- #include file ="left.ASP"--></div> 
<div id="middle"><!-- #include file ="middle.ASP"--></div> 
<!--<div id="right">right</div>--> 
<div id="footer"><div class="kagitkose"><div class="innerdiv"><!-- #include file ="footer.ASP"--></div> 
</div> 
<div id="reklamalani"></div> 
</body> 
</HTML>

mystyle.CSS kodlarınız.

Kod:

/*CSS kodlari*/ 
HTML,body 
{ 
margin-top:0px; 
margin-left:0px; 
margin-right:0px; 
margin-bottom:0px; 
background : url('images/back02.jpg'); 
/*background-repeat:repeat-x;*/ 
/*background-position:left;*/ 
 /*background-color:#bde7ff;*/ 
font-family:tahoma,Verdana, Arial, Helvetica, sans-serif; 
font-size:10px; 
height:100%; 
overflow:auto; 
} 

#main   { width:800px; 
margin:0; /*auto ortalar*/ 
text-align:left; 
/*border:1px solid;*/ 
/*border-right-style:solid;*/ 
/*border-bottom-style:solid;*/ 
height:auto; 
background-color:white; 
} 

#top 
{width:798px; 
height:238px; 
float:left; 
background-color:white; 
padding:1px; 
border:0px aqua solid; 
} 

#top2 
{width:798px; 
height:25px; 
float:left; 
background-color:white; 
padding:1px; 
border:0px aqua solid; 
/*background: url('images/iletisim_back.gif') ;*/ 
font-family:tahoma,Verdana, Arial, Helvetica, sans-serif; 
font-size:11px; 
font-style:normal; 
} 

#left { width:210px; 
height:510px; 
margin-left:0px; 
display:block; 
float:left; 
background-color:white; 
padding:0px; 
border:0px solid #CCCCCC; 
font-family:tahoma,Verdana, Arial, Helvetica, sans-serif; 
font-size:10px; 
border-right-style:dotted; 
} 

#middle { width:590px; 
height:510px; 
margin-left:0px; 
display:block; 
float:left; 
background-color:white; 
padding:0px; 
border:0px solid #CCCCCC; 
font-family:tahoma,Verdana, Arial, Helvetica, sans-serif; 
font-size:11px; 
} 

#right { width:199px; 
height:417px; 
margin-left:0px; 
display:block; 
float:left; 
background-color:white; 
padding:0px; 
border:0px aqua solid; 
font-family:tahoma,Verdana, Arial, Helvetica, sans-serif; 
font-size:10px; 
} 

#footer {width:798px; 
height:60px; 
background-color:#ffffff; 
padding:1px; 
margin-bottom:0px; 
border:0px solid #CCCCCC; 
float:left; 
/*background: url('images/footer_image.jpg') ;*/ 
font-family:tahoma,Verdana, Arial, Helvetica, sans-serif; 
font-size:10.5px; 
font-style:normal; 
font-weight:lighter; 
text-shadow:Black; 
text-align:center; 
clear:both; 
} 

#reklamalani { 
   display:block; 
   position:fixed; 
   left:801px; 
   top:0px; 
   height:550px; 
   width:100px; 
   border:0px solid #CCCCCC; 
   background:url('images/test.jpg') no-repeat #ffffff; 
} 
* HTML #reklamalani {position:absolute;} 

#reklamalani span { 
   display:none; 
} 

.kagitkose{ 
border: 0px solid #CCCCCC; 
margin-bottom: 1em; 
width: 798px; 
} 

.kagitkose .innerdiv{ 
background: transparent url(images/footer_sag_kose.jpg) bottom right no-repeat; 
position: relative; 
left: 2px; 
top: 2px; 
padding: 1px 4px 15px 5px; 
} 

a:link 
{ 
   color: #B32E33; 
   text-decoration:none; 
   text-align:left; 
} 

a:visited 
{ 
   color: #B32E33; 
   text-decoration:none; 
   text-align:left; 
} 

a:hover ,a:active 
{ 
   color: #ff0000; 
   font-weight:bolder; 
}

kolay gelsin

imalone · 15.10.2007

ewet arkadaşlar çözümü buldum. drony cevabın için teşekkürler.

çözüm backround : fixed 'da saklı.

CSS olarak:

<head>...</head> arasına.

Kod:

<style>
#wallPaper {
	position: absolute;
	top: 0px;
	left: 770px;
	width: 60px;
	height: 60px;
	cursor: pointer;
}

</style>
<style>
body {background: url(arkaplan_resim.jpg) no-repeat fixed};
</style>

daha sonra genelde sayfanın sonunda;
</body>' den önce;

reklam div' inizi yerleştrin.

Kod:

 
<div style="width: 493px; height: 3025px; top: 0pt;" id="wallPaper" onClick="window.open('http://www.siteadi.com/', 'siteniz_wallpaper', '');" ></div>
<div id="beacon_134" style="position: absolute; left: 0px; top: 0px; visibility: hidden;">
</div>

kolay gelsin.

13.10.2007	#1 (permalink)
imalone Üyelik Tarihi: 20.09.2007 Yer: istanbul Yaş: 24 Mesaj: 33	sağda sabit duran reklam bazi haber sitelerinde mouse ile sayfada asagiya ilerlemeye ragmen, sagda (mesela haber7 de) sabit kalan bir reklam oluyor. bizim sitemiz ise www.habersaati.com . bizim sitedede ayni sekilde calisiyor. fakat dikkat ederseniz titriyor. bunu sanirim j.script ile yapiyorlar. titremeden sabit sekilde bunu yapmak istiyoruz. acaba bu konuda yardimci olabilirmisiniz.

14.10.2007	#3 (permalink)
erturkerdal Üyelik Tarihi: 23.08.2007 Yer: Bilecik Yaş: 21 Mesaj: 113	Re: sağda sabit duran reklam CSS ile böyle bir şey mümkün mü? __________________ Damacana.org

14.10.2007	#4 (permalink)
BYK Üyelik Tarihi: 08.04.2003 Yer: Ankara Yaş: 20 Mesaj: 689 Görsel: 8	Re: sağda sabit duran reklam CSS'de "position:static" özelliğiyle yapılabilir diye tahmin ediyorum ancak detaylı çalışmalara girmedim. Ve yapılabildiği takdirde CSS ile yapılması çok daha verimli bir sistem olur, hatırlatma için teşekkürler __________________ Hayata gülümse! Fotoğraf Sergim - www.fototonik.com/madbyk@gmail.com/Denemeler

Sponsorlu Bağlantılar
Zoque.Forum Reklam