ฟอนต์ฟอรั่ม

คิดอยู่นานละ ว่าทำงานด้านนี้ จะมาแลกเปลี่ยนความรู้เรื่องนี้กับคนอื่น

การเขียน css บางครั้ง เราน่าจะรู้ก่อนว่า สิ่งที่เราจะกำหนดลงไปนั้น มันจำเป็นหรือเปล่า

ซึ่งตอนแรก ๆ ที่เขียน css เป็นคนที่ชอบใส่

display:block;

บ่อยมาก แต่หลังจากมาอ่านบทความต่าง ๆ ทำให้ทราบว่า ที่เราใส่ลงไปบางครั้ง มันไม่จำเป็น

เนื่องจาก tag html บางตัวนั้น มีคุณลักษณะของมันเป็น block อยู่แล้ว

ซึ่งหลัก ๆ แล้ว จะมีสองแบบ คือ block และ inline

โดยความแตกต่างของมันก็คือ

block

- จะขึ้นแถวใหม่

- สามารถกำหนด height , width , line-height และพวก margin-top , margin-bottom ได้

- width (ความกว้าง) ของมัน จะเป็น 100% ที่มันจะสามารถกว้างได้

โดย tag html ที่มีค่าเป็น block อยู่แล้ว ก็จะมีพวก <div>, <p>, <h1>, <form>, <ul> แล้วก็ <li> เป็นต้น

มาดูทางฝั่ง inline บ้าง

inline

- จะเริ่มต้นแถวเดิม

- ไม่สามารถเปลี่ยนแปลง height , width , line-height และพวก margin-top , margin-bottom ได้

- width (ความกว้าง) ของมัน จะกว้างเท่ากับความยาวของตัวอักษร หรือภาพ

โดย tag html ที่มีค่าเป็น inline อยู่แล้ว ก็จะมีพวก <span>, <a>, <label>, <input>, <img>, แล้วก็ เป็นต้น

ทีนี้เรามาดูกันว่า เมื่อไหร่เราถึงจะเปลี่ยนจาก block เป็น inline หรือเปลี่ยนจาก inline เป็น block

- อยากให้ inline ขึ้นบรรทัดใหม่

- อยากให้ block อยู่บรรทัดเดิม

- ต้องการกำหนด width (ความกว้าง) height (ความสูง) ของ inline

- ต้องการกำหนดสี background แค่พอดีกับตัวอักษรให้กับ block ที่ไม่ได้กำหนดความกว้าง

ที่จริงการใส่

display:block;

ให้กับ tag html ที่เป็น block ก็ไม่ได้ทำให้ layout ของเราเสียหายแต่อย่างใด

แต่มันจะทำให้ file css มีขนาดใหญ่ขึ้นด้วยความไม่จำเป็นนะครับ  :25:

จะพยายามเขียนอย่างอื่นเพิ่มเติมอีก ถ้าไม่ขี้เกียจนะครับ หรือใครมีเรื่องไหนอยากให้เขียนก็บอกกันนะครับ

ถ้ารู้เรื่อง จะมาเขียนอธิบายให้ฟัง

:25: กรี๊ด จานบิ๊กปรากฏกายแล้ว

เอาอีกๆๆ :25:

วันนี้มาต่อกันด้วยเรื่องของ Box Model มาดูจากรูปเลยแล้วกัน ว่าแต่ละอย่างกำหนดอะไรบ้าง

