# ช่วยด้วยคับ เกี่ยวกับ CSS อยากติด banner ด้านขวาแบบ fix นะครับ

เริ่มโดย น้องบิ้ว, 23 พฤษภาคม 2012, 00:42:47

หัวข้อก่อนหน้า - หัวข้อถัดไป

0 สมาชิก และ 1 ผู้มาเยือน กำลังดูหัวข้อนี้

พิมพ์
ลง หน้า1
การกระทำของผู้ใช้

น้องบิ้ว

23 พฤษภาคม 2012, 00:42:47
สวัสดีครับ รบกวนเพื่อนที่เก่ง css ผมอยากติด banner ด้านขวาของเว็บ เวบผมกว้าง 1000px แต่อยากจะมี banner ด้านขวา คนเห็นจะเป็นคนที่จอใหญ่ ถ้าจอเล็กก็จะไม่เห็นครับ เหมือนตำแหน่งในรูปนะคับ


ผมได้ css มาตัวนึงด้านล่าง เกือบใช้งานได้ครับ แต่ว่าเวลาย่อหน้าจอหรือจอเล็กโฆษณา banner ด้านขวามันจะถูกพลักออกมาหน้าเวบนะคับ คืออยากให้มันค้างอยู่ตรงที่ระบบไว้นะคับ ถ้าคนจอเล็กก็จะไม่เห็น คนจอใหญ่ถึงจะเห็น banner ด้านขวา พอนึกออกปะคับ มีท่านใดแนะนำได้บ้างคับ ขอบคุณคับผม

ได้ตัวนี้มาคับ วางไว้ตรงไหนก็ได้
<div id="rightAd">
your ad code here
</div>
วางไว้ใน head
#rightAd {
     position: absolute;
     right: 20px;
     top: 150px;
      }

andiklin

#1
23 พฤษภาคม 2012, 00:45:55
อันนี้สำหรับโปรเจคใหม่รึเปล่าครับ Piggazon Project ยังประทับใจอยู่เลยครับ ^^

Andi

น้องบิ้ว

#2
23 พฤษภาคม 2012, 00:48:50
อ้างถึงจาก: andiklin ใน 23 พฤษภาคม 2012, 00:45:55
อันนี้สำหรับโปรเจคใหม่รึเปล่าครับ Piggazon Project ยังประทับใจอยู่เลยครับ ^^

Andi

ดีคับคุณ Andi  ป่าวครับอันนี้จะวาง banner ทั่วไปนะครับ  แสดงว่าตอนนี้ pliggazon ที่พี่ไปใช้ยังดีอยู่หร๋อครับ เยี่ยมจริงๆเลยครับผม  :wanwan020:

น้องบิ้ว

#4
23 พฤษภาคม 2012, 01:10:08
อ้างถึงจาก: daclubb ใน 23 พฤษภาคม 2012, 01:01:03
position:fixed

ขอบคุณครับ ลองใส่แล้ว แต่ไม่ได้อะครับ เวลาใส่แล้วย่อหน้าจอหรือจอเล็กกว่า มันจะบีบล้นเข้ามาในหน้าเวบนะคับ คืออยากให้มันอยู่ด้านนอกกรอบตลอดเวลานะคับ  :P

TummZ

#5
23 พฤษภาคม 2012, 01:30:44
ลอง 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>

ได้ผลยังไงบอกด้วยน้าาา  :-[

Positron

#6
23 พฤษภาคม 2012, 01:33:26
ถ้าให้ง่ายสุดก็ใช้ js เช็คความกว้างของ window แล้วสั่ง ซ่อน ads ถ้าเล็กกว่าที่กำหนดครับ

น้องบิ้ว

#7
23 พฤษภาคม 2012, 02:07:41 แก้ไขล่าสุด: 23 พฤษภาคม 2012, 02:19:59 โดย น้องบิ้ว
ได้แล้วคับผม แต่ว่าต้องแก้นิดหน่อยอะคับ คือเอาของผมผสมกับของคุณ tummz คับ  ขอบคุณมากๆนะคับเยี่ยมเลยคับ
ขอบคุณคุณ Positron อีกท่านด้วยคับที่แนะนำ  :wanwan017:

โค้ด เลือก
#rightAd {
width:160px;
height:600px;
position:absolute;
top:155px;
left:1189px;
display:block;
overflow:hidden;
}

โค้ด เลือก
<div id="rightAd">
your code
</div>
พิมพ์
ขึ้น หน้า1
การกระทำของผู้ใช้