เว็บสไตล์ชีท
CSS ทิป & ทริค

หมายเหตุ เอกสารฉบับนี้เป็นเอกสารแปลจากต้นฉบับภาษาอังกฤษอาจมีข้อบกพร่องหรือไม่ทันสมัย
เอกสารต้นฉบับเป็นของ W3C และถือเป็นเอกสารอย่างเป็นทางการ ท่านสามารถอ่านประกอบเพื่อความถูกต้อง
Original Document A pinned-down menu

(หน้าเพจนี้ใช้ CSS style sheets)

เมนูเลื่อนตามหน้าจอ

เมนูที่ท่านเห็นมุมขวาด้านบนในหน้านี้ ทำได้ง่ายๆโดยอาศัยไสตล์ชีท โดยใช้โค้ดดังนี้:

<div class="banner">
<p>
<a href="../../../"><img alt="W3C" src="../../../Icons/w3c_home"></a>
<a href="../../../Consortium/Activities">Activities</a>
<a href="../../../TR/">Tech.&nbsp;reports</a>
<a href="../../../Help/siteindex">Site index</a>
<a href="../../../Consortium/Translation/">Translations</a>
<a href="../../../Status">Software</a>
<a href="http://search.w3.org/">Search</a>
<em>เนื้อหาเกี่ยวข้อง:</em>
<a href="../../">Style</a>
<a href="../../CSS/">CSS</a>
<a href="./">tips&nbsp;&amp;&nbsp;tricks</a>
</div>

กรณี browser ไม่สนับสนุน CSS หรือ ปิดการใช้งาน CSS เมนูดังดล่าวจะปรากฏเป็น ย่อหน้าธรรมดา โดยจะลอยอยู่ด้านบนหน้าเพจ ตรึงอยู่ส่วนบนขวาของหน้าจอ โค้ดทีใช้คือ:

div.banner {
  margin: 0;
  font-size: 80% /*smaller*/;
  font-weight: bold;
  line-height: 1.1;
  text-align: center;
  position: fixed;
  top: 2em;
  left: auto;
  width: 8.5em;
  right: 2em;
}
div.banner p {
  margin: 0; 
  padding: 0.3em 0.4em;
  font-family: Arial, sans-serif;
  background: #900;
  border: thin outset #900;
  color: white;
}

div.banner a, div.banner em { display: block; margin: 0 0.5em }
div.banner a, div.banner em { border-top: 2px groove #900 }
div.banner a:first-child { border-top: none }
div.banner em { color: #CFC }

div.banner a:link { text-decoration: none; color: white }
div.banner a:visited { text-decoration: none; color: #CCC }
div.banner a:hover { background: black; color: white }

จะเห้นว่าโค้ดดังกล่าวมีส่วน 'position: fixed' ที่ทำให้ DIV ตรึงอยู่กับที่บนหน้าจอ และ 'display: block' ในการทำให้ A elements ภายใน DIV กลายเป็น block elements ซึ่งทำให้ลิ้งแต่ละตัวเรียงกันลงมาทีละลิ้ง แทนที่จะเรียงต่อกันเป็นแถวเดียว

สำหรับโค้ดสามแถวสุดท้าย เป็นการระบุค่าเกี่ยวกับลิ้ง โดยเราต้องการให้สีของลิ้งเปลี่ยนไปเมื่อวางเมาส์ไว้เหนือ ดังนั้นจึงใช้ :hover

ซึ่งต้องอยู่บรรทัดสุดท้าย

ส่วนค่าที่เหลือ margins, borders, colors และอื่นๆ ท่านสามารถเอาออก หรือปรับเปลี่ยนตามใจชอบ อย่างไรก็ตามจากตัวอย่างท่านอาจจะเห็นว่าลิ้งแต่ละอัน จะมีขอบอยู่เหนือลิ้งทุกอัน ยกเว้นลิ้งแรก ซึ่งเราใช้ ':first-child' โดยใช้ร่วมกันระหว่าง (border-top ในทุก elements และ a border 'none' บน first child) ซึ่งสะดวกในการสร้างขอบระหว่าง elements.

(ถ้าท่านดู style sheets ซึ่งใช้ในหน้านี้ banner-k.css และ banner.css ท่านจะเห็นเห็นโค้ดเพิ่มเติมที่ขัดกับโค้ดอื่น ซึ่งไว้ใช้แก้บั๊กใน browser รุ่นเก่า โดยเฉพาะในไฟล์ banner-o.css บรรทัด banner จะถูกซ่อนไว้และในไฟล์ banner.css จะแสดงเป็น block ซึ่งจะช่วยซ่อนโค้ด banner จาก Netscape 4 ที่ไม่สามารถสนับสนุน @import ของ css ได้)

FAQ: IE 5 & 6 บนวินโดว์?

 

ถ้าท่านดูหน้านี้ใน IE 5 หรือ 6 บนวินโดว์ จะพบว่าเมนู CSS ที่ทำไว้ไม่ทำงาน (อย่างน้อยในเวอร์ชั่น 2002) มีหลายคนถามเข้ามาว่าเพราะอะไร เราจะอธิบายให้ท่านเข้าใจดังนี้ อาการนั้นเกิดจากบั๊กที่เกิดจาก browser นั่นเอง

 

IE5 และ IE6 ไม่สามารถใช้เข้าใจคำสั่ง 'fixed' และที่แย่อีกอย่างคือทั้งสอง browser ยังไม่สามารถแสดงผล property 'position' ได้ถูกต้องอีกด้วย สำหรับกรณีนี้ เราควรแก้โดยใส่ค่าให้ 'position' ใน style sheet โดยเพิ่ม 'position: absolute' ก่อน 'fixed' เพื่อให้ browser ใช้แทน แต่ใน IE 5 และ 6 สิ่งที่เกิดขึ้นเมื่อมีคำสั่ง 'fixed' จะถูกตีความเป็น 'static'.

ท่านไม่สามารถทำให้ IE5 และ 6 รองรับ 'fixed' ได้ แต่มีความพยายามที่จะแก้ไขปัญหาดังกล่าว โดย Johannes Koch ได้แจ้งผมเรื่องการใช้ทริคต่อไปนี้ในการแก้ไข (จาก รวบรวมการแก้ไขการใช้งาน CSS). แรกสุดแทน 'position: fixed' ใน style โดยใช้ 'position: absolute' และใส่ไว้ด้านล่าง styleนั้น:

body>div.banner {position: fixed}

(ถ้า DIV.banner อยู่ใน element อื่นนอกจาก BODY ให้แทน BODY ด้วย element นั้น) ซึ่งจะทำให้ browsers ที่เข้าใจ '>' (child) selector ของ CSS ใช้คำสั่งนี้ แต่ browsers ที่ไม่รู้จัก ดดยเฉพาะ IE5 และ IE6 จะไม่ใช้งานคำสั่งนี้ คำสั่ง 'position: absolute' จะถูกใช้แทนที่และเมนูจะปรากฏตรึงอยู่กับที่เมื่อท่านเลื่อนหน้าจอ

ท่านต้องจำไว้ว่าห้ามมีช่องว่างรอบ '>'.

CSS Valid CSS!Valid HTML 4.0!

Bert Bos
เขียนวันที่ 17 มกราคม 2001;
ปรับปรุงล่าสุด $วันที่: 2009/03/03 12:46:42 $ GMT