(http://img3.f0nt.com/02/21f1a7db2681d2e364691747be0cc156.jpg)

แต่คราวนี้ IE6 Box Model จะไม่ได้คิดแบบนี้ โดยถ้าเป็นตามปรกติ

ถ้าเรากำหนดดังนี้


.box {
  width:150px;
  height:60px;
  padding:10px;
  border:5px solid #000000;
  margin:20px;
}


ก็จะได้ตามรูป โดย Box มีขนาด 170px   x   80px แล้วมีขนาด Box ให้ใส่ข้อความ 150px   x   60px

แต่ถ้าเป็น IE6 มันจะเห็นเป็นว่า เรามี Box ขนาด 150px   x   60px แล้วมีขนาด Box ให้ใส่ข้อความ 130px   x   40px

เนื่องจากปรกติ จะคิดว่า width และ height ที่เรากำหนด เป็นขนาด Box ที่เราจะใช้ใส่ข้อความ (ยังไม่รวม padding)

แต่ IE6 นั้น จะคิดว่า width และ height ที่เรากำหนด เป็นขนาด Box (รวม padding แล้ว)

ซึ่งวิธีแก้ก็มีอยู่หลายวิธี เช่น

- ถ้าสามารถเปลี่ยนไปใช้ margin ได้ให้ใช้ margin

- ใช้ div ซ้อน div เช่น


<div class="div1">
     <div class="div2">
     </div>
</div>



.div1 { width:150px; }
.div2 { padding:10px; }


โดยให้ div นึงกำหนดความกว้าง และอีก div นึงกำหนด padding

- CSS IE Hack

จบไปอีกเรื่องกับ Box Model  :56:

วิธีแก้ Box model bug อันลือชื่อของ IE6  :25:
แต่จริงๆ ตูว่า อย่าไปใช้ IE6 นั่นแหละจะดีที่สุด :3005:

เรื่อง padding นี่ต้องเลี่ยงเลย แม่งโหดมาก
ถ้าไม่นับเรื่องการตกแต่งความสวยงามแล้ว
ใช้ double div ไปเลยดีที่สุด :05:

CSS Editor ตัวไหนน่าใช้บ้างคัรบ
Top Style ใช้แล้วค้างบ่อยมาก อยากเปลี่ยนเป็นตัวอื่นแล้วครับ..

ตอนนี้ตูใช้ Programmer's Notepad (http://www.pnotepad.org/)
ซึ่งไม่ได้ใบ้อะไรเลย แต่แบบนี้แหละดีแล้ว :30:

ไม่ดี  :05:

อ้างคำพูดจาก: iannnnn เมื่อ 03 ก.พ. 2010, 08:37 น.
ตอนนี้ตูใช้ Programmer's Notepad (http://www.pnotepad.org/)
ซึ่งไม่ได้ใบ้อะไรเลย แต่แบบนี้แหละดีแล้ว :30:

ลองโหลดมาเล่นละ แหล่มดี 555

หลังจากไปติว CSS บ้านพี่แอน กลับมาก็ใช้ตัวนี้แหละ :37:/

ใช้ Dreamweaver ครับ :37:

ในการเขียนเว็บ บางครั้งเราก็ต้องการกำหนดว่า ให้มีความสูงต่ำสุดเท่าไหร่ หรือไม่ก็ให้มีความกว้างมากสุดเท่าไหร่

ตัว CSS ที่นำมาใช้ ก็คือ

min-width กับ min-height และ

max-width กับ max-height

แต่มันดันมีปัญหาตรงที่ว่า อีเจ้า IE6 มันไม่รู้จัก

ทำยังไงละทีนี้ วิธีแก้ก็มีหลากหลายกันไป

แต่มีวิธีนึงที่จะมาแนะนำ คือ การเขียน Script มาใช้งานแทน โดย code จะเป็นดังนี้


#page-wrap{
min-width:800px;
max-width:1000px;
width:expression(document.body.clientWidth < 800? "800px" : document.body.clientWidth > 1000? "1000px" : "auto");
}


ก็นำไปประยุกต์ใช้กันต่อไปนะครับ


#page-wrap{
min-width:800px;
width:expression(document.body.clientWidth < 800? "800px" : "auto");
}


โว้ว มันเอา script มาใส่ใน css ได้ด้วยเหรอเนี่ย สุดยอดเจ๋งจ๊าบ :07:

:25: :55: คืออะไรอะ ไม่รู้จัก
ใช้ได้กะไออีอย่างเดียวหรือว่ามีกรณีอื่นอีก

อ้างคำพูดจาก: iannnnn เมื่อ 04 ก.พ. 2010, 12:44 น.
:25: :55: คืออะไรอะ ไม่รู้จัก
ใช้ได้กะไออีอย่างเดียวหรือว่ามีกรณีอื่นอีก

มันก็เหมือน hack ie6 อะ

เพราะว่า ie อื่นขึ้นไป มันรู้จัก min max พวกนี้

ไม่ๆ คือสงสัยว่าไอ้ expression เนี่ยมันคืออะไร ภาษาหรืออะไรยังไง
ใช้ได้กะเบราว์เซอร์อื่นไหม หรือไออี(หก)อย่างเดียว

ปวดหัวตุบ CSS ยิ่งทำยิ่งงงวุ้ยย
แต่ต้องทำให้ได้...

http://www.microsoft.com/thailand/expression/products/FAQ.aspx?key=web (http://www.microsoft.com/thailand/expression/products/FAQ.aspx?key=web)

ตามนี้อะ ใช้ได้แต่กับ IE

อ๋อ :18:

รูปแบบภาษาคล้ายๆ js เลยอะ :18:

อ้างคำพูดจาก: ก่อสตูดิโอเอ็กซ์ทู เมื่อ 04 ก.พ. 2010, 15:53 น.
รูปแบบภาษาคล้ายๆ js เลยอะ :18:

