S i X h E a D { ? } » css http://sixhead.com เมื่อความรู้มีไว้แบ่งปัน Tue, 23 Feb 2010 14:36:26 +0000 http://wordpress.org/?v=2.9.2 en hourly 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/ เรื่อง css ผมยังไม่ค่อยได้เรื่องได้ราวเท่าไหร่ แต่อยากได้ div ที่วางยังไงก็อยู่ตรงกลาง
แบบว่าวาง layout ด้วย table มันหมดยุคแล้ว (ไปนานแล้ว) แต่ผมเพิ่งรู้สึกตัว :(
พอดีไปเจอ css ชุดหนึ่งที่น่าจะเป็นประโยชน์อย่างมาก คือการจัดวางให้ content อยู่กลางหน้าจอ
ไม่พ้นที่ต้องเอามา share กัน มาดูกันเลย ง่ายสุดๆ

 
<div style="position: absolute; width: 1020px; height: 600px; left: 50%; margin-left: -510px; top: 50%; margin-top: -300px;">
ข้อมูลของเรา จะใส่ table ในนี้ก็ตามใจ อย่าไปกังวลไรมาก ทำงานให้ดูได้ก็จบ !
</div>
 

จาก code เรามาดูกันถึงรายละเอียด

width: 1020px;

คือความกว้างของ content ของเรา

height: 600px;

คือความสูงของ content ของเรา

ด้วยความต่างของ browser ที่ support มาตรฐานไม่ตรงกันเลยเกิด

left: 50%; margin-left: -510px;
top: 50%; margin-top: -300px;

พวก top: left: 50% ก็ง่ายๆ อยู่กลางจอ ส่วน
margin-left: และ margin-top: ต้องใช้เครื่องคิดเลขกันหน่อย

คือแบบว่าเขียนโปรแกรมนานไม่ค่อยได้บวกเลข
ก็เอา ความกว้าง 1020 / 2 และความสูง 600 / 2 ก็จะได้ค่าทั้ง 2 ตัว
ที่ต้องติดลบก็เพราะว่าวัดครึ่งจากตัวมัน แล้วติดด้านบน กับชิดซ้าย
ตามตัวเลขดังกล่าวนั่นเอง

code บรรทัดเดียว โม้ได้ยาว มันน่าภูมิใจจริงๆ

]]> http://sixhead.com/2008/02/13/css-div-center-screen/feed/ 7 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