เริ่มต้นกับ CSS

เริ่มต้นกับ CSS ขั้นพื้นฐาน

ทำกล่องขอบโค้งด้วย css

เรามาทำกล่องขอบโค้ง โดยใช้รูป มุมมน และเขียนแบบพื้นฐาน ด้วย html แบบ standards กัน ผมขอเสนอ วิธีที่เคยใช้ง่ายๆ 3 แบบด้วยกัน ลองนำไปใช้ ตามโอกาส

แบบที่ 1 ตัดรูป ขอบด้านบนและล่างมาแบบนี้

curve_top.gif = curve_top.gif

curve_bottom.gif = curve_bottom.gif

เขียน html ดังนี้

<div class=”curvetop”></div>
<ul>
<li>aaaa</li>
<li>bbbb</li>
<li>cccc</li>
</ul>
<div class=”curvebottom”></div>

เขียน css ดังนี้
<style type=”text/css”>
.curvetop {background:url(curve_top.gif) no-repeat; height:9px; font-size:1px}

.curvebottom {background:url(curve_bottom.gif) no-repeat; height:9px; font-size:1px}

ul {background:#8ACA80; margin:0; padding:0 10px 0 10px; list-style:none; width:157px}

li {border-bottom:1px #FFFFFF dashed}
</style>

ได้ผลดังนี้

curvebox1.gif

ไม่มีอะไรมาก ก็ใส่รูปที่ .curvetop และ .curvebottom แล้วก็ใส่สี ที่ ul ใส่ เส้นประที่ li ส่วนที่ว่าทำไมต้องใส่ font-size:1px อ่านอันนี้ประกอบ การจัดการกับความสูง และ อ่าน อันนี้ด้วยก็ได้ ถ้ายังไม่เข้าใจ ul li เรียนรู้การใช้ ul li step by step
Read more…

Related Articles

ค้นหาพัฒนาการแห่ง Layout

CSS Layout คือการจัดรูปหน้าเวปโดยการจัดวาง div และส่วนประกอบต่างๆของหน้าเวบนั้นๆ ให้อยู่ในจุดที่ต้องการ

การจัดตำแหน่งสามารถทำได้โดยการกำหนด position หรือการใช้เทคนิคการ float-clear

นอกจากนั้นยังต้องคำนึงถึง CSS Box Model ด้วย

Layout หลักๆในหนึ่งหน้า xhtml ที่มีความหมาย semantic (การเขียนหน้าเว็บตามความหมายของ tag) ที่ถูกต้องแก่การใช้งานได้แก่

  • header
  • navigation
  • content
  • footer

ซึ่งจากพื้นฐานนี้เราจะสามารถกำหนดรายละเอียดเพิ่มเติม ให้หน้าเว็บของเราต่อไปได้ว่า เราเลือกที่จะให้หน้าเว็บมีเนื้อหากี่ส่วนกี่คอลัมน์ คอลัมน์ไหนเป็นคอลัมน์หลักหรือคอลัมน์รอง เลือกที่จะมี navigation กี่ส่วนแบบไหน แล้วก็ควรจะตั้งชื่อ div ให้ตรงตามความหมายกับเนื้อหาทุกอย่างที่ใส่ไปด้วย การเพิ่ม div เข้าไปเพื่อจุดประสงค์ของการจัดรูปหน้าเพียงอย่างเดียว โดยไม่ได้เกี่ยวข้องกับเนื้อหาเป็นการประนีประนอมยอม แลกความถูกต้องทาง semantic(ความหมาย) กับการจัดรูปแบบเสมอ

เราควรใช้ div ที่มีจุดประสงค์เพื่อการจัดรูปหน้าอย่างเดียวให้น้อยที่สุด เท่าที่จะทำได้เพื่อรักษาความถูกต้องทาง semantic(ความหมาย) ไว้ให้ได้มากที่สุดเพื่อผลประโยชน์ทาง SEO ไม่ได้หมายความว่าเราควรหลีกเลี่ยงการใช้ div โดยสิ้นเชิง แค่ควรหลีกเลี่ยงการใช้ div ที่ไม่มีความหมายทาง semantic เท่านั้น
Read more…

Related Articles

การจัดการกับความสูง

สำหรับคนที่ได้ลองเขียน css ด้วยตัวเองมาบ้างแล้ว ก็คงพอจะทราบว่า แท้จริงแล้ว หน้าเว็บก็ไม่ได้มีอะไรมากไปกว่าการทำกล่องและใส่ margin padding ซึ่งก็คือ การจัดตำแหน่งการแสดงผลของหน้าเว็บเพจ โดยใช้โค้ดที่แยกออกจากส่วน โครงสร้าง HTML เท่านั้นเอง แต่ภายใต้การกระทำที่แสนจะพื้นฐาน กลับมีเทคนิคมากมาย เพราะเบราเซอร์ที่มีในโลกนี้ ไม่ได้ทำงานไปในทิศทางเดียวกัน หากเขียน css ให้เว็บเพจดูได้สมบูรณ์ที่ เบราเซอร์เดียวแล้วละก็ เราจะไม่ต้องมีเทคนิคอะไรเลยก็ทำได้ง่ายแสนง่าย? ดังนั้นเมื่อเริ่มเขียน css สิ่งที่ควรจะระลึกไว้เสมอคือ?ถ้าต้องการให้เว็บดูได้สมบูรณ์ที่ หลายๆเบราเซอร์ อย่าใช้โค้ดใหม่ (css2 , css3) หรือโค้ดเทพต่างๆให้มากนัก เพราะคุณจะประสบปัญหาการแสดงผลอย่างแน่นอน แล้วจะต้องมานั่ง hack กันให้เสียเวลา??พยายาม keep simple เข้าไว้ หรือถ้าคุณไม่แคร์ และคิดว่า จะให้เว็บดูสุดยอดที่ firefox เท่านั้น นั่นก็อีกเรื่อง ใส่กันเข้าไปให้เต็มที่ ตามใจอยาก

เข้าเรื่องที่จะพูดถึงกัน เว็บเพจโดยทั่วไปแล้ว มักจะถูกกำหนดความกว้าง (width) เป็นค่าอย่างใดอย่างหนึ่ง อาจเป็น pixel หรือ เปอร์เซ็นต์ เพราะเราไม่ต้องการให้มีการยืดที่ด้านข้าง แต่เว็บเราเลื่อนลงข้างล่าง ความสูง(height) จึงมักจะเป็นตัวแปรตาม คือไม่กำหนดค่า แล้วแต่ว่า เนื้อหาภายในมีมากน้อยเพียงใด เรามาดูว่า ปัญหาของค่า height นั้นมีอะไรบ้าง

Read more…

Related Articles

จัดตำแหน่งด้วย position

property? position เป็นอีกตัวหนึ่งที่เราจะใช้กำหนดตำแหน่ง layout แต่ จะสามารถ กำหนด ได้ละเอียดกว่า การใช้ float?เพราะเมื่อเรากำหนด position แล้ว สิ่งที่จะต้องกำหนดตามมาก็คือค่า left, right, top ,bottom ?มาดูกันว่ามีอะไรบ้างและใช้อย่างไร

1. position:static

เป็น default ของ position ถ้าไม่ใส่อะไร ก็จะถือว่า มีค่าเป็น static? ก็คือไม่มี position น่ะแหละ??พูดตามตรงไม่เคยใช้เลยตัวนี้? แต่มันมีก็เลยต้องอธิบายว่ามันคืออะไร ;)

2. position:fixed

เอาไว้ fixd ให้ อยู่ตรงไหนก็ได้ของ เบราเซอร์ โดยใส่ค่า left, right, top ,bottom หากใส่ ค่า left:10px; top:100px วัตถุที่ถูกกำนดก็จะ อยู่ถัดจากขอบเบราเซอร์ด้านซ้าย 10px? ถัดจากด้านบนลงมา 100 px ข้อดีคือ เมื่อเราเลื่อน Scroll bar ลงมา มันก็จะยังคงอยู่ตรงตำแหน่งนั้นไม่หายไปไหน มันตามเรามาทุกที่?ว่าง่ายๆ แต่? property นี้ ใช้ได้กับ เบราเซอร์ใหม่ๆ อย่าง IE7, Firefox2.0 (1.5 ไม่ได้ลอง)? ส่วน IE6 ไม่เกิดผลใดๆ ดังนั้น ยังไม่ควรนำมาใช้ครับ [-x

Read more…

Related Articles