ถ้าจะทำ css เป็นตาราง ต้องทำไงดีอ่ะครับ
ตอนนี้คิดไว้ว่าเอา div มาต่อๆ กัน แต่คิดไปคิดว่า มันจะไม่ดูวุ่นวายไปหน่อยรึ

เอา table มาใช้บน wordpress ก็ไม่ได้อีก ปรับขนาดไม่ได้ ไม่รู้ว่าเป็นเพราะอะไร :25:
จำเป็นต้องรื้อ table ทิ้งออกแล้วมาใช้ div แทน เฮ้ออ ช่วยทีนะครับ

ระวังภาษาวิบัตินะครับ ที่นี่​(ละเกือบทุกที่) ไม่ค่อยนิยมกัน :12:


ถ้าอะไรที่จะต้องเป็นตาราง ก็ทำเป็นตารางครับ
การใช้ css ไม่ได้แปลว่าห้ามทำตาราง แต่หมายถึงการใช้ให้มันถูกหน้าที่
ถ้าจะแสดงผลเป็นตาราง ก็ให้ css กำหนดความขนาด รูปแบบสีสันให้ <table> <tr> <th> <td> ได้ครับ

ถ้าไม่ใช้ table ก็ต้องใช้ div ต่อ ๆ กันไปแบบนั้นละครับ

แต่ในขณะเดียวกัน ตัว css เองก็ display:table ให้อยู่เป็นทางเลือก

แต่มันใช้กับ IE ไม่ได้ครับ

ลองไปศึกษาดูจากอันนี้ครับ

http://www.divland.com/blog/2007/09/10/css-layout-equal-height/#more-187 (http://www.divland.com/blog/2007/09/10/css-layout-equal-height/#more-187)

ลองใช้ table แล้วครับ ทำตามที่พี่แอนแนะนำ ให้กำหนดค่า table td tr ไว้ใน css ตามนี้ครับ

อ้างอิง#table1 {width: 700px; float: left; background-color: red; text-align: left; margin-left: 5px; height:5px;}
#table1 .td1 {width: 30px; }

ในส่วนของ code ที่แสดงผมก็ตามนี้ครับ

อ้างอิง<table id="table1" cellspacing="0" cellpadding="0">
   <tr>
      <td class="td1">0</td>
      <td >1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
   </tr>
</table>

พอนำไปแสดงผล ปรากฏว่า td ทุกอันเท่ากันหมด เป็นระเบียบดีมาก (ประชด)
ความสูงที่ไม่ได้ต้องการก็โผล่มากจากไหนไม่รู้ แต่ยังดีที่สีพื้นยังโผล่มาให้ชม  :11:

