S i X h E a D { ? } » css http://sixhead.com เมื่อความรู้มีไว้แบ่งปัน Mon, 27 Feb 2012 06:23:10 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 css background อยู่กลางจอเสมอ http://sixhead.com/2010/01/15/css-background-center-top/ http://sixhead.com/2010/01/15/css-background-center-top/#comments Fri, 15 Jan 2010 07:14:24 +0000 Pipo http://sixhead.com/?p=538   <style> body { background:#000000 url(images/bg_home.jpg) no-repeat center top; } </style>  

]]> http://sixhead.com/2010/01/15/css-background-center-top/feed/ 0 View Source Chart : ดู source code จาก FireFox แบบวิจิตรเทพ http://sixhead.com/2009/02/19/view-source-chart-the-most-accessible-dom-inspector/ http://sixhead.com/2009/02/19/view-source-chart-the-most-accessible-dom-inspector/#comments Thu, 19 Feb 2009 14:13:01 +0000 Pipo http://sixhead.com/?p=337 view-source-chart

Add-ons  FireFox ตัวโปรดอีกตัวนึงของผมเลยครับ หลังจากไม่ได้ใช้มานาน เพราะ upgrade FireFox เป็น v3 แล้วตัว add-ons มันไม่ support วันนี้นึกขึ้นได้ลองไป search ดูอีกครั้งปรากฏว่ามี experimental version ที่ใช้งานกับ FireFox 3 ได้แล้ว เลยรีบโหลดทันที ความสามารถของมันคือเอาไว้ view source code หน้า html ครับแต่ข้อดีสุดๆ ของมันก็คือ

มันจะอ่าน html ออกมาในลักษณะ ของ DOM แสดงออกมาเป็น block แยกสีอย่างชัดเจนดูได้ง่าย และที่สุดยอดสุดๆ คืออะไรรู้ไหมครับ ถ้าคุณทำงานที่เกี่ยวข้องกับ ajax บ่อยหรือพวกสั่ง javascript write content เนี่ยะมันจะ view ออกมาให้เห็นพวก html ที่เราสั่ง write ออกมาให้ด้วยเลย (ใน Web Developer extension ก็ทำได้แต่ก็ไม่สวยเท่าตัวนี้) เทียบกับสมัยเขียนโปรแกรมยุคแรกๆ คุณคิดดูใช้ IE + Notepad หรือ ขนาดใช้ EditPlus ก็เหอะ debug งานแต่ละทีเสียเวลามาก ยุคนี้มี tool ช่วยเยอะทำให้งานหลายอย่างเสร็จได้เร็ว อย่าเสียเวลาไปลงซะเดี๋ยวนี้เลย download ได้ที่นี่

]]> http://sixhead.com/2009/02/19/view-source-chart-the-most-accessible-dom-inspector/feed/ 4 ยกเลิกไม่ให้ DreamWeaver สร้าง CSS ให้อัตโนมัติ http://sixhead.com/2008/09/16/dreamweaver-no-css-instead/ http://sixhead.com/2008/09/16/dreamweaver-no-css-instead/#comments Tue, 16 Sep 2008 11:16:13 +0000 Pipo http://sixhead.com/?p=149 ด้วยความที่ DreamWeaver พยายามทำตัวฉลาด เป็น Tool ที่แสนดี เสนอตัวใส่ CSS ให้แหลกลาน มันทำให้งาน CSS หรือทำเวปนี่เละเทะไปเลยเพราะ สร้าง style กันเต็มพรืดไปหมด และจะมีปัญหาตอนทำ program ส่งเมล์แบบ html อีกด้วย เนื่องจาก mail client หรือเวปเมล์ บางตัวไม่อ่าน CSS

ถ้า view แบบ Code เห็นแบบนี้แสดงว่าโดนความฉลาดเข้าซะแล้ว

หรือ click ที่ text แล้วดูตรง Properties แล้วเห็นแบบนี้ก็โดนความฉลาดของ dream เข้าแล้วเหมือนกัน

วิธีแก้ก็ต้องไปยกเลิกโดยเข้าที่เมนู Edit -> Preferences แล้วเลือกตามนี้ (รูปนี้เป็น DreamWeaver 2004 version อื่นๆ ก็จะคล้ายๆ กัน)

]]> http://sixhead.com/2008/09/16/dreamweaver-no-css-instead/feed/ 0 เปลี่ยน mouse cursor ใน เวปเพจได้ง่ายๆ ด้วย css http://sixhead.com/2008/03/03/custom-mouse-cursor-with-css/ http://sixhead.com/2008/03/03/custom-mouse-cursor-with-css/#comments Sun, 02 Mar 2008 17:03:57 +0000 Pipo http://sixhead.com/2008/03/03/custom-mouse-cursor-with-css/ ในบางครั้ง mouse cursor เดิมๆ ที่ติดมากับ browser อาจจะน่าเบื่อเกินไป หรือบางเวปต้องการความสวยงาม อยากมี mouse cursor เป็นรูปที่ตัวเองชอบ ด้วยขั้นตอนดังต่อไปนี้ ทำให้เราสามารถที่จะทำการเปลี่ยน mouse cursor เป็นแบบที่ต้องการได้ี้

