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

เมนูคอนเฟตติ

เมนูที่ท่านเห็นด้านล่างเกิดจากการใช้ อีเลเมนต DIV์ ร่วมกับ อีเลเมนต์ P เอฟเฟคท์ที่ท่านเห็นเกิดจากการที่แต่ละ อีเลเมนต์ P มีการใช้ font และสีที่ต่างกัน ซึ่งการทำเช่นนี้จะให้ผลดีกับข้อความสั้นๆ เพราะเอฟเฟคที่ได้เกิดจากการซ้อนทับกัน หากข้อความยาวไป การซ้อนกันจะทำให้ยากต่อการอ่าน

สไตล์ชีทที่ใช้ด้านบนนี้้มีการกำหนดอีเลเมนต์อยู่ 10 อีเลเมนต์ ตัวอย่างข้างบนมีการใช้อีเลเมนต์ เพียง 8 อีเลเมนต์ ซอร์ส HTML ของตัวอย่างด้านบนเป็นดังนี้:

<div class="map">
<p id="p1"><"../../CSS/#news">What's new?<>
<p id="p2"><"../../CSS/#learn">Learning CSS<>
<p id="p3"><"../../CSS/#browsers">CSS Browsers<>
<p id="p4"><"../../CSS/#editors">Authoring Tools<>
<p id="p10"><"../../CSS/#specs">Specs<>
<p id="p6"><"../../CSS/Test">CSS1 Test Suite<>
<p id="p9"><"/StyleSheets/Core">W3C Core Styles<>
<p id="p8"><"http://jigsaw.w3.org/css-validator/">CSS Validator<>
</div>

ในคลาส "map" ของอีเลเมนต์ DIV ซึ่งคลุมเมนูและ ID ของอีเลเมนต์ P จะมีค่า ID ที่ต่างกัน โดยในตัวอย่างตั้งให้เป็น p1, p2,... ถึง p10 และท่านไม่จำเป็นต้องตั้ง ID เรียงลำดับตามตัวเลข (ดังจะเห็นจากตัวอย่างข้างต้น) ท่านสามารถนำสไตล์ชีทข้างต้นไปใช้งานโดยก็อปปี้ไปวางที่สไตล์ชีืทของท่านโดยตรง หรืออาจใช้การ @import หรือ อีเลเมนต์ Link เพื่อเรียกใช้ map.css จากเว็บ W3C ได้ตามคำสั่งด้านล่าง

@import "http://www.w3.org/Style/map.css";

หรือ

<link rel="stylesheet" href="http://www.w3.org/Style/map.css">

คำอธิบายการทำงานของสไตล์ชีท

การทำงานของสไตล์ชีท กำหนดอีเลเมนต์ DIV ด้วยคลาส "map" ซึ่งมีความสูง 190 px ไว้รองรับอีเลเมนต์ P และกำหนดค่า font และ สี ให้ IDs p1 ถึง p10 โดยกำหนดตำแหน่งการวางในอีเลเมนต์ DIV ด้วยคำสั่ง margin โดยใ้ช้ค่าลบเพื่อเลื่อนอีเลมนต์ P ไว้บนสุดของ DIV และใช้ค่าบวกสำหรับ margin bottom เพื่อให้อีเลเมนต์ต่อไปเริ่มที่ส่วนล่างของ DIV

(ข้อเสียของสไตล์ชีทนี้ คือ ใช้หน่วยเป็น px ท่านสามารถเปลี่ยนมาใ้ช้หน่วยเปอร์เซนต์แทนได้ หากเบราเซอร์รองรับ CSS โดยสมบูรณ์)

DIV.map {                        /* เว้นพื้นที่ไว้ใส่ลิ้ง */
  padding-top: 190px;
  margin-left: -2em;             /* ปรับค่าใช้งานตามหน้าเพจ... */
  margin-right: -2em;            /* ปรับค่าใช้งานตามหน้าเพจ... */
  margin-bottom: 4em;
  margin-top: 5em;
  clear: both;
  text-shadow: 0.2em 0.2em /* 0.2em */ silver }

#p1, #p2, #p3, #p4, #p5, #p6, #p7, #p8, #p9, #p10 {
  white-space: nowrap }
#p1, #p2, #p3, #p4, #p5, #p6, #p7, #p8, #p9, #p10 {
  text-indent: 0 }