(http://www.dood.in.th/images/jdv1265279038q.gif)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#table1 {width: 700px; float: left; background-color: red; text-align: left; margin-left: 5px; height:5px;}
#table1 .td1 {width: 30px; }
</style>
</head>

<body>
<table id="table1" cellspacing="0" cellpadding="0">
   <tr>
      <td class="td1">0</td>
      <td >1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
   </tr>
</table>

</body>
</html>


แล้วมันก็แสดงผลให้ผมแบบนี้

(http://img3.f0nt.com/04/f5eb516e22afb464e0206ee212011e0c.jpg)

มันก็ใช้ได้นิ เขียน code ผิดเองหรือเปล่าครับ

ไม่น่าจะผิดนะครับ

เพราะว่าผมรันบนเพจทั่วไปได้ปกติครับ แต่ผมจับไปใส่ wordpress แล้วมันเป็นดั่งในรูปครับ
ยังงงๆอยู่ว่ามันเป็นเพราะอะไร ทำไมถึงปรับขนาดไม่ได้

style มันตีกะของ wp ปะครับ..
ลอง debug ใน firebug ดูอะครับว่ามี style ส่วนไหนมาจาก wp บ้างหรือเปล่า..

คาดว่า น่าจะมีการตีกันของ style แบบที่ก่อว่า  :56:

อะ มาดูกันต่อกับเรื่องของ overflow

ซึ่ง overflow ก็จะมี visible , hidden, scroll และ auto

ซึ่งค่า overflow ปรกติที่เราไม่ได้ตั้งค่าอะไรมัน จะเป็น visible

มาดูกันว่า แต่ละอันนั้น มีความแตกต่างกันยังไง

overflow : visible

(http://img3.f0nt.com/09/e74d78e082708b95a0d82ea43f4f26ab.png)

จะเห็นว่า อะไรที่มันเกิน ก็จะโชว์ให้เราเห็น

overflow : hidden

(http://img3.f0nt.com/09/168016d3a5421a555720ba75f5c8b5c3.png)

มันจะซ่อนส่วนที่เกินจากที่เรากำหนดไว้

overflow : scroll

(http://img3.f0nt.com/09/ceff8516bda98d4c4dd48bbfa3a14b4a.png)

อันนี้จะใช้ในโอกาสที่เราต้องการโชว์ Scrollbar ทั้งสองด้าน แต่มันก็มีปัญหาตรงที่มันจะโชว์ตลอดเวลานี่ดิ

overflow : auto

(http://img3.f0nt.com/09/a56492640ec283c0d79a529b37eff633.png)

อันนี้ถ้าเกินจากที่เรากำหนด ถึงจะมี Scrollbar เกิดขึ้น

เดี๋ยวมาต่อ ว่ามันใช้ประโยชน์ได้อะไร

credit : http://css-tricks.com/the-css-overflow-property/ (http://css-tricks.com/the-css-overflow-property/)

พี่บิ๊กสุดยอดดดด :25:
แปะๆๆ กิ๊บกิ๊วววว

แตกหน่อแล้วครับ จู๋นี้เอาไว้เรียนกันออนไลน์กับจานบิ๊กเลย :25:
(ส่วนจู๋นู้นก็ถามโน่นนี่กรุบกริบเหมือนเดิม)

อุกรี๊ด... +พี่บิ๊กเลย :25:

ติดตามๆ :25:

อ้างคำพูดจาก: นุ้กสไตล์ เมื่อ 09 ก.พ. 2010, 19:24 น.
ติดตามๆ :25:

 :25: แปะ

ลงเรียนด้วยคนครับ  :25:

จารย์บิ๊กสุดยอด :25:

ทำงานจนลืมมาต่อ

ต่อกันเลยแล้วกัน ว่า 1 ในประโยชน์ของ overflow ก็คือ

(http://img3.f0nt.com/10/629e3ef4798a1c6aec9ff71f8629add6.jpg)

ถ้าเรามี div อันนึง แล้วใน div ก็มีอีกสอง div อยู่ด้านใน แต่ละ div ก็สั่ง float:left; ไว้

ปัญหาที่พบก็คือ สีของพื้นหลังตัว div ใหญ่ที่คลุมทั้งสอง div จะไม่ยาวลงมา

(http://img3.f0nt.com/10/2e585ebfc0d86e9aaa1c61f663001622.jpg)

วิธีแก้บางคนก็จะใช้วิธี สร้าง div มาอีกตัวไว้ด้านล่างสุด แล้วสั่ง clear:both; ซึ่งก็จะทำให้ปัญหานี้หมดไป

แต่มีอีกวิธีนึง ที่ง่ายกว่า และไม่ต้องสร้าง div เพิ่ม ก็คือ การใช้คำสั่ง overflow:hidden;

(http://img3.f0nt.com/10/9d39d6cde4e09d3c61dbca5a300bb953.jpg)

เมื่อเราใส่ overflow:hidden; ให้กับตัว div ใหญ่ที่คลุมอยู่ ก็จะได้ผลเช่นเดียวกับวิธีข้างบน

//  :25: มีกระจู๋สาระเป็นของตัวเองแล้ว

ใครมีอะไรสงสัย ก็ถามได้นะ ถ้าหามาตอบได้ จะหามาตอบให้นะครับ  :46:

มุงด้วย  :25:

ขอพวกทิปจัดการ IE ด้วยแน :27:

จารย์บิ๊กเจ๋งอ้ะ  :25:

ว้ายๆๆ กรี้ดดๆๆ  :25:

กลับมากับเรื่องของ Margin collapsing

ซึ่งเป็นเรื่องเล็ก ๆ น้อย ๆ แต่พวกเราควรจะรู้

เริ่มจากดูรูปประกอบอันแรกก่อน

(http://img3.f0nt.com/15/69bc073a87914f38f94ef0ed2bbf0d96.jpg)

เมื่อเรามี div สองอัน โดยกำหนด margin ไว้ 20px ถ้าเราสั่ง float:left; clear:both; ไว้ใน div เราจะได้ตามแบบรูปนี่ละ

แต่ถ้าเราไม่ได้ใส่ไว้ละ ตามปรกติที่เคยบอกไว้ div มันจะเป็น display:block; อยู่แล้ว ดังนั้นมันจะขึ้นบรรทัดใหม่ จะได้ตามรูป

(http://img3.f0nt.com/15/c978551ca1e8bc0dcb825bb09edab3b4.jpg)

จะเห็นว่า ด้านล่างของ div บน กับด้านบนของ div ล่าง จะซ้อนกัน นี่ละ Margin collapsing

แล้วถ้าเกิดมัน margin ไม่เท่ากันละ จะเป็นยังไง ตามมาดูอันต่อไป

(http://img3.f0nt.com/15/a1b32f80e28270eb99bc6332fb99b67b.jpg)

คราวนี้ div บนมี margin-bottom:30px; และ div ล่างมี margin-top:20px; ซึ่งตามจริงที่จะปรากฎจะเป็นดังนี้

(http://img3.f0nt.com/15/3e3877c4bceb994e7699329441e3290e.jpg)

จะเห็นว่า มันจะยึดหลักว่า margin ตัวไหนเยอะกว่า จะใช้อันนั้น

มาดูตัวอย่างสุดท้ายกันนะ ดูที่รูปประกอบเลย

(http://img3.f0nt.com/15/4ea8936f441eaa034a20a1c446d1320e.jpg)

กรณีนี้ ส่วนของเนื้อหา อยู่ภายใน div หรือเป็น div ใน div กรณีนี้จะได้ผลลัพธ์ยังไงลองคิดดูก่อน
















(http://img3.f0nt.com/15/6b2a29bc77822ab339b6e99429dde9c4.jpg)

มันจะยึดหลัก margin ที่เยอะกว่าไว้ ซึ่งก็จะได้ผลดังรูปครับ

 :25:

ผมทำเว็บมา ไม่ค่อยได้เจอปัญหานี้แฮะ

 :25: พี่บิ๊กสุดยอด ขอบคุณค่ะ

ไม่เคยเจอปัญหานี้เลย :55:
ยังนึกภาพไม่ออกด้วยอ้ะ ขอแนบไฟล์ html ประกอบการสอนด้วยครับ :27:

จะบอกว่ามันไม่ใช่ปัญหา แต่มันเป็นพื้นฐานที่ควรรู้อะไรประมา๊ณนั้น  :56:

จากตัวอย่างจะทำให้เห็นเลยว่า สองแบบต่างกันแบบไหน

 :25: คุณครูบิ๊ก

มาเรียนกะแม่อีกรอบจ้า  :25:

 :25: ตามสบายกันเลย

มาดูกันว่า z-index ใช้งานอย่างไร (http://rabbitinblack.com/2011/10/css-z-index/)

 :25: ลงเรียนเทอมนี้พอดีเลย

อยากมีให้เรียนมั่ง :30:

บอกแล้วว่าให้ซิ่วมา

ไม่ดีอะ เดี๋ยวเบื่อกันตาย :30:

โอ้ว มหาลัยมีสอน CSS ด้วยเหรอ กรี๊ด ๆ ๆ   :25:

กำลังจะได้เรียนเลย css เนี่ย :25:

มันเป็นวิชา Internet Programming อะ
ที่นี่เค้าเปิดสอนวิชาแบบ อยากเรียนอะไรบอกอาจารย์
ถ้าอาจารย์อยากสอน เดี๋ยวเทอมหน้าเปิดให้

อะไรแบบนี้ :30:

ถ้าสงสัยอะไร ก็บอกนะครับ ผมจะได้เอาไปเขียน  :56:

ทำยังไงให้เขียนเป็นในสองวันโดยไม่มีพื้นฐานห่าอะไรเลยอ่ะฮับ  :25:

รับงานจ้างทำเว็บจากบริษัทใหญ่ ราคาครึ่งล้านฮับ :25:

ตูก็จ้างคนอื่นทำแสนห้าฮับ  :25:

อ้างคำพูดจาก: นายร่มไทร เมื่อ 09 ต.ค. 2011, 15:06 น.
ทำยังไงให้เขียนเป็นในสองวันโดยไม่มีพื้นฐานห่าอะไรเลยอ่ะฮับ  :25:

สองวันไม่ไหวอะพี่ ถ้าสองสัปดาห์ไม่แน่นะ

อ้างคำพูดจาก: blackRabbit เมื่อ 09 ต.ค. 2011, 03:48 น.
โอ้ว มหาลัยมีสอน CSS ด้วยเหรอ กรี๊ด ๆ ๆ   :25:

น่าอิจฉา :25:

ใครอย่าเผลอหลุดคำว่า "เด็กสมัยนี้" นะครับ แก่เลยนะครับ

ใช่ เราต้องนำสมัย

อืม... เด็กสมัยนี้ต้องนำสมัย

 :59:

บอกตรงๆ นะ หนูไม่เข้าใจโลกของผู้ใหญ่เลยซักนิดเดียว  :56:

โห อาการหนักแล้วครับแบบนี้

ตัวก็หนักครับ

จับรวบสองคนแล้วฉีกกลางเล้ย  :59:

(http://img3.f0nt.com/10/1a93af93177bad7fe599e43f3d6c1972.png)

 :30:

สมควรรีบทำ 9gag.in.th ได้แล้วสินะ :30:

CSS : พัฒนาการเขียน HTML และ CSS กัน [Slide] (http://rabbitinblack.com/2011/10/css-html-css-slide/)

อ้างคำพูดจาก: ιαппппп เมื่อ 10 ต.ค. 2011, 14:11 น.
(http://img3.f0nt.com/10/1a93af93177bad7fe599e43f3d6c1972.png)

:59: :59: :59:

(http://img3.f0nt.com/11/639a1133172a453d163732b48e988ed7.png)(http://img3.f0nt.com/11/639a1133172a453d163732b48e988ed7.png)(http://img3.f0nt.com/11/639a1133172a453d163732b48e988ed7.png)

อะไร๊ :3005:

อ้างคำพูดจาก: ιαппппп เมื่อ 11 ต.ค. 2011, 16:59 น.
(http://img3.f0nt.com/11/639a1133172a453d163732b48e988ed7.png)(http://img3.f0nt.com/11/639a1133172a453d163732b48e988ed7.png)(http://img3.f0nt.com/11/639a1133172a453d163732b48e988ed7.png)

:30: :30:

 :30: :30:

อ้างคำพูดจาก: blackRabbit เมื่อ 11 ต.ค. 2011, 10:52 น.
CSS : พัฒนาการเขียน HTML และ CSS กัน [Slide] (http://rabbitinblack.com/2011/10/css-html-css-slide/)

:25:

CSS : อะไรคือ CSS Reset (http://rabbitinblack.com/2011/10/css-reset/)

พี่บิ๊กกกก :25:

ภาวนาให้ไฟไม่หมดไปก่อน  :56:

 :25:

 :25: :25: :25:

 :25:

ได้เริ่มเรียน CSS เมื่อวันพุธ เจ๋งอ้ะ :53:

อะ ต่อเลยแล้วกัน

CSS : ใช้งาน Position กันอย่างไร (http://rabbitinblack.com/2011/10/css-position/)

:41: อีบ้าพลัง

อ้างคำพูดจาก: ιαппппп เมื่อ 15 ต.ค. 2011, 12:05 น.
:41: อีบ้าพลัง

:59: เดี๋ยวก็จะหมดแล้วละ

อย่าเพิ่งหมดนะ รอจบเทอมนี้ก่อนนะ

หมั่นเติมพลังด้วยเอทิลแอลกอฮอล์สิ :52:

ใน google custom search engine เราสามารถทำให้ background เป็น transparent ได้ไหมครับ? แบบในหัวบอร์ด f0nt อ่ะ

ลองใช้ jQuery แล้วกันครับ ให้มันหา input ที่มี name เท่ากับ q อะครับ

แล้วก็ set ค่า css มันให้เป็น background transparent เลยครับ

CSS : ลำดับความสำคัญของ style ใน CSS (http://rabbitinblack.com/2011/10/css-style-id-class/)

CSS : CSS Shorthand เขียน CSS ให้กระชับ (http://rabbitinblack.com/2011/10/css-shorthand/)

อ้างคำพูดจาก: ιαппппп เมื่อ 15 ต.ค. 2011, 12:05 น.
:41: อีบ้าพลัง

พวกแก่ไร้พลัง  :59:

สี FAB
:30:

 :05: มีคนเห็นซะที

:30: มี Easter Egg ก็ไม่บอก

ทำให้รู้ว่า ป๋าเลย์อ่านจริง ๆ ละเอียดด้วย  :25:

สู้ตูไม่ได้ ไม่เคยอ่านเลย :12:

 :13: เยี่ยมมากเพื่อน

ทำไมอ่านแล้วไม่สงสัย :30:

อ้างคำพูดจาก: blackRabbit เมื่อ 21 ต.ค. 2011, 19:35 น.
ลองใช้ jQuery แล้วกันครับ ให้มันหา input ที่มี name เท่ากับ q อะครับ

แล้วก็ set ค่า css มันให้เป็น background transparent เลยครับ

ขอบคุณครับ

CSS : วิธีจัดให้อยู่กึ่งกลาง กรณีรู้ความกว้างและความสูง (http://rabbitinblack.com/2011/10/css-middle/)

เอ๊ะ คุ้นๆ เหมือนเคยถาม  :30:

นึกอะไรออกก็เอามาเขียนอะครับ  :56:

อ้างคำพูดจาก: ιαппппп เมื่อ 15 ต.ค. 2011, 12:05 น.
:41: อีบ้าพลัง

อ้างคำพูดจาก: ιαппппп เมื่อ 15 ต.ค. 2011, 12:05 น.
:41: อีเหวิ่งบ้าพลัง

สอนวิธีใช้ Firebug เบื้องต้นครับ (http://rabbitinblack.com/2011/11/css-how-to-use-firebug/)

ตามอ่านทุกตอนเน้อ  :51:

อ้างคำพูดจาก: Layiji เมื่อ 02 พ.ย. 2011, 20:22 น.
ตามอ่านทุกตอนเน้อ  :51:

ขอบคุณครับ พี่เลย์  :51:



แต่เย้ย ทำไมเป็น Emo แบบนั้นละ  :59:

ขยันยังกะคนกำลังจะตกงาน   :59:

<select> ใน IE นี่มีวิธีกำหนดความสูงให้มัน โดยที่ไม่ขยายฟอนต์มั้ยครับ

ป.ล. google ฝรั่งบอกว่า impossible แต่ลองมาถามด้วยความหวัง  :16:

impossible

ใช้ padding ไม่ได้เหรอ  :09:

padding ใช้ได้แต่ ie8

 :56: ไม่สนใจ IE มาซักพักแล้ว

อ้างคำพูดจาก: Rabbitinblack เมื่อ 04 พ.ย. 2011, 10:22 น.
:56: ไม่สนใจ IE มาซักพักแล้ว

พอตูบอกลูกค้าตั้งแต่ต้นเลยว่า
ผมจะเขียนโค้ดตามมาตรฐานสากล
ดังนั้นเว็บนี้จะทำงานได้ดีแสดงผลได้ตรง
็เมื่อใช้กับ หมาย่าง หรือโครมเท่านั้น

ถ้าจะต้องการจะให้ใช้กับ IE ผมก็ไม่มีปัญหาครับ
แค่เราจะัคิดเงินเพิ่มต่อเวอร์ชั่น
อย่างจะให้ใช้ได้กับ IE 6 ก็ต้องจ่ายเพิ่มอีกก้อนนึง
ใช้กับ IE7 ก็ต้องจ่ายอีกก้อนนึง  :37:
อย่าลืมว่าเราต้องทำงานซ้ำอีกรอบเลยนะ
ถ้าจะต้องให้รองรับ IE  :37:

ลูกค้าพอเห็นว่าคิดตังค์เพิ่มปุ๊บ
ส่วนใหญ่ไม่เห็นจะสนใจเลยนะว่า่
มันจะเวิร์คกับ IE หรือเปล่า
จะมีถามก็แค่ เอ๊ะใช้ chrome มันเร็วกว่าจริงเหรอ  :30:

ลองอ่านบทความนี้ก็ได้ครับ

http://www.smashingmagazine.com/2011/11/03/%E2%80%9Cbut-the-client-wants-ie-6-support%E2%80%9D/ (http://www.smashingmagazine.com/2011/11/03/%E2%80%9Cbut-the-client-wants-ie-6-support%E2%80%9D/)

ขอบคุณครับ ตอนนี้ปล่อยมันไปละ  :49:  :30:

CSS : เมื่อต้องเจอปัญหากับ IE (http://rabbitinblack.com/2011/11/css-ie/)

:59: ตลอดๆๆ

 :59: ทำไมครับ ทำไม

เหวิ่งตลอด :59:

 :59: อ้าว ไอ้บ้านซ่อง

CSS : เรียน HTML CSS ฟรีใน 30 วัน (http://rabbitinblack.com/2011/11/css-html-30/)

กรี๊ดดดดดดดดด :25: :25:

กร๊าดดดดดด  :25:


ดูสาวๆ ไปทำนาต่อก่อน ยังเหลือ หนังสยองขวัญ กับโรงงานอีก  :47:

พี่ร่มเลิกเรียนทำเว็บ แล้วไปตั้งใจกับการบันเทิงดีกว่าครับ  :56:

ถ้าได้ดีแล้วเค้าจะถีบหัวส่งนะ จานบิ๊ก  :25:

 :05: ม่ายยยยยยยยยยยยยยยยยยยยย

CSS : แต่งกล่อง Facebook Like Box กัน (http://rabbitinblack.com/2011/11/css-facebook-like-box/)

วิดีโอสอนพื้นฐานของ HTML CSS Javascript จาก Google (http://rabbitinblack.com/2011/11/video-html-css-javascript-from-google/)

[CSS] tag ต่าง ๆ และ CSS ที่เกี่ยวกับ list (http://rabbitinblack.com/2011/12/html-tag-list-css/)

อาชามบิ๊กขยันจริงๆ ทั้ง wordpress ทั้ง CSS  :12: :12:

 :56: เรื่องต่อนก็ขยันนะครับ

:30: :30: :30: :30: :30:

[CSS] ข้อแตกต่างระหว่าง width:auto กับ width:100% (http://rabbitinblack.com/2011/12/css-width-auto-100/)

[CSS3] แนะนำเว็บที่มีตัวอย่างการเขียน CSS3 ให้นำไปใช้ (http://rabbitinblack.com/2011/12/css3-example/)

[CSS] แนะนำ Slide ที่ควรดูเพื่อทำความเข้าใจกับ CSS (http://rabbitinblack.com/2011/12/css-slide-must-see/)

เรื่อง width นี่เพิ่งรู้ :25:
แสดงว่าเวลาใช้ ใช้ auto มันก็คือแสดงเป็นคุณสมบัติเดียวกะ div ธรรมดาเลยชิมิ :25:

ใช่ เพราะ div ปรกติ width จะเป็น auto อยู่แล้ว ไม่ใช่ 100%

แล้วถ้าเป็น img ล่ะ
คือกูจะให้มันแสดงผลเป็น responsive
แต่อยากกำหนดว่าถ้า div ที่ห่ออยู่กว้างกว่ารูป ก็ให้แสดงผลปกติ
แต่ถ้าขนาดเล็กกว่ารูปก็ให้ย่อให้พอดีๆ แบบนี้ต้องเขียนยังไง :09:

(ดูใน fail.in.th ก็ได้ :25:)

ถ้าแบบนั้นมึงอาจจะเขียนว่า

div {
width:auto;
}
div img {
width:99%;
}

แบบนี้น่าจะได้นะ รูปจะได้ตาม div ตัวที่เป็นกรอบอะ

ทำไมข้างในต้องเป็น 99% อะ :09:

จะ 100% ก็ได้ กลัวจะเผื่อกรอบ เผื่ออะไรด้วย  :30:

แล้วทำไมข้างในไม่ width:auto อะ

ก็ด้านนอก width:auto เป็นกรอบ

ส่วนด้านในเป็น width:100% เพื่อจะได้เต็มกรอบ

อ๋อ อีกอย่าง ถ้าตั้งเป็น width:auto ให้รูปใช่ปะ

สมมติกรอบกว้าง 250px รูปกว้าง 150px

รูปก็จะกว้าง 150px ถ้าเป็น width:auto

แต่ถ้าเป็น width:100% รูปก็จะกว้าง 250px ตามกรอบที่เรากำหนดอะ

อ๋อ โอเช :27:
ถ้างี้เราเอากว้าง 90% แล้วสั่ง margin: 0 auto ก็จะกลางและมีขอบข้างๆ พอดี แทงยู

ใช่แล้วงัฟ  :47:

เป็นเหวิ่งที่ต่อนมาก
อ่านโพสต์พี่บิ๊กเรียงๆ กัน แล้วแบนเนอร์โซชิเตะตากว่าข้อความอีก :30:

นี่ละ จุดประสงค์  :52:

กูแม่งรำคาญแบนเนอร์มากอะ อยากจะกดเข้าไปลบแล้วใส่หน้าอะไรลงไปแทน :30:

 :05: ไม่นะ เราให้ความรู้ด้วยนะ ความสุขเรานิดหน่อยขอเถอะ

ตั้งให้แต่ละคนเห็นแค่ลานเซ็นตัวเองได้มั้ยอ่ะ  :30: :30:

ทำไมล่ะ สาวๆ น่ารักออก  :05a:

 :05: พวกไม่เข้าใจ

บอกให้ไปดู รันนิ่งแมน แล้วต่อด้วย สาวๆ ไปโรงเรียนก็ไม่เชื่อกัน  :05:

จะไปหวังอะไรกับพี่ เกรียนสิคะ ละพี่ร่ม  :05:

อ้างคำพูดจาก: iannnnn เมื่อ 13 ธ.ค. 2011, 18:08 น.
กูแม่งรำคาญแบนเนอร์มากอะ อยากจะกดเข้าไปลบแล้วใส่หน้าอะไรลงไปแทน :30:

ขอแบนเนอร์คำว่าเหวิ่งค่ะ :43:

[HTML5] รู้จัก Elements ของ HTML5 กันขนาดไหนมาทดสอบกัน (http://rabbitinblack.com/2011/12/html5-elements/)

<a href="http://rabbitinblack.com/2011/12/html-css-form-formbakery/">[HTML CSS] ขี้เกียจเขียน Form โว้ย FormBakery ช่วยด้วย</a>

[CSS] วิธีใช้ background เบื้องต้น (http://rabbitinblack.com/2011/12/css-background/)