สวัสดีครับ รบกวนเพื่อนที่เก่ง css ผมอยากติด banner ด้านขวาของเว็บ เวบผมกว้าง 1000px แต่อยากจะมี banner ด้านขวา คนเห็นจะเป็นคนที่จอใหญ่ ถ้าจอเล็กก็จะไม่เห็นครับ เหมือนตำแหน่งในรูปนะคับ
(http://www.demonstrationarea.co.uk/diagram_div.gif)
ผมได้ css มาตัวนึงด้านล่าง เกือบใช้งานได้ครับ แต่ว่าเวลาย่อหน้าจอหรือจอเล็กโฆษณา banner ด้านขวามันจะถูกพลักออกมาหน้าเวบนะคับ คืออยากให้มันค้างอยู่ตรงที่ระบบไว้นะคับ ถ้าคนจอเล็กก็จะไม่เห็น คนจอใหญ่ถึงจะเห็น banner ด้านขวา พอนึกออกปะคับ มีท่านใดแนะนำได้บ้างคับ ขอบคุณคับผม
ได้ตัวนี้มาคับ วางไว้ตรงไหนก็ได้
<div id="rightAd">
your ad code here
</div>
วางไว้ใน head
#rightAd {
position: absolute;
right: 20px;
top: 150px;
}
อันนี้สำหรับโปรเจคใหม่รึเปล่าครับ Piggazon Project ยังประทับใจอยู่เลยครับ ^^
Andi
อ้างถึงจาก: andiklin ใน 23 พฤษภาคม 2012, 00:45:55
อันนี้สำหรับโปรเจคใหม่รึเปล่าครับ Piggazon Project ยังประทับใจอยู่เลยครับ ^^
Andi
ดีคับคุณ Andi ป่าวครับอันนี้จะวาง banner ทั่วไปนะครับ แสดงว่าตอนนี้ pliggazon ที่พี่ไปใช้ยังดีอยู่หร๋อครับ เยี่ยมจริงๆเลยครับผม :wanwan020:
position:fixed
อ้างถึงจาก: daclubb ใน 23 พฤษภาคม 2012, 01:01:03
position:fixed
ขอบคุณครับ ลองใส่แล้ว แต่ไม่ได้อะครับ เวลาใส่แล้วย่อหน้าจอหรือจอเล็กกว่า มันจะบีบล้นเข้ามาในหน้าเวบนะคับ คืออยากให้มันอยู่ด้านนอกกรอบตลอดเวลานะคับ :P
ลอง copy code ทั้งหมดลงใน Dream ดูนะครับ
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ads</title>
<style>
.frame {
width:1000px;
height:800px;
background:#666;
position:relative;
margin:0 auto;
padding:0;
display:block;
overflow:hidden;
}
.adsleft {
width:125px;
height:600px;
background:#069;
position:absolute;
top:0;
left:-135px;
display:block;
overflow:hidden;
}
.adsright {
width:125px;
height:600px;
background:#C30;
position:absolute;
top:0;
left:1010px;
display:block;
overflow:hidden;
}
</style>
</head>
<body>
<div class="frame">
<div style="position:fixed;">
<div class="adsleft"></div>
<div class="adsright"></div>
</div>
</div>
</body>
</html>
ได้ผลยังไงบอกด้วยน้าาา :-[
ถ้าให้ง่ายสุดก็ใช้ js เช็คความกว้างของ window แล้วสั่ง ซ่อน ads ถ้าเล็กกว่าที่กำหนดครับ
ได้แล้วคับผม แต่ว่าต้องแก้นิดหน่อยอะคับ คือเอาของผมผสมกับของคุณ tummz คับ ขอบคุณมากๆนะคับเยี่ยมเลยคับ
ขอบคุณคุณ Positron อีกท่านด้วยคับที่แนะนำ :wanwan017:
#rightAd {
width:160px;
height:600px;
position:absolute;
top:155px;
left:1189px;
display:block;
overflow:hidden;
}
<div id="rightAd">
your code
</div>