#p1 A, #p2 A, #p3 A, #p4 A, #p5 A, #p6 A, #p7 A, #p8 A, #p9 A, #p10 A {
  text-decoration: none }

#p1, #p1 A   {color: #DDD; font: 100px/1 Impact, Helvetica Narrow, sans-serif}
#p2, #p2 A   {color: #000; font: italic 40px/1 "Georgia", serif}
#p3, #p3 A   {color: #080; font: 40px/1 "Verdana", sans-serif}
#p4, #p4 A   {color: #37F; font: bold 40px/1 Courier New, Courier, monospace}
#p5, #p5 A   {color: #F73; font: bold 100px/1 "Verdana", sans-serif}
#p6, #p6 A   {color: #22A; font: bold 25px/1 "Verdana", sans-serif}
#p7, #p7 A   {color: #088; font: italic 80px/1 "Verdana", sans-serif}
#p8, #p8 A   {color: #088; font: italic 20px/1 "Verdana", sans-serif}
#p9, #p9 A   {color: #088; font: italic 20px/1 "Verdana", sans-serif}
#p10, #p10 A {color: #F73; font: bold 60px/1 "Verdana", sans-serif}

#p1  {text-align: right;  margin: -185px 0 85px 0}    /* top right */
#p2  {text-align: left;   margin: -190px 0 150px 5%}  /* top left */
#p3  {text-align: right;  margin: -90px 35% 50px 0}   /* center */
#p4  {text-align: right;  margin: -95px 0 55px 0}     /* center right */
#p5  {text-align: left;   margin: -130px 0 30px 0}    /* center left */
#p6  {text-align: left;   margin: -40px 0 15px 35%}   /* bottom center */
#p7  {text-align: right;  margin: -80px 0 0px 0}      /* bottom right */
#p8  {text-align: left;   margin: -40px 0 20px 3%}    /* bottom left */
#p9  {text-align: right;  margin: -25px 0 5px 0}      /* bottom right */
#p10 {text-align: left;   margin: -130px 0 70px 0}    /* center left */

 

ท่านอาจปรับเปลี่ยนฟอนท์ สีและตำแหน่งได้ตามต้องการ หรืออาจสร้างสไตล์มากกว่า 10 อีเลเมนต์ ในตัวอย่างนี้มีการกำหนด left, right margin ของ DIV เป็นลบ เพื่อให้เมนูกว้างกว่าบริเวณที่ล้อมรอบอยู่ หากหน้าเว็บท่านไม่กว้างพอ ท่านอาจปรับเปลี่ยนค่าหรือเอาบรรทัดดังกล่าวออกได้

สไตล์ชีทนี้อาจทำงานได้ไม่สมบูรณ์ใน Netscape 4 เนื่องจาก Nescape 4 ไม่รองรับบางฟังก์ชั่น แต่สามารถแก้ได้โดยใช้ map-ns.css แทนซึ่งให้ผลที่คล้ายกัน และสามารถทำงานได้ค่อนข้างดีกับ Netscape 4 โดยท่านต้องใส่โค้ดข้างล่างในส่วน head ของเอกสาร ซึ่งจะช่วยแก้ปัญหาเบราเซอร์รุ่นเก่าที่ไม่สามารถใช้งาน CSS รุ่นใหม่ได้ ขณะเดียวกันก็ช่วยให้เบราเซอร์ใหม่ที่รองรับไฟล์ CSS รุ่นใหม่ให้ทำงานได้เช่นเดียวกัน:

<link href="map-ns.css" rel="stylesheet" type="text/css">
<link href="map.css" rel="stylesheet" type="text/css" media="all">

เบราเซอร์ที่ทำงานได้ถูกต้องจะอ่านไฟล์ CSS ทั้งสองบรรทัด แต่จะใช้งานบรรทัดสองตามหลักการทำงาน CSS แต่ในเบราเซอร์รุ่นเก่าอย่าง Netscape 4 จะไม่ใช้บรรทัดสอง เพราะไม่เข้าใจคำสั่ง "media" ในบรรทัดที่สอง

ท่านอาจสงสัยว่าทำไมเราใช้คำสั่ง margin ในการกำหนดตำแหน่งอีเลเมนต์ แทนที่จะใช้คำสั่ง position แทน เหตุผลในที่นี้ก็เพื่อให้เบราเซอร์รุ่นเก่าที่รองรับแต่ CSS1 สามารถทำงานร่วมด้วยได้