(หน้าเพจนี้ใช้ 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. 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 & 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 ได้)
ถ้าท่านดูหน้านี้ใน 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' จะถูกใช้แทนที่และเมนูจะปรากฏตรึงอยู่กับที่เมื่อท่านเลื่อนหน้าจอ
ท่านต้องจำไว้ว่าห้ามมีช่องว่างรอบ '>'.