มาดูตัวอย่างจากของจริงกันเลย คลิกที่นี่
อธิบายการทำงานได้ดังนี้

 
body{
 cursor: url(miyuki.cur)
}

เป็นการสั่งให้หน้านี้มี mouse cursor เป็นไฟล์ ชื่อว่า miyuki.cur

 
<div style="cursor: help; width: 200px; height: 200px; background-color: rgb(204, 204, 204);">&nbsp;</div>
 

ส่วน div ด้านล่างแสดงให้ดูว่าเราสามารถเปลี่ยน mouse cursor ได้ใน div ใดๆ ก็ตามครับ โดยในตัวอย่างจะเป็น mouse cursor ที่มีอยู่แล้วเลยไม่ต้องระบุไฟล์ .cur

เป็นไงขั้นตอนง่ายๆ เลยใช่ไหมครับ .cur จริงๆ แล้วก็ใช้ โปรแกรมทำ icon (.ico) ทำได้เลย ในตัวอย่างผมใช้ไฟล์ .ico มา rename เป็น .cur ครับ สามารถนำมาใช้งานได้ทันที แต่ว่าน่าเสียดาย css เรื่อง mouse นี้ใช้ได้เฉพาะ IE เท่านั้นครับ

]]> http://sixhead.com/2008/03/03/custom-mouse-cursor-with-css/feed/ 0 div กับหน้าจอ กว้าง x ยาว เท่าไหร่ก็อยู่กลางหน้า http://sixhead.com/2008/02/13/css-div-center-screen/ http://sixhead.com/2008/02/13/css-div-center-screen/#comments Tue, 12 Feb 2008 18:00:48 +0000 Pipo http://sixhead.com/2008/02/13/css-div-center-screen/ Code ของคุณ ท่่านอื่นๆ ง่ายกว่าครับ ขอบคุณมา​ ณ ที่นี้ด้วย

scroll ลงไปดูล่างๆ

]]> http://sixhead.com/2008/02/13/css-div-center-screen/feed/ 15 link สวยด้วย css http://sixhead.com/2008/01/29/nice-link-with-css/ http://sixhead.com/2008/01/29/nice-link-with-css/#comments Tue, 29 Jan 2008 16:03:21 +0000 Pipo http://sixhead.com/2008/01/29/link-%e0%b8%aa%e0%b8%a7%e0%b8%a2%e0%b8%94%e0%b9%89%e0%b8%a7%e0%b8%a2-css/ เคยเห็น link ลักษณะนี้ไหม

ไม่มีอะไรยากเลย ใช้ css และ div เข้ามาช่วย ลองมาดูตัวอย่างกัน

ดูตัวอย่างที่นี่

  1.  
  2. <style media="screen" type="text/css">
  3. .SiXhEaD_Link { font: 12px Tahoma, Arial, sans-serif; padding: 10px 0; }
  4. .SiXhEaD_Link a { background: #F8FBFC; color: #069; text-decoration: none; padding: 2px 6px 3px 6px; border: 1px solid #E2EFF3; }
  5. .SiXhEaD_Link a:hover { border-color: #B7D7E1; }
  6. .SiXhEaD_Link font { font: 12px Tahoma, Arial, sans-serif; background: #F8FBFC; color: #CCCCCC; padding: 2px 6px 3px 6px; border: 1px solid #E2EFF3; }
  7. </style>
  8.  

จุดสังเกตุง่ายๆ ใน css ถ้า ขึ้นด้วย . คือชื่อ class แต่ถ้าขึ้นด้วย # คือ id ของ div หรือ span
- บรรทัดที่ 7 เริ่มกำหนด class ชื่อ SiXhEaD_Link
- บรรทัดที่ 8 ถ้าเป็น link
- บรรทัดที่ 9 ถ้าเป็น link และถูก mouse over
- บรรทัดที่ 10 tag font

 
<div class="SiXhEaD_Link" align="center">
<font>&laquo; First</font> <font>&#8249; Prev</font>
<a href="javascript:void(0);">1</a>
....
....
</div>
 

ทีนี้เราก็ใส่ div ครอบ link ทั้งหมดที่เราต้องการ และใส่ class="SiXhEaD_Link" เท่านั้นเป็นอันจบ

]]> http://sixhead.com/2008/01/29/nice-link-with-css/feed/ 2