Home › Forums › Questions ›

สงสัยหน่วย em และการจัดแถบ Primary ครับ

ลองค้นไปค้นมาใน Firebug แล้วเจอหน่วยที่เขียนว่า em ว่า แต่ไม่เข้าใจหลักการของเค้าว่าเป็นไหนและหมายความว่าอะไร em = element ?? (เดาเอา)

ส่วนแถบ Primary ของผมนี่ไม่จบไม่สิ้นซะที - -"
ผมลองสร้าง Primary Links แล้วขึ้นมาสองอัน
แต่ทีนี้ปุ่มเจ้ากรรมดันติดชิดซ้ายของหน้าต่าง ผมเลยแก้ปัญหาต้องการ Magin-Left แล้วเอาซึ่งมันก็ได้ผล
แต่พอลองขยับลด-ขยายหน้าต่าง Browser ดูปรากฏว่า ปุ่มเจ้ากรรมดันอยู่ตำแหน่งเดิมนิ่งสนิท
เลยคิดว่าน่าจะเป็นเพราะผมทำผิดวิธีมากกว่าครับ - -

in
27 May 09
kok บอกว่า

ตัว em เป็นหน่วยนึงเอาไว้สำหรับขยายเป็นจำนวนเท่าของขนาดตัวหนังสือเดิมที่ใช้อยู่ใน element นั้น ๆ นะ

เช่น ถ้า element นั้นใช้ font 14px อยู่ แล้วเราไปใส่

font-size: 2em;

ตามเข้าไป จะได้ขนาด font ที่ 28px หรือว่า 2 เท่าของขนาดเดิมครับ
อ่านเพิ่มเติมเรื่องหน่วยได้ที่นี่นะ w3schools.com : css units

เรื่อง primary links มิกลองใช้ margin เป็น % ดูครับ เช่น

margin-left: 15%;

แบบนี้เขาจะปรับขนาดตามหน้าต่าง browser เราน่ะ แต่อาจจะไม่เป๊ะนะ ส่วนวิธีที่ทำให้อยู่ตรงกลางจริง ๆ เลยผมยังหาไม่ได้เหมือนกัน =) เพราะใช้เป็น % เอาเหมือนกันครับ

#1
27 May 09
Mixmerize บอกว่า

ลองทำ Margin แบบค่าเป็นเปอร์เซนต์ผ่าน Firebug แล้วแต่ก็ยังไม่เวิร์คเหมือนเคยครับ
ช่วยแวะเข้าไปดูแล้วแนะนำหน่อยนะครับว่ามิกควรจะใช้โค้ดตัวไหนจัดการ Primary Link ดี :D

#2
27 May 09
kok บอกว่า

แบบนี้นะครับ ผมเจอวิธีแล้ว

มิกต้องกำหนดขนาดกว้างของแถบ primary ก่อนนะครับ ที่ผมลองดูคือประมาณ 855px กำลังดี (น่าจะเท่ากับบริเวณเนื้อหาตอนกลางของหน้าเวปมิก)ด้วย property นี้

#primary
{
  width: 855px;
}

แล้วจากนั้นสั่งให้เขาอยู่ตรงกลางด้วยการเพิ่ม property นี้เข้าไป

display: block;
margin: auto;

รวมกันจะเป็นแบบนี้นะครับ

#primary
{
  width: 855px;
  display: block;
  margin: auto;
}

note : ตัว display: block; กับ margin: auto; นี้ส่วนใหญ่จะใช้คู่กันเพื่อเอาไปกำหนด element ให้อยู่ตรงกลางหน้านะครับ ใช้กับอะไรก็ได้นอกจากเมนูตรงนี้นะ =)

#3

Post new comment

The content of this field is kept private and will not be shown publicly.
  • You can use Markdown syntax to format and style the text. Also see Markdown Extra for tables, footnotes, and more.
  • Allowed HTML tags: <embed> <div> <p> <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <br> <img> <hr> <h1> <h2> <h3> <h4> <blockquote> <quote> <pre> <th> <tr> <td> <table> <thead> <tbody>
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.

More information about formatting options

CAPTCHA
กรอกตัวหนังสือที่เห็นนี้ให้ถูกต้องนะครับ (มีไว้กัน spam)
Image CAPTCHA
Enter the characters shown in the image.