אתה לא יכול להתאים לכל הרזולוציות במידה ועיצוב האתר הוא fixed width (ולרוב זה המקרה).
פשוט תמקם הקוד של הבאנר מיד אחרי ה-body, ותמקם אותו אבסולוטית במיקום שאתה מעוניין (top/bottom, right/left) ותן לו z-Index הגדול ביותר (תלוי אם יש ילדים ישירים אחרים של ה-body שיש להם z-Index, אם לא אז פשוט תו לו 1).
אבל באמצעות JS אתה צריך לוודא שיש מספיק מקום עבורו כדי שלא יצא לך מצב כמו
באתר שבדוגמה שהבאת.
לפעמים פשוט תצטרך להסתיר את הבאנר אם אין לך מספיק מקום. במקרים אחרים תוכל ליישר את כל האתר לצד אחד (במקום יישור ממורכז שמשתמשים בו לרוב) ובצד השני למקם את הבאנר.
לפני זמן מה מימשתי את זה (מיקום הפרסומת לפי שטח פנוי) לאתר של לקוח.
זו דוגמה AS IS מהאתר. זה יכול להיות בסיס טוב עבורך:
*משתמש ב-jQuery
קוד:
function PositionSideAd(){
with ({ Page:$('#User > .Holder').add('#Header').add('#Content').add('#Footer'), SideAd:$('#SideAd') }){
var $body = $('body');
var PageWidth = Page.width();
var SideAdWidth = SideAd.width();
var BodyWidth = $body.width();
if (SideAdWidth+PageWidth>BodyWidth) SideAd.hide();
else {
var SideAdRight = PageLeft = 0;
var SideWidth = (BodyWidth-PageWidth)/2;
if (SideWidth>SideAdWidth) SideAdRight = (SideWidth-SideAdWidth)/2;
else PageLeft = SideWidth-SideAdWidth-5;
Page.css('left',PageLeft+'px');
SideAd.css('right',SideAdRight+'px');
}
};
}