พิมพ์หน้านี้

ชื่อเรื่อง: CSS เด็ดๆ
โพสต์โดย: Layiji เมื่อ 30 พ.ค. 2007, 16:56 น.

หลังจากอ่านเรื่อง CSS ไปหลายวันเลยอยากจะตั้งกระทู้เกี่ยวกับการใช้ CSS แบบ
โชว์โค้ด และวิธีใช้งาน และอาจจะมีเหตุผลประกอบหน่อยๆ
แต่อยากรบกวนผุ้ใช้ CSS ทุกท่านช่วยกันโพสหน่อยนะครับ

ตัวอย่างก็มาจากเว็บอื่นๆแหละครับ

พื้นฐาน CSS อ่านตรงนี้เด้อ http://f0nt.com/forum/index.php?topic=9312.0

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: ป้าแป้งกึ่งสำเร็จรูป เมื่อ 30 พ.ค. 2007, 16:58 น.

ลงชื่อนั่งดูค่ะ :25:

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: iSharp เมื่อ 30 พ.ค. 2007, 17:00 น.

ดูด้วย

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 30 พ.ค. 2007, 17:01 น.

เนื่องจากต้องทำงานด้านนี้โดยตรง ล้วก็ประสบปัญหา Compatible กะ IE :13: เยอะมาก
ก็เลยเซฟลิงก์เกี่ยวกับ css ไว้เยอะพอสมควรครับ

http://del.icio.us/iannnnn/css

เดี๋ยวจะคัดอันนึงมาให้ลองอ่าน รู้สึกว่ามีประโยชน์ดี
..แป๊บ

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: Layiji เมื่อ 30 พ.ค. 2007, 17:02 น.

เริ่มด้วยเรื่อง LINK หลากสี

โค้ดคือ

โค้ด เลือกทั้งหมด


.c1 {  font-family: "MS Sans Serif"; font-size: 14px}
.c1 a:link {  color: #สี;}
.c1 a:visited {  color: #สี;}
.c1 a:hover {  color: #สี;}
.c1 a:active {  color: #สี;}

.c2 {  font-family: "MS Sans Serif"; font-size: 14px}
.c2 a:link {  color: #สี;}
.c2 a:visited {  color: #สี;}
.c2 a:hover {  color: #สี;}
.c2 a:active {  color: #สี;}

วิธีใช้

โค้ด เลือกทั้งหมด

<p class="c1"><a href="#">Link color1</a></p>
<p class="c2"><a href="#">Link color2</a></p>

CSS ดังนี้จะทำให้ สี link มีได้มากกว่า 1 สี
แต่จากที่ผมเคยอ่านมา เห็นบอกว่ามันมีการเรียงลำดับด้วยต้องเรียงแบบนี้
Link visited hover active
รู้สึกว่าถ้าเกิดสลับกันจะมีปัญหาเกิดขึ้นได้

(http://img2.f0nt.com/30/739776176facdc4f1e1b1e73d389e6df.jpg)

มีตัวอย่างไฟล์ด้านล่างด้วย :17:

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 30 พ.ค. 2007, 17:11 น.

วิธีทำ Page Footer ที่ล็อคอยู่ด้านล่างเสมอ

/* ทำขอบทุกอย่างในโลกให้เป็น 0 หน่วย เพราะบางที ie มันตั้งค่ามาตรฐานไว้ 1-2 หน่วยอะไรงี้*/

โค้ด เลือกทั้งหมด

* {margin: 0;}

/* ถ้าหน้ามันสั้น ก็ให้ขยายให้เต็ม 100% เป็นอย่างน้อย*/

โค้ด เลือกทั้งหมด

html, body { height: 100%;}

/*เนื้อหาของหน้าทั้งหมด อยู่ใน div class นี้ครับ*/

โค้ด เลือกทั้งหมด

.wrapper {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -40px; /* margin ตรงขอบล่างต้องเป็นเลขติดลบด้วยความสูงของ footer */
}

/*อันนี้เป็น Footer*/

โค้ด เลือกทั้งหมด

.footer, .push {height: 40px; }

ส่วนใน html ก็

โค้ด เลือกทั้งหมด

<body>

<div class="wrapper">
	<!--เนื้อหา-->
	<div class="push"></div>
</div>

<div class="footer">
	<!--เนื้อหา-->
</div>

</body>

****อย่าลืมใส่ .push ไว้ท้าย wrapper นะครับ****

ที่มา http://ryanfait.com/sticky-footer/

ป.ล.จู๋นี้เป็นภาคแยกในส่วน css จากจู๋รวมฮิตสคริปต์เด็ดอีกทีนะก๊ะ

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: คุณชาย ( 737 ) เมื่อ 30 พ.ค. 2007, 17:18 น.

:12: มีอะไรก็แบ่งๆมาอีกได้ครับ จะคอยมาอ่านเรื่อยๆ

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: Layiji เมื่อ 30 พ.ค. 2007, 17:42 น.

Link กับสี Table

เพื่อความสวยงาม เลยมีโค้ดเกี่ยวกับการจัดการ Table ไว้ด้วย

โค้ด เลือกทั้งหมด

table.menu a { width:125px; border:1px solid #333333; display: block}
/* อย่าลืม Display: block หายไป จะไม่มีผลกับ Table 


div.menu a{ font-size:11px; font-family: Tahoma; padding: 10px ;}	

/* สังเกตว่าด้านบนมีคำสั่งเกี่ยวกับ padding ด้วย
ซึ่งจะตีกับด้านล่างที่เป็น html อีก


div.menu a:link {color: #333333; text-decoration: none; background: #ffcc00;}
div.menu a:active {color: #000000; text-decoration: none; background: #cccc99;}
div.menu a:visited {color: #333333; text-decoration: none; background: #cccc99;}
div.menu a:hover {color: #eeeeee; text-decoration: none; background: #333333;}

ส่วนใช้งาน Html

โค้ด เลือกทั้งหมด

<div class="menu">
  <table  class="menu" align="center" cellspacing="0" border="0" cellpadding="5" >

/* นี่ไงที่บอกว่ามี cellpadding ด้วย มันจะเกี่ยวกับระยะห่างระว่ากรอบแต่ละอัน ลองแก้ดูทั้งใน CSS กับตรงนี้เพื่อทดสอบดู

    <tr>
<td align="left"><a href="#" >Link 1</a></td>

</tr>
<tr>
<td align="left"><a href="#" >Link 2</a></td>
</tr>
<tr>
<td align="left"><a href="#" >Link 3</a></td>
</tr>
<tr>
<td align="left"><a href="#" >Link 4</a></td>
</tr>
<tr>
<td align="left"><a href="#" >Link 5</a></td>
</tr>

</table>
</div>

จะได้อย่างนี้
(http://img2.f0nt.com/30/68baca3da478fd45384ebf4ab1f82e70.jpg)

ที่มา http://www.ssi-developer.net/css/menu-rollover-effect_table.shtml
ไฟล์อยู่ด้านล่าง

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: Iâ€™Boss เมื่อ 30 พ.ค. 2007, 17:49 น.

:25: มาดูครับ ผมไม่เคยเขียน css เลย

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: Layiji เมื่อ 30 พ.ค. 2007, 17:52 น.

อ้างอิงmin-height: 100%;
height: auto !important;

อันนี้คืออะไรน่ะ

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 30 พ.ค. 2007, 18:08 น.

โค้ด เลือกทั้งหมด

 min-height: 100%;
height: 100%;

จำไม่ได้ว่าอันไหนสำหรับ IE :13: อันไหนสำหรับบราวเซอร์อื่นๆ นะ่ครับ
แต่แปลว่าให้กำหนดความสูงของอวัยวะเหมือนกันทั้งคู่

ส่วน !important นี่ถ้าเอาไปต่อท้ายอันไหน
แสดงว่าถ้าเกิดว่ามีการเซ็ตค่าตรงนี้ 2 อันที่ค่าซ้อนกัน ให้ยึดอันนี้เป็นสำคัญ (มั้ง)

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 30 พ.ค. 2007, 20:46 น.

คุยกะป๋าในเอ็มแล้วไม่ถนัดครับ :08:
เพราะเป็นคนที่ไม่ถนัดในการตอบเร็ว ก็เลยปั่นเอาง่ายกว่า {หมีโหด}

ทีนี้มาว่ากันด้วยเรื่องการจัดคอนเทนต์เอาไว้กลางหน้า
จากโจทย์นี้นะครับ

อ้างอิง(http://img2.f0nt.com/30/19fe852f7291cb34b699a71718a5f6df.png)

ถ้าเคยชินกับระบบ Table ก็ต้องสร้างตารางเต็มจอ
แล้วค่อยซอย แล้ว fixed ตรงกลางใช่มะ

แต่นี่ยุค css ก็ให้ใช้ (ต่อไปนี้ขอเรียกว่า) wrapper เลยครับ
wrap แปลว่าห่อ: ในที่นี้คือห่อเนื้อหาทั้งหมดไว้ในนั้น
(เข้าใจตรงกันนะ เผื่อไปแกะโค้ดฝรั่งเจอคำนี้จะได้ไม่งง)

ก่อนอื่นให้ใช้สูตรเต็มจอ (อย่างโพสต์ก่อนของตูนู่น) ให้กับ tag html + body ก่อน

โค้ด เลือกทั้งหมด

html, body {height: 100%;}

แล้วตามด้วยบอกให้จัดหน้าไว้ตรงกลาง

โค้ด เลือกทั้งหมด

body { margin: 0; padding: 0; text-align: center;}

เสร็จถึงตรงนี้ลองพิมพ์เนื้อหามั่วๆ ดู จะเห็นว่าเนื้อหาชิดกลางแล้ว
ทีนี้ก็เอาถุงมาห่อไม่ให้หกเลอะเทอะ ถุงนี้จะกว้าง 800px ครับ

โค้ด เลือกทั้งหมด

#wrapper { margin: 0 auto; text-align: left; width: 800px; min-height: 100%; height: auto; background: #ffcc00;}
- text-align: left; คือทำให้ตัวอักษรชิดซ้ายในห่อนี้ (ถ้าไม่มีจะชิดกลาง)
- background: #ffcc00; อันนี้ใส่ให้มันมีสีเฉยๆ

พอดีไปเจอฝรั่งท่านสอนมา (ขโมยโค้ดเขามา)
บอกว่าไอ้ IE :13: เนี่ย (พิมพ์ทีไรติดนิ้วกลางทุกที) มันแสดงผลไม่ตรงชาวบ้าน
ต้องใส่ไอ้นี่เข้าไปหน่อยเพื่อดัดนิสัยมัน

โค้ด เลือกทั้งหมด

* html #wrapper { height: 100%;}

ซึ่งทำให้เวลาเราใส่เนื้อหาเข้าไปแล้วมันเกินหน้าขึ้นมาเนี่ย
มันจะมี Scrollbar ลงมาด้วยครับ

(http://img2.f0nt.com/30/a3ae536f12c7413b86bfb9b1c28d5dab.png)

ส่วนเรื่อง Footer นั่นก็เอาไปใส่เอาต่อเองนะครับ ยัดใส่ห่อใหญ่อีกทีนึง

เสร็จแล้วลองโหลดอันนี้ไปดู

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: ริสา เมื่อ 30 พ.ค. 2007, 20:47 น.

น่าสน :25: :25:
มารอดู

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: เง็ก เจสสิก้า อาม่า เมื่อ 30 พ.ค. 2007, 21:51 น.

:40:

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: Layiji เมื่อ 30 พ.ค. 2007, 22:07 น.

โอ้ขอบคุณครับ

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: จักรี เมื่อ 30 พ.ค. 2007, 22:27 น.

เมื่อก่อน เขียน css แบบ แบบ มั่วๆ ไม่รุ้ทำไม พอเขียนเสร็จก็ลืม เวลาเอามาใช้ก็ก๊อป เลยทำให้ในสมองไม่มีอะไรเลย :01:

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 30 พ.ค. 2007, 22:27 น.

เหมือนกัน :30:

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: จักรี เมื่อ 30 พ.ค. 2007, 22:29 น.

พี่แอนยังลำดับความคิดไว้ได้ จนเอามาเล่าให้ฟังเป็นวรรคเป็นเวง แต่ผมดิ :01:

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: ooooo เมื่อ 31 พ.ค. 2007, 01:05 น.

จู่นี้น่าสนใจดีครับ :45:

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 01 มิ.ย. 2007, 00:51 น.

http://www.mollio.org/

เว็บนี้เข้าท่าดีครับ
เขาออกแบบ Template CSS เอามาให้ใช้ หลายแบบ
มาถึงเราก็แค่เปิด โหลด แล้วก็อ้างว่าตัวเองทำได้แล้ว หน้าด้านมาก :30:

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 02 มิ.ย. 2007, 03:58 น.

ตอบป๋าเลย์อีกทีครับ คิอ่อแระ :08:
(สองคนนี้ไม่รู้เป็นไร ชอบนัดจูดู้กันในเอ็มแล้วเอามาปล่อยที่นี่ :27:)

จากโจทย์ที่ป๋าพยายามจะเลี่ยงการใช้ Table ในการจัดเลย์เอาต์
แล้วก็อยากได้ 3 คอลัมน์ดังนี้
- ซ้าย มี bg ชิดซ้าย ไม่จำกัดขนาด
- กลาง กว้าง 800px
- ขวา มี bg ชิดขวา ไม่จำกัดขนาด
- ถ้าจอแคบไปหรือกว้างไปก็ให้เกิดผลแบบนี้

(http://img2.f0nt.com/02/2329145355aca4e457342ce13cff72f0.png)

ก็เลยลองหากันมาตั้งนานว่าทำไง
ปรากฏว่าก็เลยลองทำแบบกำปั้นทุบดินครับ คือ
- ใช้ z-index กำหนดศักดินา ให้อันกลางสูงสุด ซ่อนอันซ้ายขวาไว้ด้านหลัง
- ซ้ายกับขวาใส่ position:absolute อันนึง left อันนึง right
- คราวนี้ไม่ได้สร้าง wrapper ครอบทั้งหมดนะครับ ลืม :31:

เท่านี้แหละครับ เดาว่าจริงๆ มันน่าจะมีวิธีที่ดีกว่านี้แต่ดึกป่านนี้ก็คิดออกแบบนี้แหละครับ
ตายตาหลับและ :31:

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: Layiji เมื่อ 02 มิ.ย. 2007, 10:04 น.

จะบอกว่าเอาไปคิดในฝันด้วย :30:

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: จักรี เมื่อ 02 มิ.ย. 2007, 10:29 น.

ง่ะ ไม่ใส่ teble เลยอะเหรอ :08:

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: i-poon เมื่อ 02 มิ.ย. 2007, 14:46 น.

table ไม่ดีตรงไหน :11:

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: ยุนเอ เมื่อ 02 มิ.ย. 2007, 14:55 น.

มันจะแสดงผลไม่ดี เมื่อไปใช้ web browser non ie base :42:

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 02 มิ.ย. 2007, 15:01 น.

คืองี้ครับ
ไม่ได้บอกว่าตารางไม่ดีนะ แต่มันจะไม่ได้เป็นตัวหลักในการจัดหน้าเหมือนก่อนแล้วไง
ตอนนี้คนเขียนเว็บ (เอ้า จะบอกว่าฝรั่งก็ได้ เราไปตามตูดฝรั่งกัน) เขาจะแยกเนือหาออกจากดีไซน์
นั่นคือพอถอด css ออกตัวเดียวปั๊บเนื้อหาก็ยังอยู่แต่ดีไซน์จะเหลือแค่ตัวอักษรกับรูปภาพเฉยๆ
ข้อดีคือเวลาเราเขียนเว็บแบบไดนามิกสักพันหน้า เราใส่แม่แบบโยนโครมไปเลยทีเดียวได้
มันเปลี่ยนได้หมดเลยไม่ว่าจะรูป สี พื้นหลังพื้นหน้า ตำแหน่งการจัดวาง
ในขณะที่การวางเลย์เอาต์ด้วยการซอยตารางทำไม่ได้

แต่บางทีไม่ได้คิดอะไรขนาดนั้นตูก็โยนใส่ตารางไปเลย เอา <doctype ...> โยนทิ้งด้วยซ้ำ :30:

อ้าว เอตัดหน้า งั้นต่อเลย
ส่วนเรื่อง IE :13: นั้น ไม่ว่าจะตาราง ตาแม้น ตาแช่ม หรือ css ก็มีปัญหาทั้งนั้นแหละครับ
เพราะพิษจากสงครามมาตรฐานเมื่อหลายปีก่อนมันตกตะกอนมาจนถึงวันนี้
เวลาเขียน css ก็เลยต้องมีวงเล็บอยู่บ่อยๆ ว่ามี IE :13: Hack ซ่อนอยู่ที่บรรทัดนี้ๆๆ

ส่วนเรื่องที่ว่าปัญหามาตรฐานจะหมดไปเมื่อไหร่ ก็ต้องรอให้วิสต้าครองเมืองแบบ XP ก่อน ก็คงราวๆ อีก ๒-๓ ปี
แบบที่จอขนาด ๑๐๒๔ มาแทน ๘๐๐ จนเราเริ่มทำเว็บที่กว้างเกิน ๗๘๐ พิกเซลได้แล้วนี่ล่ะ

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: i-poon เมื่อ 03 มิ.ย. 2007, 21:55 น.

google.com ใช้ <table> :11:

(จริงๆ อ่านเรื่อง css มาจากพี่แอนอร่อยแล้วล่ะครับ แต่พอหัดเข้าจริงๆ ก็มาตายตรงมาตรฐานนี่แหละ :42:)

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: ยุนเอ เมื่อ 03 มิ.ย. 2007, 21:58 น.

ใบ้หน่อยครับ :07:

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: i-poon เมื่อ 03 มิ.ย. 2007, 23:18 น.

เฮ้ย :07:

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: today เมื่อ 04 มิ.ย. 2007, 01:47 น.

Password is not correct! :33:

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: จักรี เมื่อ 04 มิ.ย. 2007, 02:11 น.

อะไรอยู่ใต้น้ำตรงคีย์บอร์ดเหรอครับ :09:

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 04 มิ.ย. 2007, 05:39 น.

http://www.hotdesign.com/seybold/everything.html
ทำไม Table Layout ถึง Stupid
(ไม่มีอะไรหรอก ไม่ต้องอ่านก็ได้ เห็นว่าฝรั่งท่านเขียน คนไทยก็ควรเชื่อตามท่านนะ)

ดูอันนี้ดีกว่า

http://blog.html.it/layoutgala/
รวมเลย์เอาต์ CSS แบบต่างๆ ที่ฮิตๆ
เอาไว้ให้โหลดแบบไม่ต้องมานั่งงมเอง {หมีโหด}

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: i-poon เมื่อ 04 มิ.ย. 2007, 13:17 น.

ดูอันนี้ดีกว่า

http://blog.html.it/layoutgala/
รวมเลย์เอาต์ CSS แบบต่างๆ ที่ฮิตๆ
เอาไว้ให้โหลดแบบไม่ต้องมานั่งงมเอง {หมีโหด}

อ้างอิง

งมมาหมดแล้วพี่
เหลือตัวเดียว คือทำให้ div ลอยอยู่ตรงกลางจอ (กลางทั้งแนวตั้ง แนวนอน)
ที่เลิกใช้ div+css จัดหน้าเพราะอันนี้อันเดียวเลยจริงๆ :05:

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: Layiji เมื่อ 04 มิ.ย. 2007, 13:20 น.

http://www.intensivstation.ch/files/en_templates/temp11.html
กลางจอนี่ไงจ๊ะ

อ้างอิง#content {
position:absolute;
height:200px;
width:400px;
margin:-100px 0px 0px -200px;
top: 50%;
left: 50%;
text-align: left;
padding: 0px;
background-color: #f5f5f5;
border: 1px dotted #000000;
overflow: auto;
}

แต่ช่วยอธิบายทีนะครับว่ามันเป็น iframe ตรงบรรทัดไหน :46:

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: i-poon เมื่อ 04 มิ.ย. 2007, 13:44 น.

อันนั้นเค้า Fix ขนาดเอาไว้ครับ เค้าเลยกำหนดให้ overflow: auto;
คือพอเนื้อหาข้างในมันล้นมันก็จะเติม scroll เข้าไปเอง ซึ่งถ้าเราเอาออก ผลก็จะเป็นแบบนี้ครับ

(http://img2.f0nt.com/04/b9650810775ddfafa0c126114d97daba.gif)

:05:

ป.ล. เทคนิคนี้น่าจะเอาไปทำอะไรเจ๋งๆ ได้เยอะแฮะ ขอบคุณป๋าเลย์ครับ

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: Layiji เมื่อ 04 มิ.ย. 2007, 13:58 น.

margin:-100px 0px 0px -200px;

แสดงว่า
มันกลางที่บรรทัดนี้ใช่เปล่าครับ แล้ว - 100 กับ -200 แต่ทำไมมันยังอยู่กลาง อันนี้ผมงงจริงๆ
พอรู้ว่า -200 น่าจะเกี่ยวกับความสูง แต่ -100 นี่สิ

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 04 มิ.ย. 2007, 14:08 น.

โน โน

มันกลางที่บรรทัดนี้ครับ

position:absolute; อันนี้แปลว่า ตูจะบอกพิกัดแบบ Pixel แล้วนะต่อไปนี้ (สำคัญ)
top: 50%; แล้วตำแหน่งเริ่มต้นของกล่องนี้คือ 50% ของความสูงของหน้า
left: 50%; และ 50% ของทางซ้าย

height:200px; ความสูงของกล่อง
width:400px; ความกว้างของกล่อง

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

margin:-100px 0px 0px -200px;

การกำหนดระยะของ css เวลาเรียงกันสี่ตัวมันคือ บน ขวา ล่าง ซ้าย ครับ
-100 คือบอกให้ขึ้นบน 100 นะ
ส่วน -200 คือบอกให้ไปซ้าย 200 นะ
ซึ่งระยะดังกล่าวนี่คือครึ่งหนึ่งของความกว้างความสูงของกล่องพอดี

{หมีโหด}

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: ยุนเอ เมื่อ 04 มิ.ย. 2007, 14:12 น.

โอเค ซึ้ง :25:

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: นายโอ้เอ้ เมื่อ 04 มิ.ย. 2007, 14:13 น.

ถูกต้องนะครับ ไปดูมาเพิ่งเก็ต แอนมาตอบก่อน :30:

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 04 มิ.ย. 2007, 14:16 น.

http://www.ilovejackdaniels.com/cheat-sheets/css-cheat-sheet/
เอาไอ้นี่พรินต์มาแปะไว้หน้าคอมเลยครับ
ตอนที่ตูหัด css มึนๆ ก็เอาไอ้นี่แหละเสียบไว้ในกระจก มันบอกครบดี
เอาไว้กันงงได้นะ :30:

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: today เมื่อ 04 มิ.ย. 2007, 14:19 น.

Very nice and useful CSS sheet! Thanks! :46:

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: Layiji เมื่อ 06 มิ.ย. 2007, 11:38 น.

ลอง CSS ประสบปัญหากับ IE เช่นเคย
ไม่รู้แก้ยังไงครับ

ในff
(http://img2.f0nt.com/06/2607197a60dbb929dc883cd6f3bce1b8.jpg)

ใน ie
(http://img2.f0nt.com/06/ab23c95bb5cf4e60b8e607a565ddd438.jpg)

โค้ด เลือกทั้งหมด


* { margin: 0px; }
html, body { height:100% }
body { margin: 0; padding:0; text-align:center; background:#eaeaea;}

#headerarea
{
	background-color: white;
	border-bottom: 1px solid gray;
}

#wrapper {
	min-height:100%;
	height:100%; !important;
	padding-left: 10px;
	padding-right: 10px;	
	width:932px;
	margin: 0 auto;	
	background-color: #CC0000;
	text-align:left;
	vertical-align:top;
	position:relative;
	z-index:800;
}
#mainmenu {
	float: left;
	position: relative;
	width: 630px;
	height: 24px; !important;
}
#searchmenu {
	float: right;
	height: 24px; !important;
	width: 250px;
	position: relative;
	text-align: right;
	right: 10px;
	vertical-align: middle;
}


#wrapperMenu {
	height: 24px; !important;
	width: 932px;
	position: relative;
	vertical-align: middle;
	background-image: url(../images/BGdash2.gif);
	background-repeat: repeat-x;
	float:left;
}
.searchInput {
	font-family: tahoma;
	font-size: 12px;
	color: #666666;
	background-color: #eaeaea;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
.searchButton {
	font-family: tahoma;
	font-size: 12px;
	color: #666666;
}

#banner{
	width:932px;
	height:auto;
	margin:0;
	position:relative;
	float:left;
}
#headerarea{
	width:932px;
	padding:0;
	margin:0;
	position:relative;
	float:left;
	background-color:#FFFFFF;

	}
.smalltext {
	font-family: tahoma;
	font-size: 12px;
	color: #999999;
}

ตอนใช้

โค้ด เลือกทั้งหมด

<body>
<div id="wrapper">
<div id="headerarea">
      <div id="banner"> <img src="รูป" >
      </div><br>

<div id="wrapperMenu">
	<div id="mainmenu"> ปุ่ม Link </div>					
	<form action="xxx" style="margin: 0pt;">
            <div id="searchmenu"> 
                <input name="search" value="" class="searchInput" size="20" type="text">
		<input name="submit" value="ค้นหา" class="searchButton" type="submit">
		<a href="xxx" class="smalltext">ขั้นสูง</a>
	        <input name="advanced" value="0" type="hidden">


				  
	</div></form>
				  
</div>
		
		
</div>	
		
    
</div>

</body>

:05: ช่วยด้วยครับ
ไฟล์อยู่ด้านล่าง

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: i-poon เมื่อ 06 มิ.ย. 2007, 15:50 น.

อ้างอิง#wrapperMenu {
   height: 24px; !important;
   width: 932px;
   position: relative;
   vertical-align: baseline;
   background-image: url(../images/BGdash2.gif);
   background-repeat: repeat-x;
   float:left;
}

#banner{
   width:932px;
   height:auto;
   margin:0;
   position:relative;
   float:left;
   vertical-align: baseline;
}

ลองดูครับป๋า :22:

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: Layiji เมื่อ 06 มิ.ย. 2007, 18:38 น.

โอ้ว ได้ล่ะครับ ปรับ top 2 อันก็ไม่ได้หรือนี่ต้อง Baseline เท่านั้น :41:

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: Layiji เมื่อ 06 มิ.ย. 2007, 19:45 น.

ขอเบิ้ลด้วยปัญหา IE อีกเช่นเคย
(http://img2.f0nt.com/06/e10706b72f1d9f41efac99d57ec9b460.gif)

(http://img2.f0nt.com/06/32562475f1f64a7ba075784982f3613d.gif)

โค้ด เลือกทั้งหมด

#wrapperAvatar {
	float: left;
	height: auto;
	width: 100%;
	text-align: left;
	margin: 0px;
	padding: 0px;
}
#avatarArea {
	background-color: #CCCCCC;
	float: left;
	width: 450px;
	margin: 10px 0px 20px 20px;
	min-height: 100px;
!important;
	height:auto;
	padding: 5px;
}

ตอนใช้นี่ผม
ห่อใหญ่ แล้ว เอาซองเล็กยัดอีกที

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: Layiji เมื่อ 06 มิ.ย. 2007, 20:56 น.

อ๊ะ ได้แล้วครับ เปลี่ยนจาก margin เป็น placement แทน

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 06 มิ.ย. 2007, 22:02 น.

placement คืออะไร ใช้ยังไงครับ :09:

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: poloh เมื่อ 06 มิ.ย. 2007, 22:23 น.

โอ๊ะ สาระเยอะหลาย แต่งงดีแท้ครับ :31:

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: i-poon เมื่อ 06 มิ.ย. 2007, 22:26 น.

placement คืออะไรหว่า {หมีโหด} ???

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: Layiji เมื่อ 07 มิ.ย. 2007, 01:21 น.

(http://img2.f0nt.com/07/35d8b20bc59b40152b7ef0d7f571f8dd.gif)

ก็อยู่ในส่วนของ position แหละครับ ต่างจาก magin หน่อยนึงคือ

margin เหมือนจะอิงจากกรอบก่อน แล้วถึงขยายออกไป
placement จะเหมือนโยกทั้งก้อน Div เลย
ผลเหมือนกันใน FF แต่ IE :13:

มันก็คือ
ตัวอย่าง placement

Top :30px;

ตัวอย่าง margin

margin-top: 30px;

เรื่องงงๆของผมเองครับ สงสัยใช้ศัพท์ผิดไปหน่อยหรือเปล่า :42:

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 07 มิ.ย. 2007, 01:24 น.

อ๋อ ครับ ใช้ศัพท์งง :30:

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: จักรี เมื่อ 07 มิ.ย. 2007, 01:27 น.

:30: อ๋อ ที่จริง ศัพท์ไม่งง หรอก แต่ ผมไม่เคยเรียก ก็เลยดูแปลกใหม่ เหมือนไม่เคยได้ยิน :08:

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: กากก่อเกรียนนู้บ เมื่อ 07 มิ.ย. 2007, 01:45 น.

โอ้ว ขอบคุณมากๆ เลยครับ
ปกติผมใช้ Dreamweaver เอาน่ะครับ มันเด้งขึ้นมา ผมก็จิ้มๆ เอาตามนั้น - -"
แต่อันแปลกๆ ก็ใช้ไม่เป็นเหมือนกันครับ

แฮะๆ ชอบๆ

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 07 มิ.ย. 2007, 01:47 น.

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

อวดรู้: สลับหน้าโค้ดกับหน้า design ได้โดยกด Alt+~

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: i-poon เมื่อ 07 มิ.ย. 2007, 02:08 น.

พี่แอนเอา Key นั้นมาจากไหนอ่ะพี่ ผมหามาตั้งนานนม :41:

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 07 มิ.ย. 2007, 02:12 น.

:30: ตูก็เจอแบบฟลุกๆ แหละ

หามานานนมโตเหมือนกัน นี่ถือเป็นความสำเร็จนึงของชีวิตเลยนะ
(แต่สลับโหมดใน Fireworks นี่ยังหาไม่เจอ)

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: i-poon เมื่อ 07 มิ.ย. 2007, 02:19 น.

พวก hotkey ลับๆ ที่รู้กันแค่ครอบครัวของคนเขียนโปรแกรม ส่วนมากมักจะเป็น Hotkey ที่สำคัญๆ ทั้งนั้นเลยนะครับ :39:

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: จักรี เมื่อ 08 มิ.ย. 2007, 02:15 น.

ไม่รู้ซิ ไม่รู้ว่าผมรู้มาจากไหน แต่ รู้แค่ว่า รู้ แต่นึกไม่ออกว่ารุ้มาจากไหน

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: iSharp เมื่อ 08 มิ.ย. 2007, 15:42 น.

ไม่ค่อยรู้เรื่อง แต่ก็ตามศึกษาครับผม

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 11 มิ.ย. 2007, 03:56 น.

http://www.csseasy.com
เว็บนี้เขาเปิดให้ลอกเลย์เอาต์เลยครับ
โดยคลิกเข้าไปในแบบที่ชอบแล้วก็ View Source มาเลย ไม่ว่ากัน

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 12 มิ.ย. 2007, 00:47 น.

http://24ways.org/2006/gravity-defying-page-corners
ใส่เงาให้กับกล่องข้อความด้วย css

http://24ways.org/2006/rounded-corner-boxes-the-css3-way
วิธีทำกล่องข้อความแบบมุมมนที่ง่ายที่สุด! (มองหาลิงก์ตัวอย่างเอาเองนะ)

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: Layiji เมื่อ 12 มิ.ย. 2007, 01:44 น.

:07: สุดยิด

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: ooooo เมื่อ 13 มิ.ย. 2007, 19:48 น.

โอ้วส์.... เพิ่งจะรู้ว่ามันใช้ comma ไปดุ้นๆได้เลย :25:

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: หนุ่ม เมื่อ 13 มิ.ย. 2007, 20:29 น.

เจ๋ง :12:

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 13 มิ.ย. 2007, 20:50 น.

เออ สงสัยเหมือนกันว่าไอ้คอมม่าดุ้นๆ นั่นมันมีวิธีใช้ยังไงเหรอ :09:

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: ooooo เมื่อ 14 มิ.ย. 2007, 05:43 น.

โค้ด เลือกทั้งหมด

.box {
  background-image: url(top-left.gif), url(top-right.gif), url(bottom-left.gif), url(bottom-right.gif);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: top left, top right, bottom left, bottom right; }

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 14 มิ.ย. 2007, 17:44 น.

:18: โอ้ว เขิ้วจึยละ

:41:

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: Layiji เมื่อ 14 มิ.ย. 2007, 19:58 น.

เกิดปัญหานี้ครับ
wrapper สูง100% แต่เวลา scoll แล้วไม่สุดจริง
(เกิดเฉพาะ FF IE ไม่เป็น อ้าว)

(http://img2.f0nt.com/14/8b3604eb02c59b4e9f96555a0c145e92.jpg)

เว็บอยู่ที่นี่ครับ www.siamrivercruise.com/barge.html

รบกวนด้วยนะครับ

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: i-poon เมื่อ 15 มิ.ย. 2007, 00:58 น.

ดูในเครื่องผมปกตินะครับ (ff 1.5 นะ)

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: คุณชาย ( 737 ) เมื่อ 15 มิ.ย. 2007, 13:35 น.

ดูในเครื่องผมก็ปกติเหมือนกันครับ FF 2.0.0.3

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: นายโอ้เอ้ เมื่อ 15 มิ.ย. 2007, 13:40 น.

คงแก้ได้แล้วหน่ะครับ :31:

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: Layiji เมื่อ 15 มิ.ย. 2007, 17:30 น.

ครับ แก้แล้วครับ เหมือนคำว่า 100% จะยืดได้ยาวสุดเท่าจอสามารถเห็นได้โดยไม่ต้อง scoll (คือใช้ได้กับ เนื้อหาที่สั้นกว่าความสูงของจอ ) แต่ถ้าเนื้อหาเกิน จนต้อง scoll ก็ไม่ต้อง 100%

เลยแก้แบบกำปั้นทุบดินเลยครับ div แยกมาเลย :07:

แต่สงสัยว่าถ้า เนื้อหามันเป็นเหมือน webboard จะยืดมันยังไงถ้ามันเกิน 100% ของจอ

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: i-poon เมื่อ 15 มิ.ย. 2007, 23:46 น.

<table> ครับ :02:

จริงๆ นะ

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 16 มิ.ย. 2007, 00:06 น.

:11:

(ไม่รู้เหมือนกันแฮะ สูตรยืดหน้าแบบในจู๋นี้หน้าแรกก็ใช้ไม่ได้ :44:)

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 10 ก.ค. 2007, 00:10 น.

http://www.thaicss.com/main/condition_ie_comment.html
เผื่อใครยังไม่รู้ (เพราะตูก็ไม่รู้)
CSS Hacks แสดงวิธีแก้ปัญหาเมื่อต้องเจอ IE :13:

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: i-poon เมื่อ 10 ก.ค. 2007, 01:12 น.

มีทุก version เลย อย่างฮา :30:

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: Black-Pigeon เมื่อ 12 ก.ค. 2007, 13:06 น.

โอย...สุดยอดเลย
ตอนนี้หาเวลาว่างอันน้อยนิดจากการเป็นทหาร พยายามรื้อฟื้น CSS อยู่
ขอบคุณทุกๆคนครับ ที่สรรหาอะไรมาเยอะแยะมากๆ :25:

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 27 ก.ค. 2007, 05:47 น.

CSS Specificity
http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

บทความบ้าอะไรกันเนี่ย :07:

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: pugpug : นนทกร เมื่อ 27 ก.ค. 2007, 17:08 น.

มาขอแปะครับ :46:

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: 蓝月 (lán yuè) เมื่อ 29 ก.ค. 2007, 21:19 น.

ซิ้มจะยอมเหรอคะ :07:

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 29 ก.ค. 2007, 21:53 น.

จักรี :07:

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 30 ก.ค. 2007, 06:47 น.

http://www.designmeme.com/articles/dropshadows/
ใส่เงาให้ตัวอักษร แบบที่ใช้ได้กะทุกเบราเซอร์ (ยกเว้น...)

http://alistapart.com/articles/customunderlines/
ใช้ภาพหรือเส้นที่ออกแบบเองมาเป็นเส้นใต้ :12:

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: pugpug : นนทกร เมื่อ 30 ก.ค. 2007, 12:38 น.

อ้างคำพูดจาก: 藿月 (lán yuè) เมื่อ 29 ก.ค. 2007, 21:19 น.
ซิ้มจะยอมเหรอคะ :07:

ตอนแรกก็งง :21:

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 05 ส.ค. 2007, 19:47 น.

http://www.roundedcornr.com/
Generate กรอบภาพแบบมนๆ กับปุ่มมนๆ

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 06 ส.ค. 2007, 16:18 น.

http://www.blognone.com/node/5472
มินิรีวิว Blueprint CSS Framework | Blognone

อ่านๆ แล้วรู้สึกว่ามันโคตรเจ๋งเลยครับ
เทียบกะ ActionScript ก็คงราวๆ MC Tween
หรือเทียบกะ JavaScript ก็ประมาณ MooTools
แต่อันนี้เป็นการอวตารของเทพในภาค CSS

ซึ่งตูไม่รู้เรื่องเลยสักกะเสี้ยว :08:

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: i-poon เมื่อ 07 ส.ค. 2007, 01:21 น.

อ้างคำพูดจาก: iannnnn เมื่อ 06 ส.ค. 2007, 16:18 น.
http://www.blognone.com/node/5472
มินิรีวิว Blueprint CSS Framework | Blognone

อ่านๆ แล้วรู้สึกว่ามันโคตรเจ๋งเลยครับ
เทียบกะ ActionScript ก็คงราวๆ MC Tween
หรือเทียบกะ JavaScript ก็ประมาณ MooTools
แต่อันนี้เป็นการอวตารของเทพในภาค CSS

ซึ่งตูไม่รู้เรื่องเลยสักกะเสี้ยว :08:

อ่านแล้วเข้าใจครับ

เข้าใจว่าผมโง่มาก {หมีโหด}

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: Maggot เมื่อ 07 ส.ค. 2007, 18:12 น.

http://www.blognone.com/node/5489
blognone | Submitted by tr

อันนี้เด็ดมากครับ :12:

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 07 ส.ค. 2007, 21:00 น.

เอาใส่มันหน้าแรกเลยดีไหม {หมีโหด}

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: ej_sing เมื่อ 16 ส.ค. 2007, 01:14 น.

ถามครับ ตอนนี้ลองทำแต่ warpper มันไม่ยอมยืด 100%
( Firefox มันยืดแค่พอดีหน้าจอ ถ้าเลยกว่านั้นไม่ยืด)

แต่ใน IE มันโอเคอย่างที่ต้องการซะงั้นครับ :08:
รบกวนหน่อยครับ

โค้ด เลือกทั้งหมด



* {margin: 0;}
html, body {height: 100%;}
body { margin: 0; padding: 0; text-align: center; background-color:#003366}

#wrapper { 
margin: 0 auto; 
text-align: left; 
width: 800px; 
min-height: 100%; 
height:auto; !Important
height:100%;
background: #ccff00;
}

* html #wrapper { height: 100%;}

#leftmenu{
width:170px;
float:left;
position:fixed;
background-color:#CCCCCC;
}

#maincontent{
width:620px;
background-color:#dddddd;
float:right;
padding:5px;
height:100%;
}

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 16 ส.ค. 2007, 01:44 น.

http://f0nt.com/forum/index.php?topic=10123.msg630311#msg630311
ลองดูอันนี้ยังครับ

(ยังไม่กล้าโหลดมาดู กลัวตอบผิด)

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: ej_sing เมื่อ 16 ส.ค. 2007, 01:51 น.

ครับ ผมเริ่มจากอันที่คุณ iannnnn ทำตัวอย่างนั่นแหล่ะครับ
และพอใส่ maincontent ตรงกลาง ยังยืดอยู่ถูกต้อง

แต่พอใส่ครบ ที่ IE แสดงผลได้อย่างที่ตั้งใจครับ

แต่ที่ FF ตัว warpper มันยืดลงไปไม่สุด (สุดแค่ขอบจอ)
แก้มาหลายเพลาแล้วครับ หาไม่เจอว่าติดตรงใหน

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: ej_sing เมื่อ 16 ส.ค. 2007, 09:00 น.

ทำได้แล้วครับ ขอบคุณครับ
แค่เพิ่ม overflow:auto; เข้าไป (มั่วๆเล็กน้อย)
ยังไม่เข้าใจคำสั่งนี้เท่าไรครับ
overflow:auto; มันคืออะไรครับ

อ้างคำพูดจาก: ej_sing เมื่อ 16 ส.ค. 2007, 01:14 น.
ถามครับ ตอนนี้ลองทำแต่ warpper มันไม่ยอมยืด 100%
( Firefox มันยืดแค่พอดีหน้าจอ ถ้าเลยกว่านั้นไม่ยืด)

แต่ใน IE มันโอเคอย่างที่ต้องการซะงั้นครับ :08:
รบกวนหน่อยครับ

* {margin: 0;}
html, body {height: 100%;}
body { margin: 0; padding: 0; text-align: center; background-color:#003366}

#wrapper {
margin: 0 auto;
text-align: left;
width: 800px;
min-height: 100%;
height:auto; !Important
height:100%;
background: #ccff00;
overflow:auto;
}

* html #wrapper { height: 100%;}

#leftmenu{
width:170px;
float:left;
position:fixed;
background-color:#CCCCCC;
}

#maincontent{
width:620px;
background-color:#dddddd;
float:right;
padding:5px;
height:100%;
}

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 16 ส.ค. 2007, 09:16 น.

แปลตามตัวเลยนะครับ :31:
"ถ้าล้น ก็จัดการไปเลยตามอัตภาพ" (แปลว่า มี Scrollbar ให้ด้วยนะ)

แต่ถ้า overflow: hidden นี่คือ ถ้าล้นก็หมกไว้ไม่ต้องปล่อยให้เกินขอบ

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: Maggot เมื่อ 17 ส.ค. 2007, 10:37 น.

เมื่อวานทำ stylesheet แล้วมีปัญหากับ ie เลยไปหาวิธีแก้มาได้วิธีนึง ไม่รู้ว่ารู้กันรึยัง :08: แต่ผมเพิ่งรู้นะเลยเอามาแปะๆ ไว้

ถ้าต้องการให้ stylesheet บางตัวทำงานเฉพาะใน ie ให้ใส่ if ไว้ใน head ได้ เช่น

โค้ด เลือกทั้งหมด

<!--[if IE]>
     <style>
          .fieldset {
              position: relative;
          }
          .legend {
              position: absolute;
              top: -0.5em;
              left: 0.2em;
          }
     </style>
<![endif]-->

จากอันนี้คือวิธีแก้ fieldset ใน ie ซึ่งมันจะมีสี background ล้นออกมานอกกรอบ แน่นอนว่าใน ff / safari มันปกติ ถ้าใส่ position ตามข้างบนนี้ ใน ff / safari จะเละ เลยต้องกำหนดให้พวกนี้แสดงเฉพาะใน ie นะ

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 17 ส.ค. 2007, 13:58 น.

ไอ้ตัวนั้นเขาเรียกว่า แท็กคอมเมนต์แบบไม่ธรรมดาครับ
คือกำหนดเงื่อนไขที่จะแสดงผลแต่ละบราวเซอร์ได้เลย

ตัวอย่างจากอันนี้

อ้างอิง<p>









</p>

ที่มา http://www.quirksmode.org/css/condcom.html

สังเกตมีบางอันบอกว่า ถ้าสูงกว่า หรือถ้าห่วยกว่าด้วยแหละ
ถ้าเอามาประยุกต์ใช้กะ css แบบโหลดภายนอกเนี่ย ก็เลือกใช้เป็นชุดๆ เลยก็ได้ครับ

โค้ด เลือกทั้งหมด

<![if !IE]>
<link rel="stylesheet" type="text/css" href="not-ie.css" />
<![endif]>

ไม่ใช่ไออี :13:

โค้ด เลือกทั้งหมด

<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

ใช่ไออี :13:

รู้สึกว่าศัพท์เฉพาะของ CSS เขาเรียก IE Hack ครับ :12:

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: Maggot เมื่อ 17 ส.ค. 2007, 14:35 น.

:22: +

ขอบคุณครับ

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 17 ส.ค. 2007, 19:03 น.

แล้วก็เจอเว็บ(บล็อก) CSS ในฝัน

DivLand (http://www.divland.com/)
Divland.com : CSS gallery, Blog, Archives, Web2.0, Style sheet, สไตล์ชีท, Webdesign, CSS

:25: :25: :25: (ดูดฟีดโลด)

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: ej_sing เมื่อ 17 ส.ค. 2007, 23:54 น.

ถามเพิ่มเติมคุณแอน
ว่าถ้า สมมุติเปิดเว็บด้วย mobile Phone
เราสามารถให้มันออโต้เลือก css ที่เราทำสำหรับ mobile ได้ไหมครับ

เช่นถ้าเปิดด้วย mobilephone ให้ใช้ mobile.css ถ้าไม่ใช่ ก็ใช้ main.css ตัวปรกติ

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 18 ส.ค. 2007, 00:45 น.

ไม่รู้ครับ :12:
เกิดมายังไม่เคยคิดจะทำอะไรกะมือถือเลย :08:
กระทั่งเปิดเว็บก็ยังไม่เคย

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: ej_sing เมื่อ 18 ส.ค. 2007, 11:05 น.

อะโช๊ะ !!! ไปหาอ่านมาแล้วครับ
เห็นว่ามีประโยชน์มากๆ

เพราะต่อไป เผื่อ แพลทฟอรมเล็กๆอย่างพวก โทรศัพท์พกพา จะใช้ edge กันมากขึ้น
คือเปิดอินเตอร์เนทดูจากโทรศัพท์เลย จอมันเล็ก แถมช้า เพราะระบบเฮงซวยของบ้านเรา
เราก็ทำ design css สำหรับ handheld มารองรับ เอาไว้
เอาใจพวกใช้อินเตอร์เนทผ่านโทรศัพท์ น่ะแหล่ะ

มีหลายแบบให้สั่งได้ เช่น

โค้ด เลือกทั้งหมด

<link rel="stylesheet" href="css-thaicss/main.css" type="text/css"  media="screen" />
<link rel="stylesheet" href="css_xhtml/thaicss_xhtml_print.css" type="text/css" media="print" />
<link rel="stylesheet" href="css_xhtml/thaicss_xhtml_mobile.css" type="text/css" media="handheld" title="Style for Mobile and Handheld" />

@media all{}
@media screen{} อันนี้ก็หมายถึง จอปรกติ
@media handheld{} โทรศัพท์พกพา (ไม่รู้รวมไปถึงพวก PDA ด้วยหรือปล่าว)
@media print{} เวลาสั่ง print ให้ใช้ css ตัวนี้

ที่มา http://www.thaicss.com/main/css_for_printer.html

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 18 ส.ค. 2007, 17:23 น.

:25:+

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: i-poon เมื่อ 18 ส.ค. 2007, 23:08 น.

อ้างคำพูดจาก: iannnnn เมื่อ 17 ส.ค. 2007, 19:03 น.
แล้วก็เจอเว็บ(บล็อก) CSS ในฝัน

DivLand (http://www.divland.com/)
Divland.com : CSS gallery, Blog, Archives, Web2.0, Style sheet, สไตล์ชีท, Webdesign, CSS

:25: :25: :25: (ดูดฟีดโลด)

ไม่คิดไม่ฝันว่าจะเป็นเว็บไทย :18:!!!!

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: Layiji เมื่อ 19 ส.ค. 2007, 00:40 น.

:25: :25: :25:

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 25 ส.ค. 2007, 23:47 น.

(กระจู๋นี้ได้ใช้ประโยชน์บ่อยจริงๆ ด้วย)

http://www.emanueleferonato.com/2007/08/22/create-a-lightbox-effect-only-with-css-no-javascript-needed/
คงเคยเห็นการทำเอฟเฟกต์แบบ LightBox ใช่ไหมครับ
อันนั้นมันต้องอาศัย Javascript ด้วย แต่อันนี้เป็น css เพียว

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: 蓝月 (lán yuè) เมื่อ 26 ส.ค. 2007, 00:07 น.

อ้างคำพูดจาก: Maggot เมื่อ 07 ส.ค. 2007, 18:12 น.
http://www.blognone.com/node/5489 (http://www.blognone.com/node/5489)
blognone | Submitted by tr

อันนี้เด็ดมากครับ :12:

เปิดปุ๊บ Active Virus Shield ฟ้องว่าโทรจันทันทีเลย :08:

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 28 ส.ค. 2007, 01:40 น.

http://www.vikiworks.com/2007/08/24/a-nice-pullquote/
Vikiworks™ Studio » A nice pullquote

ใส่ Quote แบบลอยๆ ลงบนหน้าเนื้อหา ออกมาแล้วดูดีเลยนะ :12:
(ข้างในมีลิงก์เชื่อมไปอีกสไตล์นึง ลองหาดู)

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 28 ส.ค. 2007, 02:02 น.

http://www.smashingmagazine.com/2007/01/19/53-css-techniques-you-couldnt-live-without/
53 CSS-Techniques You Couldn't Live Without | CSS

แหม สะแม้ดชิ่งอันนี้มันเด็ดดวงดีจริงๆ
ขอคัดอันที่ตัวเองคิดว่าเจ๋งจนอยากเก็บไว้มาแปะเลยนะครับ

http://www.mandarindesign.com/troops.html#opacitybackgroundhard
Mandarin Design: Text Tricks
ทำพื้นหลังที่เป็นภาพให้ใสจะได้อ่านข้อความได้ง่าย (หมาย่าง+ไออี :13:)
ใครใช้แมคลองเทสต์หน่อยครับว่าเวิร์กไหม

http://couchfort.net/article/59/css-curves
couchfort.net » CSS Curves
เหมือนการจัดหน้ากระดาษ เวลามีภาพไดคัตมาก็ต้องพิมพ์ตัวหนังสือหลบเป็นโค้งๆ ใช่มะ
ฉันใดก็ฉันนั้น เราสามารถสร้างกล้องเปล่าๆ มาทำให้ตัวหนังสือหลบภาพได้เช่นกัน

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 28 ส.ค. 2007, 02:22 น.

ต่อๆ

http://mikecherim.com/experiments/php_style_changer.php?GimmeStyle=default.css
PHP: Style Changer | Mike's Experiments | MikeCherim.com
ใช้ php เปลี่ยนชุด css แบบจำค่าคุกกี้ได้ด้วย :18:
(ตูเคยถามป้าหน่อยประมาณนี้แหละ อยากให้เว็บ ผจก มันทำงี้มั่งจะได้อ่านง่ายๆ หน่อย)

http://www.smashingmagazine.com/2006/11/11/css-based-forms-modern-solutions/
CSS-Based Forms: Modern Solutions | CSS
ตกแต่ง <form> ด้วย css (มีหลายอันให้เลือกดู เจ๋งๆ ทั้งนั้น)

http://www.smashingmagazine.com/2006/12/29/css-based-tables-modern-solutions/
ส่วนอันนี้ก็เป็นตารางแบบ css

http://css-discuss.incutio.com/?page=PrintStylesheets
Print Stylesheets - css-discuss
เทคนิคการวาง css เพื่อการสั่งพรินต์

http://www.colly.com/index.php?/weblog/comments/ticked_off_links_reloaded
CollyLogic: Ticked-off visited links Reloaded
เปลี่ยน visited link ให้มีเครื่องหมายถูกติ๊กอยู่ข้างหลัง

http://webdesign.maratz.com/lab/visited_links_styling/
The ways to style visited links
นี่ก็ด้วย

http://webdesign.maratz.com/lab/pdf_links_labeling/
PDF Link Labeling
ใส่ไอคอนแสดงประเภทของไฟล์ที่จะกดโหลดได้ท้ายลิงก์ (+javascript)

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: N เมื่อ 29 ส.ค. 2007, 23:07 น.

ผมชอบมากๆ ครับ เว็บนี้ มีข้อมูลครบถ้วนดีมากครับ
http://developer.mozilla.org/en/docs/Category:CSS :12:

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: ooooo เมื่อ 03 ก.ย. 2007, 17:58 น.

ให้ scrollbar มีสีใน Firefox
http://zeit.ca/external/gecko-coloured-scrollbar-experiment.html

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 03 ก.ย. 2007, 18:02 น.

ใน IE7 ก็เป็นนะ :18:

ใครใช้ IE6 :13: ช่วยทดสอบหน่อยครับ

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: ooooo เมื่อ 03 ก.ย. 2007, 18:14 น.

ใช้ได้ครับ :45:

(น่าเ้สียดายที่ Firefox มันแสดงผลได้แค่ตอนที่เอามาส์อยู่ข้างนอก
พอ hover มันทำไม่ได้ เพราะโดน z-index ดักไว้อยู่)

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: N เมื่อ 03 ก.ย. 2007, 18:50 น.

อ้างคำพูดจาก: มิตร สัมพันธ์ เมื่อ 03 ก.ย. 2007, 17:58 น.
ให้ scrollbar มีสีใน Firefox
http://zeit.ca/external/gecko-coloured-scrollbar-experiment.html

เจ๋งจริงๆ ครับ

ลองใช้โค้ดนี้ดูครับ ถ้าไม่อยากให้ใครใช้ IE เข้าเว็บลองโค้ดนี้ดูครับผม

โค้ด เลือกทั้งหมด

body {
	filter: fliph;
}
#noie {
	filter: fliph;
	position: absolute;
	top: 1em;
	left: 1em;
	background: #fff;
	color: #000;
	padding: 1em;
	z-index: 99;
}
#noie:not(:hover), #noie:hover {
	display: none;
}

แล้วสร้าง div ที่มี ID เป็น noie ครับ ใส่ข้อความขับไล่คนใช้ IE แล้วลองรันใน IE ดูครับ

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 03 ก.ย. 2007, 19:03 น.

เอากันให้ตายว่างั้น :30:

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 04 ก.ย. 2007, 03:33 น.

http://www.cssdrive.com/index.php/main/csscompressor/
CSS Drive Gallery- CSS Compressor

เว็บบีบอัด css อีกแล้ว
รู้สึกอันนี้จะดีหน่อย มีให้เลือกหลายรส

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: N เมื่อ 04 ก.ย. 2007, 06:46 น.

อ้างคำพูดจาก: iannnnn เมื่อ 04 ก.ย. 2007, 03:33 น.
http://www.cssdrive.com/index.php/main/csscompressor/
CSS Drive Gallery- CSS Compressor

เว็บบีบอัด css อีกแล้ว
รู้สึกอันนี้จะดีหน่อย มีให้เลือกหลายรส

มี Advanced Mode ด้วย ของเขาดีจริงๆ :35:

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: N เมื่อ 04 ก.ย. 2007, 16:38 น.

http://www.w3.org/TR/REC-CSS2/visuren.html

น่าอ่านเหมือนกันนะนี่ :02:

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: K. เมื่อ 04 ก.ย. 2007, 16:57 น.

อ้างคำพูดจาก: the DtTvB เมื่อ 04 ก.ย. 2007, 16:38 น.
http://www.w3.org/TR/REC-CSS2/visuren.html

น่าอ่านเหมือนกันนะนี่ :02:

งงครับ
อ่านไม่รู้เรื่อง(อังกฤษ)

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: N เมื่อ 05 ก.ย. 2007, 22:56 น.

ไม่แน่ใจนะครับว่าเคยมีใครโพสต์ไว้หรือยัง
สุดยอดเว็บรวมบั๊กใน IE ... คนทำเว็บระวังกันด้วยนะครับ
http://www.positioniseverything.net/explorer.html

ป.ล. เว็บนี้ผมก็ชอบเหมือนกันครับ มีข้อมูลเกี่ยวกับเบราเซอร์เกือบทั้งหมดเลย
http://www.webdevout.net/browser-support-css

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: ekn8 เมื่อ 06 ก.ย. 2007, 23:07 น.

โอ้วววว Dt ข้อมูลเยอะดีจัง :12:

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 09 ก.ย. 2007, 00:23 น.

http://iannnnn.com/2007/449
จบปัญหาการออกแบบหน้าเว็บ(พื้นฐาน) ที่ต้องต่อสู้กับ IE และ CSS
ด้วย YAML Builder :12:

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 18 ก.ย. 2007, 19:12 น.

http://cssmenumaker.com/index.php
CSS Menu Generator

1. เลือกเมนูแบบที่ต้องการ
2. ปรับแต่ง
3. โหลด
4. แฮ่

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 22 ก.ย. 2007, 02:39 น.

http://www.smashingmagazine.com/2007/01/12/free-css-layouts-and-templates/
อ่าน Smashing ตอนล่าสุด เขามีลิงกไปที่ตอนนี้
พอกดไปดู โอ้ว มี Layouts แจกเป็นร้อยเลยง้าฟ :07b:

http://tools.i-use.it/
อันนี้เอาไว้เลือกแบบเลย์เอาต์เบื้องต้นที่ต้องการ มีแม่แบบดีๆ เพรียบบบ

แถมอันนี้อีกอันนึง

http://www.crucialwebhost.com/blog/master-stylesheet-the-most-useful-css-technique/
Crucial Web Hosting » Blog » Master Stylesheet: The Most Useful CSS Technique
ค่า css มาตรฐานที่นักออกแบบเว็บมือใหม่มือเก่าน่าจะเอาไปใช้เป็น Default

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: ooooo เมื่อ 23 ก.ย. 2007, 01:38 น.

(http://www.bittbox.com/wp-content/uploads/2007/09/iPhone_contest.jpg)

แข่งขันสร้างเมนูงามๆ โดยใช้ CSS
ใครชนะได้ iPhone 4 จิ๊กไป
(หมดเขต 17 ตุลา)

http://cssmenumaker.com/contest.php

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 23 ก.ย. 2007, 01:53 น.

^
^
ไม่เห็นรูปครับ

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: คิ้วหนาจ้ะ เมื่อ 23 ก.ย. 2007, 01:54 น.

ก็ปกตินิ :09:

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 23 ก.ย. 2007, 02:02 น.

อ้าว ตกลงมันเป็นสีน้ำตาลๆ งี้เลยเหรอ :03:
ทีแรกก็คิดว่าแปะรูปไอโฟน แล้วเขาไม่ให้ดูดรูปซะอีก

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: คิ้วหนาจ้ะ เมื่อ 23 ก.ย. 2007, 02:04 น.

น้ำตาลไงหว่า :08:
ที่ตูเห็นมันเป็นตัวอย่างเมนูด้านซ้าย ด้านขวาเป็น iphone อะนะ

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 23 ก.ย. 2007, 02:12 น.

อ้อ รู้ละๆ
มันเป็นเรื่องของโดเมนเหมือนเดิม

(http://www.bittbox.com/wp-content/uploads/2007/09/iPhone_contest.jpg)
นี่ที่ตูเห็น (url มี www)

(http://bittbox.com/wp-content/uploads/2007/09/iPhone_contest.jpg)
นี่ที่เห็นในเว็บ (url ไม่มี www)

พอๆ เป๋ๆ

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: i-poon เมื่อ 23 ก.ย. 2007, 02:39 น.

ผมมองไม่เห็นทั้งคู่เลย :08:

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: ยุนเอ เมื่อ 23 ก.ย. 2007, 02:40 น.

เห็นหมดเลย (ว๊าย โป้ :27: )

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: นายโอ้เอ้ เมื่อ 23 ก.ย. 2007, 02:40 น.

อ้างคำพูดจาก: i-poon เมื่อ 23 ก.ย. 2007, 02:39 น.
ผมมองไม่เห็นทั้งคู่เลย :08:

ลืมตาสิ

(http://www.f0nt.com/forum/index.php?action=dlattach;attach=15263;type=avatar)

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: i-poon เมื่อ 23 ก.ย. 2007, 02:50 น.

ลืมก็ได้ครับ :11:

(http://img2.f0nt.com/23/f5741094568c7f9b92df310d53ab88e9.gif)

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: นายโอ้เอ้ เมื่อ 23 ก.ย. 2007, 02:51 น.

:30: :30: :30:

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 23 ก.ย. 2007, 02:57 น.

ลืมตาได้ไง เนรคุณ :11:

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: นายโอ้เอ้ เมื่อ 23 ก.ย. 2007, 03:02 น.

เอไปอยู่ไหนเนี่ย ไม่มาดูแล {หมีโหด}

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: ยุนเอ เมื่อ 23 ก.ย. 2007, 03:30 น.

เอไม่เคยลืมตาเลยนะ :25:

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: Ou! เมื่อ 23 ก.ย. 2007, 12:57 น.

ลืมไปเถอะครับ ผมจะได้ดูแทน

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 10 ต.ค. 2007, 19:37 น.

http://www.positioniseverything.net/articles/pie-maker/pagemaker_form.php
CSS Layout Generator
ถูกต้องตามหลักโภชนาการมาตรฐานฝรั่งครับ

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: ต้น เมื่อ 11 ต.ค. 2007, 03:02 น.

สุดยอดของเดือนกันยายน

http://www.smashingmagazine.com/2007/10/10/best-of-september-2007/

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: N เมื่อ 11 ต.ค. 2007, 19:41 น.

อ้างคำพูดจาก: นาวิน อินเทรนด์ เมื่อ 11 ต.ค. 2007, 03:02 น.
สุดยอดของเดือนกันยายน
http://www.smashingmagazine.com/2007/10/10/best-of-september-2007/

สุดยอดมากครับ :45:

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 13 ต.ค. 2007, 23:04 น.

ข่าวดี

http://n-blue.nblogz.net/css3-web-font
เราสามารถฝังฟอนต์ลงในเว็บได้แล้ว ด้วย css3 :25:

ข่าวร้าย

ยังไม่มีบราวเซอร์ฮิตๆ ที่ไหนเลยที่สนับสนุน :08:
คงต้องรออีกหลายปี กว่าชาวบ้านชาวช่องจะเลิกใช้ IE7 :13: หรืออะไรโบราณๆ ยังงี้

ชื่อเรื่อง: Re: CSS เด็ดๆ
โพสต์โดย: หนุ่ม เมื่อ 14 ต.ค. 2007, 20:46 น.

ข่าวร้ายจริงๆ

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 18 ม.ค. 2008, 03:42 น.

http://www.webdesignerwall.com/tutorials/css-gradient-text-effect/
CSS Gradient Text Effect

ทำตัวอักษรไล่สีเมทัลลิกในเว็บ แบบอาร์ตเวิร์กของ iPhone! :07:
(ทำเป็นลืมๆ IE6 :13: ไปเหอะเนอะ)

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 18 ม.ค. 2008, 23:25 น.

เบิ้ลสร้างกระแส

http://cssglobe.com/lab/textgradient/
Css Trick - Pure Css Text Gradients
อันนี้ใช้กะ IE6 :13: ได้ด้วยจ้ะ

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: หนึ่ง เมื่อ 23 ม.ค. 2008, 13:59 น.

ของเค้าดีจริง ๆ
ปล. มีชมรมเกลียด ie6 มั้ยเนี่ย :41:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 23 ม.ค. 2008, 14:06 น.

เมื่อวานนี้เลยครับ เมื่อวาน

ลูกค้าโทรมาถามเรื่องงานที่ปิดไปว่ามันเป็นอะไรหรือเปล่า
ทำไมเห็นแต่ตัวอักษรสีขาวไม่มีฉากหลัง
ตูว่าทุกอย่างก็ปกติดี (ตอนนั้นไม่ได้อยู่หน้าคอม)
เลยตอบไปว่าอาจจะเป็นที่เซิฟเวอร์ และเออออไปตามเรื่อง

กลับมาดู เปิดไออี6 :13: ป๊าบ ไอ้หน้าเจ้าปัญหาขึ้นขาวโร่เลย
เลยรีบแก้ด่วน แล้วทำเนียนๆ

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 31 ม.ค. 2008, 00:16 น.

http://cssglobe.com/post/1249/using-linehieght-with-menus
Using line-height with menus | Css Globe

ทำเมนูโดยเล่นกะความสูงบรรทัดล่ะ
ไม่เคยลองเมนูแบบ <li> เลย ที่ผ่านมาใช้เขียนเอาธรรมดา :30:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: i-poon เมื่อ 31 ม.ค. 2008, 03:35 น.

เก็บเข้า delicious โล่ด

ขอบคุณครับ :46:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 20 ก.พ. 2008, 02:34 น.

http://stylizedweb.com/2008/02/01/vertical-align-div/
Vertical align div | StylizedWeb.com

จัดกรอบสี่เหลี่ยมแบบกึ่งกลางหน้าเป๊ะๆ
อ้าวแล้วมันต่างจากของเดิม(ที่พี่เลย์เอามาแปะไว้)ยังไงครับ
อ๋อ ต่างครับ ตรงที่มันแก้ไขบั๊กหลายจุดไว้แล้ว
มีจุดไหนมั่งเข้าไปอ่านเอาเอง

http://stylizedweb.com/examples/verticalaligndiv.html
ตัวอย่าง (จริงๆ เปิดหน้านี้แล้วลอกซอสมาเลยก็ได้)

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 22 ก.พ. 2008, 01:47 น.

ทำให้ใส ทำอย่างไร
จากนี่ http://css-tricks.com/css-transparency-settings-for-all-broswers/
ใช้ได้ทุกยี่ห้อครับ

โค้ด เลือกทั้งหมด

.transparent_class {
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
}

ตัวอย่าง ดูภาพที่ลอยข้างๆ เนี่ย ------------------->

โอ้ว :37:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: Earthchie เมื่อ 22 ก.พ. 2008, 02:26 น.

เจ๋งโคตร +

ป.ล. คลิกอีโม :47: :48: :49: :50: และอื่นๆไม่ได้เลยครับ :30: โดนบัง

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 22 ก.พ. 2008, 02:40 น.

ย้ายให้แล้วครับ ขยับมาเกะกะตรงช่องตอบซะเลย :30:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: Earthchie เมื่อ 22 ก.พ. 2008, 02:45 น.

ขอบคุณครับ :30:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: ยุนเอ เมื่อ 22 ก.พ. 2008, 09:34 น.

:07:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: Layiji เมื่อ 22 ก.พ. 2008, 12:24 น.

โอโห transparent อันเดียว
ต้องทำสี่บรรทัดสี่ยี่ห้อเลยเหรอ

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: หนุ่ม เมื่อ 22 ก.พ. 2008, 15:18 น.

+แอนเต็มเหนี่ยวเลยครับ :25:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: นายโอ้เอ้ เมื่อ 22 ก.พ. 2008, 20:08 น.

4 บรรทัดแต่ความหมายเดียวกัน สำหรับหลายมาตรฐานครับ

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 27 ก.พ. 2008, 06:51 น.

http://www.wpdfd.com/issues/70/css_from_the_ground_up/
จริงๆ นี่ควรจะเป็นโพสต์แรกๆ ของกระจู๋นี้
เพราะเขาสอน css ตั้งแต่พื้นฐาน ที่เป็นพื้นฐานจริงๆ เลย :12:
แถมมีแอบแว้บล้ำเส้นอนุบาลมามัธยมนิดนึงด้วยนะ

ดีครับ ชอบๆ

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 03 มี.ค. 2008, 05:12 น.

http://www.vdotmedia.com/blog/vertically-center-content-with-css/
Vdot Media - Vertically center content with CSS

จัดกึ่งกลางแนวตั้ง (ใช้กะ IE ได้)

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: i-poon เมื่อ 04 มี.ค. 2008, 02:27 น.

โอ้วววว ได้เวลาเลิกใช้ table แล้ว :25:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: Layiji เมื่อ 04 มี.ค. 2008, 02:43 น.

หลังจากพยายามทำเว็บไปอีกเว็บนึง
ซึ่งที่แรกจะพยายามใช้ CSS จัด
แต่ว่าติดปัญหาหยุมหยิม โดยเฉพาะ IE :13b:

แต่ด้วยงานเร่งและไม่มีหาวิธีแก้ปัญหาเล็กๆน้อยๆนั่น
ผมเลยรื้อเป็น Table หมดเลย (ตามความถนัด)

จึงถามว่า CSS เหมาะกับเว็บที่มี layout แบบไหนที่สุดครับ
แล้วถ้าใช้ Table ต่อไปเรื่อยๆจะเกิดปัญหาอะไรในอนาคตมั้ยครับ
หรือว่าลูกเล่นมันจะไปไม่ได้ไกล

หรือว่าเราต้องใช้คู่กันในลักษณะไหนหรือเปล่าครับ

(ขอโทษที่อาจจะซ้ำซากผมติดปัญหาการเปลี่ยนผ่านเทคโนโลยีตรงนี้มากเลย)

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: i-poon เมื่อ 04 มี.ค. 2008, 03:51 น.

ที่ผมเจอกับตัวเองก็เว็บที่เป็น dynamic content อ่ะครับป๋า

content ที่ output ออกมาจากโปรแกรมอย่าง php ก็ให้จัดเป็น div ๆ ไป แล้วเอา css มาสวม เวลาจะแก้ก็แก้จาก css เอา
แต่ถ้าจัดด้วย table สมมุติแก้ design ที ก็ต้องไปยุ่งกับ code หลักของโปรแกรมที ลำบากและเสียเวลามาก คือขนาดเว็บที่ทำคนเดียวยั่งวุ่นวายขนาดนี้ นี่ถ้าไปโคงานกับเว็บโปรแกรมเมอร์คงมีต่อยกันตายแน่ๆเลยครับ

(ตั้งแต่จบมาเพิ่งขายเว็บออกไป 2 ตัว ประสบการณ์น้อยนิดแต่อยากแชร์ด้วยครับ :46:)

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 04 มี.ค. 2008, 17:18 น.

ตามนั้นเลยจ้ะ
แล้วก็ขอเสริมอีกหน่อย
ว่าเทเบิ้ลเนี่ย เหลือเอาไว้ได้ึครับ ไม่ผิดอะไร
แค่ไม่น่าจะเอามาใช้ทำโครงสร้างหลักของเว็บเหมือนแต่ก่อนแล้ว
แต่ถ้าต้องการเสนอข้อมูลเป็นตารางๆ ก็ยังใช้ได้ตามปกตินะ (ทั้งที่ css ก็ทำแทนได้แล้ว)

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

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: เดอะบุ๋ม เมื่อ 04 มี.ค. 2008, 17:30 น.

:25: +

ยังไม่รู้ว่าจะได้เอามาใช้เมื่อไหร่ดี เพิ่มรอยหยักขึ้นมาเยอะเลย

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 12 มี.ค. 2008, 22:42 น.

http://cssglobe.com/post/1392/8-premium-one-line-css-tips
8 CSS เด็ดๆ ลรรทัดเดียวเอาอยู่:

ที่เด็ดๆ ก็มี
- ใช้ line-height ทำให้ข้อความอยู่กลาง div ในแนวตั้ง
- เอา Vertical Scrollber ออกจาก Textarea ใน IE :13:
- เวลากดลิงก์ไหนแล้วไม่มีไอ้เส้นประๆ เป็นกรอบรอบลิงก์

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: ozone_me เมื่อ 13 มี.ค. 2008, 22:19 น.

แจ่ม จิง อิอิ :33:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: ฟิ้งซ์ เมื่อ 14 มี.ค. 2008, 13:41 น.

เข้ามาเก็บความรู้ ขอบคุณครับ

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 16 มี.ค. 2008, 22:46 น.

Designer's Toolbox: Blank CSS Template
http://tutorialblog.org/designers-toolbox-blank-css-template/

ถ้าจะเริ่มออกแบบหน้าเว็บจาก 0 โดยเขียน css กำกับ
ลองนี่สิครับ เริ่มจากโ๕รงสร้างและตัวช่วยเหล่านี้
ถึงจะมีอะไรไม่มาก แต่ก็ำช่วยทำให้งานง่ายขึ้นนะเออ

ป.ล. ดูโค้ดแล้วเห็นไอ้นี่

โค้ด เลือกทั้งหมด

.transpBlack { background: url(transpBlack.png); }

มันกำหนดแบบนี้ได้ด้วยเหรอ :18:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: กันย์ เมื่อ 26 มี.ค. 2008, 17:17 น.

จะลดช่องว่างระหว่าง div 2 อันที่ float กันคนละข้างทำไงครับ :25:
แบบว่า มี wrapper ห่อไว้แล้วทั้ง 2 div
มีรูปประกอบครับ

(http://img2.f0nt.com/26/a2e2040ff0166ce359a4708b9a37aefa.gif)

จะลดช่องตรงแดงๆนั้นยังไงครับ :25:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 26 มี.ค. 2008, 17:20 น.

:31: ต้องอยู่ที่ว่าจะเอาไปทำอะไรอ้ะครับ

ปกติถ้าเรากำหนดความกว้างของ div ที่ float ไว้แบบนี้
ให้กำหนดความกว้างของทั้งคู่ก่อน แล้ว float:left ทั้งคู่เลย
แต่อันขวาบอกให้ margin-left เท่าๆ กะความกว้างของ div ซ้ายครับ

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: กันย์ เมื่อ 26 มี.ค. 2008, 17:26 น.

ขอบคุณมากครับ :46:
เดี๋ยวผมจะลอง float left ทั้งคู่ดู :25:

อ้ะ ลืมถามไปเรื่องนึง
พอจะมีวิธีสุ่มรูปที่แสดงในหน้าเว็บได้หรือเปล่าครับ :25:
แบบที่ว่า เรากำหนดรูปไว้ 4-5 แบบ แล้วมันก็จะสุ่มเลยว่าเข้าแต่ละครั้งๆจะเจอรูปไม่เหมือนกัน

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: i-poon เมื่อ 27 มี.ค. 2008, 17:18 น.

css ทำไม่เป็น แต่ถ้าใช้ php ได้ก็ตามนี้ครับ

ส่วนแรกใส่ไว้บนๆของหน้า

โค้ด เลือกทั้งหมด


<?
$image = array ("image1.jpg","image2.gif","image3.png"); //ชื่อfile ที่จะให้ random ออกมา เพิ่มได้ลดได้
$image_max = count($image)-1;
$image_show = $image[rand(0,$image_max)];
?>

ตรง tag img ก็ใช้ตัวนี้แทน

อ้างอิง
<img src="<? echo "$image_show" ?>">

ป.ล. ยังไม่ได้เทสนะครับ :37:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: กันย์ เมื่อ 31 มี.ค. 2008, 22:05 น.

ขอบคุณมากครับ :25:

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

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: Layiji เมื่อ 31 มี.ค. 2008, 23:37 น.

ปกติไม่ต้องทำอะไรก็ยืดเองอยู่แล้วนะครับ แต่ว่าถ้ามีสูงอย่างต่ำ
ก็ใช้ min-height เอาครับ

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 07 พ.ค. 2008, 22:28 น.

ไปเจอโค้ดแบบนี้มาครับ

โค้ด เลือกทั้งหมด

a[href^="mailto"] { 
background: url(images/emailIcon.png) left center no-repeat; 
padding-left: 10px; 
}

ทำให้ลิงก์ใดๆ ที่มีคำว่า "mailto:" มีลักษณะ css ตามที่กำหนด :12:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: Layiji เมื่อ 07 พ.ค. 2008, 22:40 น.

:07: อะไรเนี่ย

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 07 พ.ค. 2008, 22:45 น.

:07: อะไรทำไม

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: X11 เมื่อ 07 พ.ค. 2008, 23:09 น.

อ้างคำพูดจาก: แอน เมื่อ 07 พ.ค. 2008, 22:28 น.
ไปเจอโค้ดแบบนี้มาครับ

โค้ด เลือกทั้งหมด ขยายเนื้อหา
a[href^="mailto"] { background: url(images/emailIcon.png) left center no-repeat; padding-left: 10px; }

ทำให้ลิงก์ใดๆ ที่มีคำว่า "mailto:" มีลักษณะ css ตามที่กำหนด :12:

น่าลองๆ

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: Layiji เมื่อ 07 พ.ค. 2008, 23:13 น.

a[href^="mailto"]

เพิ่งเคยเจอไอ้ยุบยิบแบบนี้

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 07 พ.ค. 2008, 23:15 น.

เคยเจอมีพวกเครื่องหมาย + หรือ > ด้วยนะครับ
ยังไม่เคยมีโอกาสลองเลย แต่ไอ้พวกนี้เกินความสามารถของดรีมแน่ๆ

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: Layiji เมื่อ 07 พ.ค. 2008, 23:17 น.

เห็นโค้ดแล้วนึกถึง d(-_=)b

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: Layiji เมื่อ 09 พ.ค. 2008, 21:33 น.

มีปัญหาอีกแล้ว :27:

ภาพ original แค่นี้ครับ
(http://img2.f0nt.com/09/04ac5499f5645651584c8701ed11ac50.gif)

ใส่ CSS
.picborder {
   padding: 3px;
   border: 1px solid #999999;
   background-color: #FFFFFF;
}

ใน FF สวยงาม
(http://img2.f0nt.com/09/2b11c192cf8b015a6551d587423f1d60.gif)

แต่ใน IE ขาวหายครับ
(http://img2.f0nt.com/09/e540b84365682c75c4d9096792d9bb53.gif)

แก้ ยังไงดีครับ

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 09 พ.ค. 2008, 22:50 น.

ใส่ในแท็กไหนครับ img.picborder หรือเปล่า
ถ้าไม่ได้ลองเอา span.picborder แล้วข้างใน span ค่อยเป็น img ดูได้บ่?
(อยู่ ตจว เลยยังไม่ได้ลอง ถ้าไม่ได้ลอง div ดูดิ๊)

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: Layiji เมื่อ 09 พ.ค. 2008, 23:13 น.

เปลี่ยนมาใส่ใน Div แล้วครับ ผลคือเกือบได้แล้ว :25:
ติดปัญหาที่มันยืดเท่ากรอบ อยากให้มันไหลลามแค่รอบๆรูปน่ะครับ ลองปรับ width ให้เล็กกว่ารูป ใน IE สวยเชียะ แต่ FF กรอบไปซ่อนหลังรูปครับ

(http://img2.f0nt.com/09/1ad085937fd93e34fc65284fc0360fc5.gif)

โค้ด เลือกทั้งหมด


.picborder {
   padding: 3px;
   border: 1px solid #999999;
   background-color: #FFFFFF;
}

<td width="101" valign="top">
<div align="center" class="picborder">
<a href="a">
<img src="images/travelinfo/sam002.jpg" width="85" height="65" border="0"  />
</a>
</div>
</td>

:05: ขอโทษที่รบกวนอะไรที่มันหยุมๆหยิมๆครับ ไม่ถนัดแก้ปัญหาสอง Browser จริงๆ

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 09 พ.ค. 2008, 23:39 น.

ยังไม่สะดวกเช็กให้ตอนนี้ครับ เครื่องช้ามาก (เครื่องเพนเทียมเต่าของพ่อ)
ขออภัยแรงๆ :46:

เอาเป็นว่าลองดู http://del.icio.us/iannnnn/css%2Bcorner ดูก่อนนะครับ
หรือประยุกต์จากข้อนึงในนี้ก็ได้ http://stylizedweb.com/2008/03/12/most-used-css-tricks/

เดี๋ยวพรุ่งนี้ค่ำถ้ายังไม่ได้จะไปดูให้อีกที
แต่ถ้าได้แล้วรายงานด้วยนะครับ อยากรู้ว่าผลการต่อสู้จะเป็นยังไง

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: ยุนเอ เมื่อ 10 พ.ค. 2008, 00:01 น.

เอลองใส่

.picborder {
float: left;
padding: 3px;
border: 1px solid #999999;
background-color: #FFFFFF;
}

แล้ว จะได้นะครับ แต่ที่ ie ตูดมันจะล้นออกมานิดนึง :08:

จากการลองเล่นดูนะครับ ถ้าเป็น ie7 มันจะฉลาดเหมือน ff เลย แต่ดัน มีตูดมาแหงะนึง บวกเพิ่มไปอีก 3px :08:
แก้โดย ie hack ครับ



แล้วถ้าเป็น ie6 นี่ยังไม่ได้ลอง แต่น่าจะ !important ได้นะครับ

.picborder {
float: left;
padding: 3px !important;
padding: 3px 3px 0px 3px;
border: 1px solid #999999;
background-color: #FFFFFF;
}

กำลังอยากหัด CSS ด้วยพอดีเลย :46:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: Layiji เมื่อ 10 พ.ค. 2008, 09:50 น.

โอ้ว ขอบคุณครับ ใน IE ผมไม่มีติ่งล่างยื่นครับ
เลยไม่ต้องใส่ important หรือใช้ ie hack (ใส่ใน css หรือว่าในหน้าครับนั่น :41:)

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: ยุนเอ เมื่อ 10 พ.ค. 2008, 16:22 น.

ie hack ใส่ในหน้าเว็บครับ

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: st เมื่อ 12 พ.ค. 2008, 13:21 น.

หนังสือที่พูดถึง CSS ที่เป้นภาษาไทยดีๆ มีบ้างมั้ย

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 12 พ.ค. 2008, 13:31 น.

ยังไม่เห็นเลยครับบอกอ

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: st เมื่อ 12 พ.ค. 2008, 13:33 น.

ส่วนใหญ่เห็นแต่ Text เนื้อหาดี ครอบคุมหลายเรื่อง หาคนไทยเขียนยากจัง ...

เอามาแปลเลยดีมั้ยครับ :43:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 12 พ.ค. 2008, 13:34 น.

ว้าย :30:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: นักศิลปะ เมื่อ 12 พ.ค. 2008, 13:36 น.

อ้างคำพูดจาก: แอน เมื่อ 12 พ.ค. 2008, 13:34 น.
ว้าย :30:

นี่คือการทาบทาม :21:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: Layiji เมื่อ 12 พ.ค. 2008, 13:41 น.

เน้นเรื่องปัญหา ie นะครับ :05:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: หนึ่ง เมื่อ 12 พ.ค. 2008, 14:23 น.

อ้างคำพูดจาก: สมต้น เมื่อ 12 พ.ค. 2008, 13:33 น.
ส่วนใหญ่เห็นแต่ Text เนื้อหาดี ครอบคุมหลายเรื่อง หาคนไทยเขียนยากจัง ...

เอามาแปลเลยดีมั้ยครับ :43:

กรี๊ดด :25:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: st เมื่อ 12 พ.ค. 2008, 14:39 น.

อ้างคำพูดจาก: nng เมื่อ 12 พ.ค. 2008, 14:23 น.
กรี๊ดด :25:

ร้องแบบนี้ เห้นด้วยใช่มั้ยครับ หรือว่า ตกใจ ไม่อยากอ่านหนังสือแปล :42:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: Layiji เมื่อ 12 พ.ค. 2008, 17:22 น.

ถามเรื่องการ flow ของ DIV ครับ :05:

ทำแล้วสวยงามใน FF
ได้อย่างนี้
(http://img2.f0nt.com/12/9fd9e8211a63325d059a5b3dbed1a2a3.gif)

พอเป็น IE
(http://img2.f0nt.com/12/82f602f1e5974003e14961edd791651a.gif)
:05:

CSS เป็นอย่างนี้ครับ

โค้ด เลือกทั้งหมด

.picborder {
	float:left;
	padding: 3px;
	border: 1px solid #999999;
	background-color: #FFFFFF;
	
}

.hotelframe {
	background-image: url(images/dot1.gif);
	background-repeat: repeat-x;
	background-position: center bottom;
	padding: 10px 0 20px 40px;
	overflow: auto;
	
}
.hoteldetail {
	font-family: tahoma;
	font-size: 12px;
	color: #666666;
	float: left;
	padding-left: 30px;
	width: 700px;
}
.inner {
	padding: 10px 0 0 0;
	float: left;
}

โค้ด เลือกทั้งหมด

    <div class="hotelframe">
    <div class="picborder"><img src="images/hotel/sam001.jpg">
    </div>
    <div class="hoteldetail"> <span class="big3">HOTELNAME</span>  &nbsp; <span class="style1">&nbsp;Bangkok</span> <div class="inner">

</div>
</div>
    </div>

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 12 พ.ค. 2008, 23:40 น.

ลองปรับๆ ได้แบบนี้ครับ
ไม่รู้ได้เปล่านะ ลองเทสต์แต่ไม่ละเอียด :44:
(ผมเปลี่ยน design บางส่วนนะครับ เอาไว้ทดสอบ)

โค้ด เลือกทั้งหมด

<style type="text/css">

.hotelframe {
	background: #ffffdd;
	padding: 10px 0 20px 40px;
	overflow: hidden;
	margin:10px;
	clear:both;
}

.picborder {
	float:left;
	padding: 3px;
	border: 1px solid #999999;
	background-color: #FFFFFF;
	overflow: hidden;
}

.hoteldetail {
	font: normal tahoma 12px;
	color: #666666;
	padding-left: 30px;
}

.inner {
	margin-top: 10px;
}

.big3 {
  font: bold 14pt Tahoma;
}

</style>



<div class="hotelframe">
    <div class="picborder"><img src="http://www.crestock.com/uploads/referral/graphics/125x125-illustration.gif"></div>
    <div class="hoteldetail"><span class="big3">HOTELNAME</span>  &nbsp; <span class="style1">&nbsp;Bangkok</span> 
      <div class="inner"></div>
  </div>

</div>
<div class="hotelframe">
    <div class="picborder"><img src="http://www.crestock.com/uploads/referral/graphics/125x125-illustration.gif"></div>
    <div class="hoteldetail"><span class="big3">HOTELNAME</span>  &nbsp; <span class="style1">&nbsp;Bangkok</span> 
      <div class="inner"></div>
  </div>
</div>

สังเกตว่า:
- clear:both แปลว่า เอาอีซ้ายกะขวาที่เกะกะออกให้หมด
- margin: กับ padding: ให้ผลต่างกัน ในกรณีที่จะผลักก้อนข้างๆ ออกไปห่างๆ ควรใช้ margin
- IE มันไม่รู้จักการตัดบรรทัดลงมาได้ไงไม่รู้ครับ ถ้าเรากำหนดขนาดที่รัดแน่นเกิน มันจะหล่นลงมาข้างล่างเป็นก้อน
- อะไรอีกไม่รู้ ลืม :31:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: Layiji เมื่อ 13 พ.ค. 2008, 00:12 น.

clear all
กับ overflow hidden แปลว่าอะไรครับ :42:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 13 พ.ค. 2008, 07:00 น.

ว้าย clear:all ไม่มีนะครับ ผมพิมพ์ผิด :41:
overflow:hidden คือ ถ้าเกิน(กรอบกว้างยาวที่กำหนด) จงตัดออก
เอาไว้ hack ปัญหาไออีเวลาใส่กรอบแล้วมันชอบเป๋ครับ

http://del.icio.us/iannnnn/css+iefuck
รู้สึกในนี้มีอธิบายนิดนึง

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 13 พ.ค. 2008, 21:09 น.

ลองศึกษาอันนี้เพิ่มมาคัรบ

อ้างคำพูดจาก: แอน เมื่อ 07 พ.ค. 2008, 22:28 น.
ไปเจอโค้ดแบบนี้มาครับ

โค้ด เลือกทั้งหมด ขยายเนื้อหา
a[href^="mailto"] { background: url(images/emailIcon.png) left center no-repeat; padding-left: 10px; }

ทำให้ลิงก์ใดๆ ที่มีคำว่า "mailto:" มีลักษณะ css ตามที่กำหนด :12:

เหมือนเจอคัมภีร์เทวดา
อยู่ดีๆ ก็ลองค้นกูเกิ้ลหาวิธีต่อยอดวิธีใช้ css แบบที่ว่าครับ
เพื่อจะลองหาทางออกให้ปัญหาของโพสต์นี้ (http://www.f0nt.com/forum/index.php/topic,6084.msg907857.html#msg907857)

เดี๋ยวมาเล่าให้ฟัง กำลังแก้อยู่จ้ะ

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: Layiji เมื่อ 13 พ.ค. 2008, 21:32 น.

ถามเรื่อง padding margin ที่งงๆในกรณีนี้ครับ

โค้ด เลือกทั้งหมด

.wrapper {
width:100%;
height:100%;
}
.a {
width:700px;
height:100%;
background-color:#FFFFFF;

}

.b {
	width:100%;
	height:100px;
	overflow:auto;
	margin-left: 10px;
	padding:10px;
	background-color: #FFCC00;
	text-align: left;
}

โค้ด เลือกทั้งหมด

<div class="wrapper" align="center"><div class="a"><div class="b">asdfsdfasdf</div>
</div>
</div>

(http://img2.f0nt.com/13/8cbe53c4e26e32e335757fbd936b959d.gif)
ผลที่ได้ตามนี้ครับ ปัญหาคือผมอยากได้ไอ้ div ที่มันห่างจากซ้ายไปนิดนึง แล้วก็มี Padding หน่อยนึง โดยที่อยากให้มันสุดพอดีขอบ
กรณีนี้ควรทำยังไงครับ หรือว่าต้องกำหนดเป็น pixel เป๊ะๆที่คำนวน padding margin ไว้แล้วครับ

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 13 พ.ค. 2008, 21:40 น.

น่าจะเป็นยังงั้นครับ คำนวณแล้วเอามาลบกัน
กรณีนี้ผมเองก็ไม่แม่นนะ อาศัยคลำเอาทุกทีไป เพราะหมาย่างกะไออีไม่เหมือนกันอีกแล้ว :08:
พี่เลย์ลองลง อทช ชื่อ Web Developer (http://downloads.chrispederick.com/work/web-developer/web-developer.xpi) ดูสิครับ
พอลงเสร็จเราสามารถ Edit CSS ให้มันแสดงผลสดๆ ได้เลย สะใจมาก

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 13 พ.ค. 2008, 22:10 น.

เอาล่ะ มาต่อกัน
ตะกี้เพิ่ม css ชุดนี้ลงไปในหน้ากากของบอร์ดครับ

โค้ด เลือกทั้งหมด



table tr > td > a[href*="action=post;quote"] { 
font-weight:bold; 
background: url(/forum/Themes/iannnnn11/images/upshrink2.gif) no-repeat 0 -3px; 
padding-left:20px !important; 
} 

table tr > td > a[href*="action=post;topic="] { 
font: normal 8pt Tahoma;
background:#555556;
padding:2px 7px 3px 8px;
color:#ffffff !important;
border: 1px solid #999999;
}

อีชุดหลังไม่ต้องสนใจนะ เอาแค่ชุดหน้าพอ แต่มันเกี่ยวเนื่องกัน
ตูจะมาแกะให้ดู หวังว่าจะมีประโยชน์มากๆ (เพราะตูตื่นเต้น)

เรื่องของเรื่องคือจากโพสต์ของบุ๋มที่ว่าไว้ตะกี้
บวกกับโพต์ที่ตูเจอมามั่วๆ เมื่อวันก่อน
ทำให้ตูลองไปกูเกิ้ลดูว่ามันมีสัญลักษณ์อะไรที่มาโผล่ใน css ได้บ้าง
ก็เจอลิงก์นี้ (http://www.sitepoint.com/article/tomorrows-css-today)บอกไว้ จนออกมาเป็นไอ้นี่

โค้ด เลือกทั้งหมด

table tr > td > a[href*="action=post;topic="] { ....... }

อันนี้แปลว่า ใน <table><tr><td><a href= "......"> ที่ยิงไปที่ลิงก์ที่มีคำว่าอะไรก็ได้
ที่มีส่วนประกอบของคำว่า action=post;topic= ครับ

มาขยายความกันนะ
a[.........] คือ แท็ก <a ตามด้วย .........
ซึ่งอี ......... เนี่ย จะเป็น href หรือ title หรือ rel ก็ได้ หรือส่วนขยายอะไรอย่างอื่นก็ได้

โค้ด เลือกทั้งหมด



a[rel] {
 color: red;
 text-decoration: underline;
 background:#ffff00;
}

HTML:  
<a href="#" rel="external">ทดสอบ</a>

แสดงผลออกมาจะได้

ทดสอบ

แล้วตัวอักษรหลังจากนั้น จะสาธิตเป็นตัวอย่างกันงง (แค่นี้ก็เริ่มงงละ)

*= หมายถึง อะไรก็ได้
ตัวอย่าง a[href*="nt"] หมายถึง f0nt.com ก็ได้ หรือ iannnnn.com/aaa/aaa.php?xx=asasntasaasa ก็ได้

= หมายถึง เฉพาะเจาะจง
ตัวอย่าง a[href="index.html"] หมายถึง index.html เท่านั้น จะไม่แสดงผลในกรณี href="/a/index.html"

^= หมายถึง ขึ้นต้นด้วย
ตัวอย่าง a[href^="/"] หมายถึง /xxx (ตัวอย่างแค่นี้คงพอใช่มะ)

$= หมายถึง ลงท้ายด้วย
ตัวอย่าง a[href$="pdf"] หมายถึง ลิงก์ไปที่ไหนก็ได้ที่ลงท้ายด้วย pdf (เอาไปประยุกต์ใช้ได้ดีมากๆ)

|= หมายถึง คำที่มียัติภังค์เชื่อม
ตัวอย่าง a[href|="not"] หมายถึง ลิงก์ไปที่ไหนก็ได้ที่มีคำที่ระบุ คั่นด้วยเครื่องหมาย - เช่น aaaa-not-xxxxx

~= หมายถึง คำที่มีเว้นวรรคเชื่อม
ตัวอย่าง a[title~="not"] ก็เช่น <a href="#" title="i'm not sure">

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: ยุนเอ เมื่อ 13 พ.ค. 2008, 22:15 น.

~~ตัวอย่างกันงงของพี่แอนอ่านต่อได้ที่ regular expression นะครับ~~

:03: นึกว่าใช่

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 02 มิ.ย. 2008, 23:57 น.

www.webdesignerwall.com/tutorials/css-decorative-gallery/

โอ้ว :07:
ใส่เฟรมให้ภาพ สารพัดแบบ สวยหยาดทิพย์

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: ยุนเอ เมื่อ 03 มิ.ย. 2008, 00:08 น.

เจ๋งมาก :07:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: Layiji เมื่อ 03 มิ.ย. 2008, 01:10 น.

:07: :07: :25: มากๆ

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: หนุ่ม เมื่อ 03 มิ.ย. 2008, 13:45 น.

:07: :07:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: เบียร์ เมื่อ 03 มิ.ย. 2008, 15:19 น.

เจ๋งเลย :25a:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: Layiji เมื่อ 20 มิ.ย. 2008, 12:18 น.

ทำยังไงดีครับ :41: :05:
ใน FF สวยดีแต่ IE :13:

โค้ด เลือกทั้งหมด


#newproduct {
	height: 100px;
	width: 100px;
	z-index: auto;
	position: relative;
	float: none;
	bottom: 60px;
	margin-left: auto;
	left: 60px;
	margin-bottom: -100px;
}
}

โค้ด เลือกทั้งหมด

<table width="740" border="0" cellpadding="20" cellspacing=" 0" class="picborder2">
            <tr>
              <td><div id="newproduct" align="right" > img....</div>
                          table........
              </td>
 
            </tr>
</table>

ผลคือ ใน FF :12:
(http://img2.f0nt.com/20/3ee9b8c0a43f77180cf5eaab2f54423e.jpg)

ใน IE :13:
(http://img2.f0nt.com/20/845d1701b8f44000761aa82debeee55a.jpg)

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 21 มิ.ย. 2008, 16:02 น.

เดานะครับ
เปลี่ยน float: none เป็น right นี่ได้ไหม

ในแท็ก div พยายามอย่าใส่ค่าอะไรลงไปนะครับ
เพราะเดี๋ยวจะตีกับ css ฉิบ ใส่แต่ class หรือ id ของ css พอ

ลองดูโค้ดชุดนี้ ใช้กะ ฟฟ กะ IE :13: ได้เหมือนกันเลย

โค้ด เลือกทั้งหมด

table {
   background: #ffff00;
   width: 740px;
}

#newproduct {
	height: 100px;
	width: 100px;
	z-index: 999;
	float: right;
   background: #ffcc00;
   position:relative;
   display: inline;
}

(ใน table กะ div ผมใส่โค้ดลงไปให้มันเป็นสีๆ จะได้ตรวจสอบได้ครับ)

โค้ด เลือกทั้งหมด

<table>
            <tr>
              <td><div id="newproduct"></div>
                          table........
              </td>
 
            </tr>
</table>

:36:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: ViSa เมื่อ 14 ก.ค. 2008, 19:53 น.

ได้ประโยชน์มากๆ

thxxxxxxx

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: เทอร์โบบูสเตอร์ เมื่อ 24 ก.ค. 2008, 11:49 น.

ถามป๋าเลย์ครับ ที่ลองทดสอบกับไออี นี่ เวอร์ชั่นอะไรครับ

พวกปัญหา css ใน ie7 หายหรือยังครับ

ตอนนี้ผมเขียน ส่วนใหญ่เลย ใน ff อย่างเดียวเลย

นานๆ จะเปิดใน ie7 ที แต่ส่วนใหญ่ ก็ไม่ค่อยเจอปัญหาอะไร

เลยนึกว่ามันไม่มีปัญหาแล้ว

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 24 ก.ค. 2008, 17:37 น.

http://truehits.net/graph/graph_stat.php#WEB

กดไปดูแนวโน้มเบราว์เซอร์ (คำนี้ทำไมมันเขียนตามหลักแล้วยาวฉิบหายเลยวะ)
ว่าคนไทยใช้อะไรกันซะส่วนมาก
ก็พบว่าตอนนี้กราฟของ IE6 :13: กำลังดิ่งลงมาเรื่อยๆ
แต่ไม่ใช่ลดทีเดียวหมดประเทศนะ
นั่นเพราะว่าคนที่ซื้อคอมระดับแมสของประเทศเนี่ย
(คนที่ไม่ลงวินโด่ใหม่ คนที่ซื้อคอมแล้วไม่มีทางรู้จักเด็ดขาดว่าหมาย่างคืออะไร)
ต้องรอให้คนกลุ่มนี้คอมเสีย วินโด่เสีย หรือเปลี่ยนเครื่องใหม่เสียก่อน

ดูจากแนวโน้มของกราฟที่เห็น ก็เตรียมตัวเฮกันในอีก 2 ปีข้างหน้า
วันที่คนใช้ IE7 :13a: จะมีจำนวนเท่ากับ และเริ่มแซง IE6 :13: ละ

ข้อดีคือ มาตรฐานของมันดีขึ้น
ข้อเสียก็คือ มาตรฐานแย่ๆ ของมันก็ยังแสดงผลได้แย่อยู่ดี
ดังนั้นใน 2 ปีนี้เรายังต้องง้อมันอยู่ครับ

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: หนุ่ม เมื่อ 25 ก.ค. 2008, 09:27 น.

อ้างคำพูดจาก: ไอ้แอนนนนน เมื่อ 24 ก.ค. 2008, 17:37 น.
ข้อดีคือ มาตรฐานของมันดีขึ้น
ข้อเสียก็คือ มาตรฐานแย่ๆ ของมันก็ยังแสดงผลได้แย่อยู่ดี
ดังนั้นใน 2 ปีนี้เรายังต้องง้อมันอยู่ครับ

เปลี่ยนเป็น 2 วันได้ไหมเนี่ย :08:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: เทอร์โบบูสเตอร์ เมื่อ 26 ก.ค. 2008, 04:50 น.

จะเอา เทเบิ้ล เพิ่มไปตรงด้านขวา ของโลโก้ ที่มีรูปเครื่องบิน นี่ ทำยังไงดีครับ นึกไม่ออก :05:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 26 ก.ค. 2008, 12:47 น.

หลังไอ้นี่

โค้ด เลือกทั้งหมด

<img src="images/logo1.gif" width="350" height="120" />

ก็คือหมายถึงใน div id="header" นี่แหละครับ
ให้ใส่ div เตรียมไว้ตัวนึง สมมติว่าชื่อ headerTD
แล้วข้างในจะยัดเทเบิ้ลอะไรก็ว่าไป ส่วนใน css ก็บอกว่า

โค้ด เลือกทั้งหมด

headerTD {
  float: right;
}

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: เทอร์โบบูสเตอร์ เมื่อ 28 ก.ค. 2008, 01:47 น.

ขอบคุณครับ +

เดี๊ยวลองก่อน :47:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 03 ส.ค. 2008, 00:42 น.

ปัญหา:
จะทำเว็บแบบขยายเต็มหน้า แล้วมีภาพที่จะต้องใส่ลงไปให้เต็มเหมือนกัน
แต่ไม่รู้จะทำยังไงให้ภาพมันขยายความกว้างเต็มหน้าไปด้วย (อธิบายแล้วงง ดูภาพเอา)

(http://nettuts.s3.amazonaws.com/031_FlexibleImages/final.jpg)

http://nettuts.com/html-css-techniques/the-weekend-quick-tip-flex-your-images/
ที่นี่มีคำตอบ

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 12 ส.ค. 2008, 00:43 น.

ลองประดิษฐ์ Starter Template มาให้ใช้กันครับ
ขอตั้งชื่อว่า u6isap.starter.template นะ

อันนี้ทำให้มี Footer (ส่วนล่างสุดของหน้า) ให้ชิดล่างตลอดไว้ด้วย
ใครสนใจหรือสงสัยอะไรก็โพสต์ถามกันได้ครับ (คุยกันมั่งนะ :05:)

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: ej_sing เมื่อ 12 ส.ค. 2008, 01:17 น.

ขอบคุณครับ :07:

แต่ :52: ขอเพิ่มครับ

อยากเห็นวิธีการวางและเขียน CSS layout แบบ wordpress ครับ

แบบนี้ครับ :25:

(http://img2.f0nt.com/12/2d18e7afb6e377be8984f49979840060.jpg) (http://img2.f0nt.com/12/8c87f58cae2198ecbbff4660b594209c.jpg)

รบกวนแอนทำเทมเพลทมาทิ้งไว้เป็นตัวอย่างหน่อยครับ
เดี๋ยวผมช่วย Validate XHTML ให้ผ่านให้ หากโค้ดตรวจไม่ผ่าน
( แต่น่าจะผ่านแหละนะ ระดับแอนนนนน )

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 12 ส.ค. 2008, 01:44 น.

ว้าก :07:
เดี๋ยวขอเวลาสักพักครับ
ไอ้ที่ทำไว้อันนึงก็ได้โครงหน้าแบบนั้นแหละ แต่มั่วมาก
เพราะไม่ได้เริ่มคิดจากการที่จะเอามาใช้เป็นเทมเพลต เลยด้นเอา :08:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: ej_sing เมื่อ 12 ส.ค. 2008, 12:08 น.

:30: เรื่องของเรื่อง ผมลองทำดูแล้ว มั่วเช็ดเลย :41:
ไอ้ที่อยากให้ยืด มันไม่ยอมยืด

อยากเอามาดูหลายๆแบบน่ะครับ

ตั้งตารอ :25:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 12 ส.ค. 2008, 23:21 น.

เผอิญไปเจอไอ้นี่มาพอดีครับ

http://www.zachgraeve.com/css-cheats/
เป็นเทมเพลต CSS หลายแบบ ที่เห็นแล้วซี้ดปากเลย
ก็คือก็อปมาใช้ได้เลย หวานหมู :54:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: กากก่อเกรียนนู้บ เมื่อ 13 ส.ค. 2008, 13:02 น.

ในที่สุดพี่แอนก็ยอมแพ้จนได้ :02:

ขอบคุณครับ แต่ช่วงนี้ผมไม่ได้ใช้ CSS เลยแฮะ มีแต่เว็บแฟลชทั้งหน้า :08:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: poloh เมื่อ 13 ส.ค. 2008, 14:55 น.

โอ๊ะ เจ๋งดีครับ
ไว้เล่น blueprint css เสร็จแล้วค่อยลองตัวนี้ดูดีกว่า

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 13 ส.ค. 2008, 16:42 น.

อ้างคำพูดจาก: korstudioXD [21] เมื่อ 13 ส.ค. 2008, 13:02 น.
ในที่สุดพี่แอนก็ยอมแพ้จนได้ :02:

ขอบคุณครับ แต่ช่วงนี้ผมไม่ได้ใช้ CSS เลยแฮะ มีแต่เว็บแฟลชทั้งหน้า :08:

ตูยังต้องทำงานกะภาษาไทยกับข้อมูลเยอะๆ อยู่
ขืนแฟลชทั้งหน้าเพียวๆ ไม่ไหวอ้ะ :48: (หมายถึงไม่รอด)

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 23 ส.ค. 2008, 18:59 น.

อ้างคำพูดจาก: ej_sing เมื่อ 12 ส.ค. 2008, 01:17 น.
ขอบคุณครับ :07:

แต่ :52: ขอเพิ่มครับ

อยากเห็นวิธีการวางและเขียน CSS layout แบบ wordpress ครับ

แบบนี้ครับ :25:

(http://img2.f0nt.com/12/2d18e7afb6e377be8984f49979840060.jpg) (http://img2.f0nt.com/12/8c87f58cae2198ecbbff4660b594209c.jpg)

รบกวนแอนทำเทมเพลทมาทิ้งไว้เป็นตัวอย่างหน่อยครับ
เดี๋ยวผมช่วย Validate XHTML ให้ผ่านให้ หากโค้ดตรวจไม่ผ่าน
( แต่น่าจะผ่านแหละนะ ระดับแอนนนนน )

ยังไม่ลืมอันนี้นะครับ แต่ไม่ว่างทำจริงๆ :05:
จนไปเจอเว็บนี้ก็เลยตายตาหลับละ

http://www.code-sucks.com/css%20layouts/

เลือกเอาที่ชอบๆ เลยครับ มีครบ :25:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: ej_sing เมื่อ 26 ส.ค. 2008, 01:50 น.

:46:

:07: เพียบ โค้ดสะอาดสุดๆ

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: Maggot เมื่อ 01 ก.ย. 2008, 17:07 น.

เข้า code-sucks.com ไม่ได้แล้ว :52:

:05:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 06 ก.ย. 2008, 02:13 น.

ตอนนี้เข้าได้แล้วจ้ะ

แต่ ดันไปเจออภิมหาเทพเว็บสุดจ้อดอีกอัน
สร้าง CSS มันแบบออนไลน์เลย :07b:

http://www.constructyourcss.com/ (http://www.constructyourcss.com/)

วิธีใช้สำหรับผู้มาใหม่อาจจะงงๆ หน่อย
ลองดู Tutorial สัหนึ่งจบ แล้วลองทำตามแบบเดาๆ
พอเจนโค้ดออกมา เฮ้ย มันทำได้จริงๆ :25: :25: :25:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: RevlonZ เมื่อ 06 ก.ย. 2008, 02:52 น.

พยายามจะเข้าใจแต่มัน... ยากเกินไป - -

:08:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: paipure เมื่อ 08 ธ.ค. 2008, 13:27 น.

สวัสดีครับ
คือผมมีปัญหาเกี่ยวกับบอร์ด ipbfree.com นะครับ
ไม่ทราบว่าเคยใช้กันรึเปล่า

คือตอนโพสภาพใหญ่มากใน

โค้ด เลือกทั้งหมด

[img]...[/img]
มันจะเลยขอบไป เป็นแบบนี้
(http://i243.photobucket.com/albums/ff194/paipure/how.png)

พอจะมี css ช่วยย่อให้เล็กลงเหมือนแบบนี้ มั้ยครับ
(http://i243.photobucket.com/albums/ff194/paipure/h2.png)

หรือจะใช้วิธีอื่นก็ได้ ขอบคุณครับ

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 08 ธ.ค. 2008, 13:43 น.

ถ้าจะให้คลิกแล้วขยาย อันนั้นไม่ทราบครับ ใช้ javascript ละมั้ง
แต่ถ้าจะให้กรอบที่ล้อมภาพอยู่นั้นมันไม่ล้นเฟรมออกไปทางซ้ายขวา
ลองใช้ให้เป็น scroolbar ซ้ายขวาเอาได้นะครับ

กรอบที่สวมลงไป จะใช้ p หรือ div หรือ td ก็ได้
กำหนดความกว้างลงไป แล้วถ้าเกินให้มีแถบเลื่อน
ตัวอย่างนะครับ

โค้ด เลือกทั้งหมด

<div style="width:600px; overflow:auto;">
    <img src="........." />
</div>

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: paipure เมื่อ 08 ธ.ค. 2008, 14:00 น.

<div style="width:600px; overflow:auto;">
<img>http://i407.photobucket.com/albums/pp155/goofyzgolf/4259vs4.jpg (http://i407.photobucket.com/albums/pp155/goofyzgolf/4259vs4.jpg)</img>
</div>

โพสยังไงครับ เอาไปลงที่ไหน

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 08 ธ.ค. 2008, 14:02 น.

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

เดี๋ยวให้ดูตัวอย่างการแสดงผลนะครับ มันจะออกมาในรูปนี้

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: กันย์ เมื่อ 08 ธ.ค. 2008, 14:03 น.

:25: คนที่สองกะคนกลางงง

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: paipure เมื่อ 08 ธ.ค. 2008, 14:09 น.

อ้างอิงดังนั้นเราต้องแก้ไขหน้ากากของฟอรั่มให้ช่องแสดงผลมีความกว้างจำกัด

ทำยังไงครับ

http://wondergirlsthai.ipbfree.com/index.php?showtopic=230 (http://wondergirlsthai.ipbfree.com/index.php?showtopic=230)

มันเป็นอย่างนี้นะครับ

ช่วยบอกวิธีแก้แบบละเอียดนิดนึงได้มั้ยครับ ขอบคุณครับ

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: paipure เมื่อ 08 ธ.ค. 2008, 14:27 น.

(http://i407.photobucket.com/albums/pp155/goofyzgolf/4259vs4.jpg)

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 08 ธ.ค. 2008, 14:28 น.

เข้าบอร์ดไม่ได้ครับ โดนกันไว้ :44:
แต่ลองเข้าจากกระทู้อื่นแล้วก็เห็นว่าเขาใช้ div ที่เป็น class="postcolor"

ดังนั้นถ้าระบบมันสามารถแก้ไข css ได้
ให้เข้าไปเพิ่มบรรทัดนี้ลงไปใน css นะครับ

โค้ด เลือกทั้งหมด

div.postcolor {
  width:600px;
  overflow:auto;
}

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: paipure เมื่อ 08 ธ.ค. 2008, 14:33 น.

แค่นั้นเลยเหรอครับ
แล้ว
<div style="width:600px; overflow:auto;">
<img src="........." />
</div>
ล่ะ

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 08 ธ.ค. 2008, 14:36 น.

อันนั้นยกตัวอย่างกว้างๆ ครับ ยังไม่รู้ว่าแต่ละบอร์ดใช้โค้ดอะไรยังไง
แต่สำหรับบอร์ดที่คุณใช้อยู่นั้นระบบมันเอื้อมาแบบนี้ครับ

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

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: paipure เมื่อ 08 ธ.ค. 2008, 14:44 น.

อ๊าว!! ชายครับ

เหอๆ

ผมแนะนำตัวใหม่แล้วนะ!!!
http://www.f0nt.com/forum/index.php/topic,1944.msg990405.html#msg990405 (http://www.f0nt.com/forum/index.php/topic,1944.msg990405.html#msg990405)
พอดีเกิดเหตุผิดพลาด

ผมแอบส่งจดหมายไปหาคุณแอนแล้วนะครับ
เพราะพอทำที่บอกมันไม่ได้ครับ

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: paipure เมื่อ 08 ธ.ค. 2008, 15:21 น.

ยังไม่ได้ครับคุณพี่แอน TOT

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 08 ธ.ค. 2008, 15:29 น.

เมื่อกี้ลองเข้าไปเทสต์ดู ได้แล้วนี่ครับ :09:
ลองกดรีโหลดใหม่ดูนะ
หรือถ้าไม่ได้ก็ให้เข้าไปที่แอดมิน > แก้ CSS > เพิ่มโค้ดที่ว่าลงไปในบรรทัดล่างสุดครับ

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: paipure เมื่อ 08 ธ.ค. 2008, 16:23 น.

ผมใช้ ie6 เปิด เพราะใช้ ff ไม่ได้ :05:

มีปัญหาอีกอย่างนึงครับ
(http://upic.me/i/qc/firefox.jpg)

มันชิดซ้ายตอนเปิดกับ ff
จะแก้ยังไงได้มั่งครับ

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: paipure เมื่อ 08 ธ.ค. 2008, 21:19 น.

<body><table width="XXXpx" align="center" cellpadding="0" cellspacing="0" border="1" bordercolor="COLOR">
<tr>
<td width="100%" height="100%" bgcolor="COLOR" align="center">

โค้ดนี้คืออะไรครับ

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: ~ZephyR~ เมื่อ 08 ธ.ค. 2008, 23:17 น.

ตามนี่ไปดูนะครับ

http://www.w3schools.com/html/default.asp (http://www.w3schools.com/html/default.asp)

แต่ถ้าไม่ถนัด ภาษาอังกฤษ ล่ะก็

http://www.bcoms.net/html/index.asp (http://www.bcoms.net/html/index.asp)

อันนี้ก็พอไหวครับ

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: paipure เมื่อ 09 ธ.ค. 2008, 11:16 น.

แก้ไม่ได้ล่ะครับ

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 08 ม.ค. 2009, 22:48 น.

Push Your Web Design Into The Future With CSS3 (http://www.smashingmagazine.com/2009/01/08/push-your-web-design-into-the-future-with-css3/)

อีกไม่นานเตรียมใช้ CSS3 กันครับ
- ทำขอบมนได้
- ทำภาพขอบๆ มุมๆ ได้
- ปรับความใสได้
- ใส่เงาได้!
- ใช้ฟอนต์ของเราเองไปแสดงผลในเว็บได้!!!!

รายนามเบราว์เซอร์ที่รองรับเทคโนโลยีนี้ได้แก่
- Firefox 3.1
- Safari
- Chrome (box-shadow only)
- Opera (text-shadow only)

แน่นอนว่าถ้าเป็นประเทศไทยซึ่งใช้ IE :13: กันค่อนๆๆๆ ค่อนเกือบทั้งประเทศนั้น ก็รอไปก่อนอีกหลายปี :39:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: หนุ่ม เมื่อ 08 ม.ค. 2009, 23:04 น.

แสดงว่ายังไม่ต้องรีบศึกษาก็ได้ :42:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 08 ม.ค. 2009, 23:05 น.

แต่สักกลางๆ ปีนี้ หมาย่างมันก็ใช้ได้แล้วน้าาาา :05:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: กันย์ เมื่อ 08 ม.ค. 2009, 23:07 น.

เว็บฟอนต์เปลี่ยนเลยครับ ไม่ต้องสน IE :07:

ล้อเล่น :30:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 08 ม.ค. 2009, 23:09 น.

เอาจริงๆ คือปีนี้โครงการไว้เหมือนกัน :27:

(โครงการน่ะมีมานานแล้วแต่เพิ่งจะได้ทำก็คงปีนี้แหละ)

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: ยุนเอ เมื่อ 08 ม.ค. 2009, 23:13 น.

ขอเล่นย้วยยิ :27:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: กันย์ เมื่อ 08 ม.ค. 2009, 23:15 น.

ไปด้วยครับ :25:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: กากก่อเกรียนนู้บ เมื่อ 08 ม.ค. 2009, 23:59 น.

เล่นด้วยครับพี่แอน ผมไม่สน IE แล้ว :11:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 15 ม.ค. 2009, 23:36 น.

โค้ด เลือกทั้งหมด

opacity: 0.7;
filter:alpha(opacity=70);
-ms-filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity:0.7;

เป็นโค้ดที่ทำให้วัตถุใสจ้ะ ใช้ได้กับทุกเบราว์เซอร์ (เพราะพี่แกเล่นใส่ระบุทุกบรรทัด)

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: กากก่อเกรียนนู้บ เมื่อ 16 ม.ค. 2009, 11:59 น.

อันนี้ CSS3 เหรอครับพี่แอน

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 16 ม.ค. 2009, 12:21 น.

เปล่าครับ วิธีโบร่ำโบราณและไม่ได้มาตรฐานโลกด้วย
แต่เอาไว้แก้ปัญหาได้ทุกยี่ห้อ

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: กากก่อเกรียนนู้บ เมื่อ 16 ม.ค. 2009, 13:44 น.

:04: กรี๊ด ขอบคุณครับ

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 23 ม.ค. 2009, 17:36 น.

เพิ่งคุยกะบักก่อเมื่อกี้เรื่อง Footer ของหน้า
ที่ชอบมีปัญหาพาให้งงอยู่เรื่อย

และแล้วอยู่ดีๆ ก็อ่านฟีดไปเจออันนี้เข้าครับ

New CSS Sticky Footer - 2009 (http://www.cssstickyfooter.com/) :25: :25: :25: :25:

CSS

โค้ด เลือกทั้งหมด

/*  
Sticky Footer Solution
by Steve Hatcher 
http://stever.ca
http://www.cssstickyfooter.com
*/

html, body, #wrap {height: 100%;}

body > #wrap {height: auto; min-height: 100%;}

#main {padding-bottom: 140px;}  /* must be same height as the footer */

#footer {position: relative;
	margin-top: -140px; /* negative value of footer height */
	height: 140px;
	clear:both;} 

/* CLEAR FIX*/
.clearfix:after {content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

HTML

โค้ด เลือกทั้งหมด


<div id="wrap">
	<div id="main" class="clearfix">....</div>
</div>
<div id="footer">....</div>

เคลียร์ :07: :07:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: กากก่อเกรียนนู้บ เมื่อ 23 ม.ค. 2009, 17:38 น.

:07: เคลี้ยร์!

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: JÎ›NÎ£ เมื่อ 23 ม.ค. 2009, 17:44 น.

อันนี้คือให้มันวาง Footer ไว้ล่างสุดตลอดไม่ว่าเนื้อหาจะมีแค่ไหน ใช่ป่ะครับ :25:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: กากก่อเกรียนนู้บ เมื่อ 23 ม.ค. 2009, 17:45 น.

ใช่แล้น ครับ พี่เจน

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: น็อต เมื่อ 23 ม.ค. 2009, 23:01 น.

เจ๋งมาก :25:

ของเก่าที่ใช้อยู่ใช้ได้กับบาง Browser เท่านั้น :34:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: ej_sing เมื่อ 26 ม.ค. 2009, 19:00 น.

อืมมม :12:

ถามเพิ่ม min-height นี่มีปัญหากับ IE มาตลอดใช่ไหมครับ ( หรือผมเจออยู่คนเดียว :38: ) ถ้าใช่แก้กันอย่างไรบ้าง

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 26 ม.ค. 2009, 19:04 น.

http://callmebird.com/weblog/css-min-height-cross-browser (http://callmebird.com/weblog/css-min-height-cross-browser)
http://davidwalsh.name/cross-browser-css-min-height (http://davidwalsh.name/cross-browser-css-min-height)
ลองวิธีนี้ดูครับ

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: ej_sing เมื่อ 26 ม.ค. 2009, 19:07 น.

:03: อืมมม ขอบคุณครับ ง่ายๆเลย height:auto; :12:
เส้นเขาบังภูผมจริงๆ

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 26 ม.ค. 2009, 19:09 น.

เส้นผมบังภูเขา :07:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: กากก่อเกรียนนู้บ เมื่อ 26 ม.ค. 2009, 19:21 น.

ภูเขาบังเส้นผม :07:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: JÎ›NÎ£ เมื่อ 26 ม.ค. 2009, 20:41 น.

เส้นผมบังเหม็นโรตี :07:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: กันย์ เมื่อ 26 ม.ค. 2009, 20:42 น.

พอ! :07:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: ตอ เมื่อ 11 ก.พ. 2009, 13:03 น.

:56: :56:
เพิ่งไปเจอมาครับ
ดีมากๆเลย สำหรับวัยกระเตาะ CSS (http://www.w3.org/Style/Examples/011/firstcss.th.html) ทั้งหลาย
เบสิกสุด!

ผมลองค่อยๆทำตามดู
เออนะ มันศึกษาได้ง่ายดี
แต่ตอนเขียนนั้นอีกเรื่องนึง :39:

ปล. โปรแกรม snap (css) (http://www.improvingcode.com/snapcss/) นี่มันเอาไว้เฉพาะแก้ css หรอครับ :06: ถ้าจะพรีวิวมันก็ต้องเปิดในดรีมเพื่อพรีวิวในบราวเซอร์ใช่มั๊ยครับ

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 11 ก.พ. 2009, 21:24 น.

โอ๊ะ ไม่เคยเห็นโปรแกรมนี้เลยครับ ขอลองหน่อยนะ :12:

ปกติตูใช้ Notepad หรือ Dream เอานี่แหละ
แต่ถ้าจะแก้สดๆ ก็ใช้ อทช Web Developer Toolbar เอาจ้ะ

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: X11 เมื่อ 11 ก.พ. 2009, 22:01 น.

อทช องค์การทหารช่าง :09:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: ตอ เมื่อ 11 ก.พ. 2009, 22:03 น.

:56: :56: ว่าจะถามอยู่เหมือนกันครับ :40:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: ยุนเอ เมื่อ 11 ก.พ. 2009, 22:06 น.

extension ครับ

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: X11 เมื่อ 11 ก.พ. 2009, 22:09 น.

:01: พิมพ์เยอะกว่านี้อีกนิดก็ไม่ได้

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 11 ก.พ. 2009, 22:11 น.

:16: ก็เรียกกันแบบนี้ (ในจู๋หมาย่าง) มาหลายปีแล้วนะครับ

Web Developer :: Firefox Add-ons (https://addons.mozilla.org/en-US/firefox/addon/60)
อ้ะ โหลดโลด

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: ตอ เมื่อ 11 ก.พ. 2009, 22:17 น.

อย่างนี้ต้องกดบวกอย่างแวรงง :12:

ขอบคุณครับ
ไหนขอลองใช้หน่อย

ว่าแต่สแนปเป็นไงมั่งพี่ ใช้แล้วดีดนิ้วการันตีความน่าใช้หรือเปล่า :18:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 11 ก.พ. 2009, 22:23 น.

ยังไม่ได้ลองครับ :30:

จริงๆ มันมีโปรแกรมอื่นอีกนะ
http://www.divland.com/forum/index.php?topic=84.0 (http://www.divland.com/forum/index.php?topic=84.0)
แต่ไงก็ถนัดแค่ Notepad++ อย่างเดียวพอ

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: X11 เมื่อ 11 ก.พ. 2009, 22:38 น.

อ้างคำพูดจาก: แอนดูมาโอ๊ะ เมื่อ 11 ก.พ. 2009, 22:23 น.
ยังไม่ได้ลองครับ :30:

จริงๆ มันมีโปรแกรมอื่นอีกนะ
http://www.divland.com/forum/index.php?topic=84.0 (http://www.divland.com/forum/index.php?topic=84.0)
แต่ไงก็ถนัดแค่ Notepad++ อย่างเดียวพอ

telnet หรือ ssh แล้ว vi เลย :47:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: JÎ›NÎ£ เมื่อ 11 ก.พ. 2009, 22:46 น.

ผมยังใช้ pico อยู่เลย :30: :30: :30:

เพราะใช้ vi ไม่เป็น :05:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 11 ก.พ. 2009, 22:46 น.

แปลด้วย :05:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: ตอ เมื่อ 11 ก.พ. 2009, 22:50 น.

:32: :32: :32: :32:

ตามนั้นครับ
:05:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: JÎ›NÎ£ เมื่อ 11 ก.พ. 2009, 22:55 น.

แกล้งไม่รู้กันใช่มั้ย :07: :07:

ไม่ทัน pico กับ vi กันจริงๆเหรอ :05:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 11 ก.พ. 2009, 22:58 น.

อ๋อ ถ้าเป็นศัพท์สมัยเสียกรุง อันนี้เกิดไม่ทันจริงๆ ครับ :56:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: ยุนเอ เมื่อ 11 ก.พ. 2009, 23:01 น.

text editor ของฝั่ง linux เขาละครับ

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: JÎ›NÎ£ เมื่อ 11 ก.พ. 2009, 23:03 น.

pico, vi
เป็นโปรแกรม text editor บนระบบปฏิบัติการ unix จ๊ะ

ป้าหน่อยน่าจะคุ้นมือนะ :56:

บน mac ก็น่าจะมีนะ ไม่เคยใช้เหรอ :09:

// เอตัดหน้า :07:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: Layiji เมื่อ 11 ก.พ. 2009, 23:03 น.

ไม่รู้จักซักอย่าง :07:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: ตอ เมื่อ 11 ก.พ. 2009, 23:19 น.

ครับ ไม่รู้จริงๆ :05:/

ไม่เคยใช้ลินุกซ์ด้วย :08:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: X11 เมื่อ 11 ก.พ. 2009, 23:32 น.

แอนเปิดเครื่องแมค แล้วเปิด terminal พิมพ์ vi newfile <enter> ดูสิ
ตอบละกันว่าหาทางปิดมันยังไง :30:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: JÎ›NÎ£ เมื่อ 11 ก.พ. 2009, 23:57 น.

ต่อ 10 เอา 1

ปิดไม่เป็น (โดยไม่ใช้ตัวช่วยนะ) :30: :30: :30:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: ตอ เมื่อ 12 ก.พ. 2009, 23:05 น.

:01:
อยากให้มีห้องอนุบาลงาน CSS จัง

:05:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 12 ก.พ. 2009, 23:28 น.

ก็เริ่มจากตรงนี้ได้เลยครับ

อ้างคำพูดจาก: เมี่ยงการุณ aka ตอ!! เมื่อ 11 ก.พ. 2009, 13:03 น.
:56: :56:
เพิ่งไปเจอมาครับ
ดีมากๆเลย สำหรับวัยกระเตาะ CSS (http://www.w3.org/Style/Examples/011/firstcss.th.html) ทั้งหลาย
เบสิกสุด!

นอกนั้นถ้าสงสัยอะไรโพสต์ถามโลด ถ้าตอบได้ก็จะช่วๆย กันตอบครับ

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: ณัฏฐ์ เมื่อ 12 ก.พ. 2009, 23:55 น.

เอ๊ะเหมือนเคยถามแล้ว
แต่ลืมแล้วเหมือนกัน
งั้นถามอีกรอบ

display กับ visible นี่ใช้ต่างกันยังไงหรอครับ?

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 13 ก.พ. 2009, 00:09 น.

ไม่รู้ครับ :30:

สงสัยถามกว้างไป
display ก็คือการแสดงผลประเภทต่างๆ
มันมีให้เลือกแสดงหลายๆ แบบ (ทั้ง inline / block / none แล้วแต่)
ส่วน visibility นี่มี visible กับ hidden ให้เลือกครับ

แล้วมันต่างกันตรงไหน :09: ก็ตรงนี้นี่แหละ

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: ณัฏฐ์ เมื่อ 13 ก.พ. 2009, 00:18 น.

ก็สงสัยแบบว่า

display : none
กับ
visible : hidden
มันก็หายไปเหมือนกัน แล้วมันต่างกันยังไง

เอ้อแล้วถ้าไม่อยากให้มันโหลดส่วนนั้นๆ เลยล่ะมีวิธีไหม(ในกรณี hi5 ที่แก้โค้ดไม่ได้)
display : none มันแค่ซ่อน แต่ความอืดในการโหลดก็ยังมีอยู่ดี

ขอบคุณครับ :46:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 13 ก.พ. 2009, 00:24 น.

ไม่มีครับ วิธีที่ซ่อนแบบไม่โหลดเลยน่ะ
เพราะ css มันเป็นส่วนออกแบบเฉยๆ
ไม่ได้ไปยุ่งกะโค้ดที่เกี่ยวกับการโหลดข้อมูลมาในเครื่องเรา

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: poloh เมื่อ 13 ก.พ. 2009, 14:58 น.

เรื่อง display:none กับ visible:hidden
เท่าที่ผมเคยใช้นะ(ถ้าผิดพลาดไปขออภัยด้วยครับ)

visible:hidden มันจะซ่อนตัวไม่แสดงผลออกมา แต่ความกว้างกับความสูงของมันยังอยู่
แต่ถ้าเป็น display:none มันจะไม่มีอะไรเลย

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: JÎ›NÎ£ เมื่อ 13 ก.พ. 2009, 15:56 น.

โอ้ว ขอบคุณครับ :25:
กำลังสงสัยอยู่เหมือนกันเลย

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: ณัฏฐ์ เมื่อ 13 ก.พ. 2009, 21:20 น.

ขอบคุณครับ :25:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: ej_sing เมื่อ 03 เม.ย. 2009, 23:56 น.

สามารถทำให้ สูง 100% ทั้ง #leftColumn & #rightColumn ได้ไหมครับ
หากใช้แค่

โค้ด เลือกทั้งหมด


<body>
  <div id="warp-center">
      <div id="leftColumn"></div>
      <div id="rightColumn"></div>
  </div>
</body>

(http://img3.f0nt.com/03/31610510b672e839b10f219dc4340373.jpg)

(http://img3.f0nt.com/03/8e02059eeff7a523919c58f5d425bbe2.jpg)

:46: รบกวนชี้แนะด้วยนะครับ ขอบคุณครับ

// อันนี้ใช้วิธีหลอกด้วย background แทน แต่ div ตรงด้านขวา ไม่ยืดตาม

http://www.code-sucks.com/css%20layouts/faux-css-layouts/2-column-css-layouts/faux-7-2-col/ (http://www.code-sucks.com/css%20layouts/faux-css-layouts/2-column-css-layouts/faux-7-2-col/)

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 04 เม.ย. 2009, 00:32 น.

ถ้าโจทย์ับังคับแค่ให้ใช้ html แค่นั้นแล้วแต่งด้วย css ล้วนๆ ละก็
หาวิธีไม่จอครับ :05: :05: :05:
ตอนนี้ทำได้แค่กำหนดความสูงของมัน (หมายถึงช่องซ้ายกะขวา)
แต่พอเปลี่ยนเป็น 100% ปั๊บ พ่อหายเรียบเลย :05:

โค้ด เลือกทั้งหมด

#warp-center {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	background:#9C0;
	overflow:hidden;
}
#leftColumn, #rightColumn{
	width:500px;
	float:left;
	margin:5px;
	min-height: 800px;
	height: auto !important;
	height: 800px;
	background:#FFF;
}

ตอนนี้ทำแบบนี้อยู่ แต่หาวิธีให้มัน 100% ไม่ได้อ้ะ

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: นายโอ้เอ้ เมื่อ 04 เม.ย. 2009, 01:14 น.

กำหนด height ให้ body มันน่าจะได้นะครับ
ผมลองแบบนี้มันก็เต็ม แต่ไม่รู้ว่าใช่ที่ต้องการรึเปล่า

โค้ด เลือกทั้งหมด


body {
height: 100%;
}
#warp-center {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	background:#9C0;
	overflow:hidden;
}
#leftColumn, #rightColumn{
	width:500px;
	float:left;
	margin:5px;
	height: 100%;
	background:#FFF;
}

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: ej_sing เมื่อ 04 เม.ย. 2009, 11:56 น.

:05: อนุญาตให้ครอบ div เพิ่มได้ตามสมควรนะครับ :05: +

ของคุณโอ้เอ้ ใช้ได้กับ IE เลยนะครับ :12: +
แต่ opera กะ firefox ยังไม่ยืด

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 04 เม.ย. 2009, 13:13 น.

ลองอันนี้ใช้ได้แล้วมั้ง

โค้ด เลือกทั้งหมด


<html>
<head>
	<style>
	html, body {
		height: 100%;
		margin: 0;
		padding: 0;
	}
	#warp-center {
		margin: 0 auto;
		width: 1000px;
		height: 100%;
		background: #0cf;
		border:5px solid #F36;
	}
	#leftColumn, #rightColumn{
		float:left;
		min-height: 100%;
		height: auto !important;
		height: 100%;
		display:inline;
	}
	#leftColumn{
		width:200px;
		background:#fc0;
	}
	#rightColumn{
		width:500px;
		background:#cf0;
	}
	</style>
</head>
<body>
	<div id="warp-center">
		<div id="leftColumn">left</div>
		<div id="rightColumn">right</div>
	</div>
</body>
</html>

แต่ยังไม่ได้แก้บั๊กกับ IE :13: นะครับ
ไอ้พวก Double Margin เนี่ย

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: ej_sing เมื่อ 05 เม.ย. 2009, 12:55 น.

:46: +

ใช้ดีกะ IE มากๆครับ แอนนนนน IE Friendly จริงๆ :30:

แต่พอข้อมูลยาว firefox มันยืดแต่คอลั่มนั้นๆครับ
ลองปรับมั่วไป มั่วมา ปรากฏว่า ..... :08: เละ ครับ

ยังตามล่าต่อไป ....... :41:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: หนุ่ม เมื่อ 06 เม.ย. 2009, 16:48 น.

ลองดูที่นี่ครับ
http://www.divland.com/blog/2007/09/10/css-layout-equal-height/ (http://www.divland.com/blog/2007/09/10/css-layout-equal-height/)

น่าจะใช้ได้นะ :22:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 11 เม.ย. 2009, 16:46 น.

Selectable Image
http://dttvb.com/selectableimage.html (http://dttvb.com/selectableimage.html)

เลือกตัวอักษรจากรูปภาพได้ครับ :07: :07: :07:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: icez เมื่อ 11 เม.ย. 2009, 23:50 น.

เจ้าไทมันจะเทพไปถึงไหน :07a:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 20 มิ.ย. 2009, 00:12 น.

ไปเจอมาจ้ะ

โค้ด เลือกทั้งหมด

.post img {
    max-width: 500px;
    height: auto;
}

จำกัดความกว้างของภาพ(ที่แปะในหน้าบล็อก) ไม่ให้กว้างเกินที่กำหนดไว้
กันหลุดขอบไง :12:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: หนุ่ม เมื่อ 20 มิ.ย. 2009, 00:20 น.

อืม ไม่คิดว่ามันจะง่ายขนาดนี้ :08:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: กากก่อเกรียนนู้บ เมื่อ 20 มิ.ย. 2009, 00:24 น.

อ้างคำพูดจาก: iannnnn เมื่อ 20 มิ.ย. 2009, 00:12 น.
ไปเจอมาจ้ะ

โค้ด เลือกทั้งหมด ขยายเนื้อหา
.post img { max-width: 500px; height: auto; }

จำกัดความกว้างของภาพ(ที่แปะในหน้าบล็อก) ไม่ให้กว้างเกินที่กำหนดไว้
กันหลุดขอบไง :12:

กรี๊ดด ใช้กับ exteen ได้ใช่ไหมครับ กรี๊ดดด
(หรือว่าต้องแก้ชื่อคลาสอีกทีนึงครับ?)

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 20 มิ.ย. 2009, 00:50 น.

แก้เป็นชื่อคลาสของโพสต์ในเอนทรี่นั้นแหละจ้ะ
(ไทยคำอังกฤษสองคำมากๆ)

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: กากก่อเกรียนนู้บ เมื่อ 20 มิ.ย. 2009, 03:25 น.

:25: ขอบคุณครับ บวกพี่แอนเลย

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: ยุนเอ เมื่อ 20 มิ.ย. 2009, 13:34 น.

css ใช้เวลาต้องการเปลี่ยนรูปเวลา mouse ไป rollover ได้รึเปล่าอะครับ

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: Zafire06 เมื่อ 20 มิ.ย. 2009, 14:26 น.

ได้ครับ
โดยกำหนดเป็น background

เช่น
HTML:

โค้ด เลือกทั้งหมด

<a id="image"></a>

CSS:

โค้ด เลือกทั้งหมด

a {
 display:block;
 width:50px; height:50px;
 background:url(image.gif) no-repeat;
}
a:hover {
 background-image:url(image_rollover.gif);
}

:22:
(อย่างไรก็ตาม การทำแบบนี้จะทำให้ตอนเอาเคอร์เซอร์ไปวางแล้วยังต้องรอโหลดอีกแป๊บหนึ่ง
จึงอาจจะรวมทั้งสองภาพไปอยู่ในภาพเดียวกันแล้วให้มันเปลี่ยน background-position แทน)

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: โตน เมื่อ 20 มิ.ย. 2009, 14:51 น.

ลองรวมทั้งสองภาพไปอยู่ในภาพเดียวกันแล้วให้มันเปลี่ยน background-position ดู

ง่อยมาก เอาไปเล่นดูได้ :08:
http://www.mediafire.com/download.php?nwyymlogn2y (http://www.mediafire.com/download.php?nwyymlogn2y)

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: ยุนเอ เมื่อ 20 มิ.ย. 2009, 15:17 น.

ไอรวมทั้งสองภาพไปอยุ่ในภาพเดียวกันนี้เป็นยังไงอะครับ :09:

ทำยังงี้แสดงว่า ถ้ามีปุ่มซักห้าแบบก็ควรจะมี 5 id เพื่อ :hover 5 รูปรึเปล่าอะครับ

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 20 มิ.ย. 2009, 21:36 น.

แบบนี้ ตัวอย่างนะ
ลองเอาเมาส์ชี้ดู

ทดสอบปุ่มจ้ะ

โค้ด เลือกทั้งหมด

<style type="text/css">
<!--
.test a{
background:#565656 url(http://www.f0nt.com/bg08.gif) repeat-x 0 0;
text-decoration:none; color:#fff; text-align:center;
width:300px; line-height:200px; display:block;
}
.test:hover a{
background:#565656 url(http://www.f0nt.com/bg08.gif) repeat-x 0 -50px ;
}
-->
</style>

<p class="test">
<a>ทดสอบปุ่มจ้ะ</a>
</p>

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

อ้อ ใน css เนี่ย
เวลาเรากำหนดการออกแบบยิบย่ิอย ให้กำหนดใส่ใน .class นะ
ส่วน #id นี่เอาไว้ระบุชิ้นอวัยวะใหญ่ๆ หรือระบุขอบเขตก็พอ
(แต่ตูก็ยังเขียนสลับกันบ่อยๆ อยู่ดี)

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: JÎ›NÎ£ เมื่อ 20 มิ.ย. 2009, 21:48 น.

เอ้อ ตกลง class กับ id ใช้ต่างกันยังไงครับ
ตอนนี้ใช้มั่วไปหมด :30:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 20 มิ.ย. 2009, 21:55 น.

ตูก็ใช้มั่ว :3005:
คือถ้าตามหลักอนามัยมันต้อง ID ไว้บอก "ชิ้น" หรือ "ขอบเขต" ใหญ่ๆ
ส่วน Class เอาไว้บอกดีไซน์ครับ

การกำหนดถ้าตามหลักที่ดีมันจะต้อง
<div id="xxx" class="yyy">...</div>

(ใส่ทั้งคู่ แม้จะเป็นการประกาศแค่ ID ก็ตาม)
แล้วใน css เนี่ย บอกแค่ว่า id นี้มันอะไรยังไงที่ไหน
แต่ใน class ต้องบอกขนาดสีสันฟอนต์เฟิ้น
โดยที่ จะ ต้อง ไม่ ใส่ ดีไซน์ ลง ใน ID นะ ครับ

ซึ่งตูก็ยังใช้มั่วมาตลอด :3005:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: ยุนเอ เมื่อ 20 มิ.ย. 2009, 22:47 น.

อ๋อ เข้าใจเรื่อง position ละ

แต่เว็บเทพเขาคงอยาให hover แล้วเปลี่ยนสีไปเลย

คาดว่าน่าจะใช่แบบ เร่ละครับ

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 20 มิ.ย. 2009, 23:10 น.

เฮ้ย เปลี่ยนสีใช้ภาพเดียวกันก็ได้นะเอ (แนะนำกว่าวิธีใช้ 2 ภาพด้วยแหละ)
ลองเปิด กกรด ก็ได้ แล้วดูพวกไอคอนต่างๆ ละกัน
(ไม่รู้กดดูจากลิงก์นี่ได้เลยไหม)

https://www.google.com/reader/ui/972236033-lhn-sprite.png (https://www.google.com/reader/ui/972236033-lhn-sprite.png)
https://www.google.com/reader/ui/3728287201-entry-action-icons.png (https://www.google.com/reader/ui/3728287201-entry-action-icons.png)

พี่แกเล่นใช้ภาพเดียวสารพัดประโยชน์กันไปข้างนึงเลย :30: เมพไหมล่ะ

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 21 มิ.ย. 2009, 22:45 น.

มีอีก 2 เทคนิค CSS3 ครับ

การกำหนดค่าสีพร้อมกับความใส

อ้างอิง#networks li a:hover,
#networks li a:focus {
background: rgba(164, 173, 183, .15);
}

When setting an RGBA color, we must specify the red, blue and green values either with an integer value between 0 and 255 or with percentages. The alpha value should be between 0.0 and 1.0; for example, 0.5 for a 50% opacity.

The difference between RGBA and opacity is that the former applies transparency only to a particular element, whereas the latter affects the element we target and all of its children.

Here is an example of how we would add 80% opacity to a div:

div {
opacity: 0.8;
}

Browser support: RGBA is supported by Webkit-based browsers. No Internet Explorer browser supports it. :13: Firefox 2 does't support it either, but Firefox 3 does, as does Opera 9.5. Opacity is supported by Opera and Webkit- and Gecko-based browsers, but is not supported by either IE release.

กับอีกอันคือใส่เงาให้กับข้อความ :25:

อ้างอิงThe CSS for the website's main navigation shows the following:

.signup_area p {
   text-shadow: rgba(0,0,0,.8) 0 1px 0;
}

Here, we have the shadow color (using RGBA, see above), followed by the right (x coordinate) and bottom (y coordinate) offset, and finally the blur radius.

To apply multiple shadows to a text, separate the shadows with a comma. For example:

p {
text-shadow: red 4px 4px 2px,
      yellow -4px -4px 2px,
      green -4px 4px 2px;
}

Browser support: Webkit-based browsers and Opera 9.5 support text-shadow. Internet Explorer doesn't support it, and Firefox will only support it in version 3.5.

ตูเกลียดมัน :07:

แล้วก็อื่นๆ อีกเพียบเลย ที่ http://www.smashingmagazine.com/2009/06/15/take-your-design-to-the-next-level-with-css3/ (http://www.smashingmagazine.com/2009/06/15/take-your-design-to-the-next-level-with-css3/)
ดูแล้วน่าตื่นตาตื่นใจระคนสมเพชเวทนาคนใช้ IE :13: มากๆ ครับ

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: กากก่อเกรียนนู้บ เมื่อ 22 มิ.ย. 2009, 01:07 น.

:07: กรี๊ดด ตอนนี้เค้าเริ่มใช้กันแล้วใช่ไหมครับ css3 เนี่ย
น่าเล่นมากๆ :07a:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 22 มิ.ย. 2009, 01:11 น.

เขาเริ่มกันทำแล้วครับ แต่คนดูยังไม่พร้อม :3005:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: JÎ›NÎ£ เมื่อ 23 มิ.ย. 2009, 17:49 น.

คนทำเว็บรุ่นดึกดำบรรพ์ ก็ยังไม่พร้อมครับ :3005:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: ej_sing เมื่อ 26 มิ.ย. 2009, 23:21 น.

ู^
^
ตอบไปรีพลายนู้นนนน :31:

Id , class ตาม css w3c standard ( ตามที่ลอง validate w3c แล้วผ่าน และที่เคยลองๆมา )

id : ไม่ควรมี id ซ้ำกันในหนึ่งหน้า page - เช่นพวกที่เป็นกล่องหลักๆ #warp #header #menuNav #content #footer ฯลฯ

class : ใช้ซ้ำๆกันได้ไม่จำกัด ใช้บ่อย ประมาณนั้น
แบบ class ในภาษาโปรแกรมต่างๆแหล่ะมั๊งครับ เรียกแม่แบบ

ดูตัวอย่างตามเว็บที่ใช้ css แบบถูกต้องตามมาตรฐานก็ได้ครับ

ประมาณนั้นนะครับ ผิดพลาดประการใด ขออภัยล่วงหน้า

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 03 ก.ค. 2009, 23:53 น.

เจออันนี้มาครับ เป็นประโยชน์อย่างมาก(กับตู)

ทำ layout ให้สูงเท่ากันทุกคอลัมน์ (http://www.divland.com/blog/2009/07/01/equal-height-column/)

:14: :14: :14: :14:

ต้นฉบับ
http://www.projectseven.com/tutorials/css/pvii_columns/index.htm (http://www.projectseven.com/tutorials/css/pvii_columns/index.htm)

ตัวอย่างการใช้งาน
http://www.projectseven.com/tutorials/css/pvii_columns/col2fixed.htm (http://www.projectseven.com/tutorials/css/pvii_columns/col2fixed.htm)

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: Layiji เมื่อ 04 ก.ค. 2009, 14:46 น.

โอยจาวาเลยเหรอ

เห็นอย่างนี้แล้วยิ่งกลับมาใช้ table เหมือนเดิม :30:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: โตน เมื่อ 04 ก.ค. 2009, 15:37 น.

กลับมาใช้ table กันเถอะ :25:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: JÎ›NÎ£ เมื่อ 04 ก.ค. 2009, 16:27 น.

อ้างคำพูดจาก: โตน เมื่อ 04 ก.ค. 2009, 15:37 น.

กลับมาใช้ table กันเถอะ :25:

\:3005:/ เป็นอีกคนนึงที่ใช้ div ไม่เป็นเลย

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: ยุนเอ เมื่อ 04 ก.ค. 2009, 16:48 น.

คืนครูไปหมดแล้วครับ div integrate เนี้ย

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: icez เมื่อ 04 ก.ค. 2009, 18:30 น.

อ้างคำพูดจาก: โตน เมื่อ 04 ก.ค. 2009, 15:37 น.

กลับมาใช้ table กันเถอะ :25:

0-0/ ถ้ามันวุ่นวายนัก ผมว่าใช้ table ง่ายกว่ามั้ย :30:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: ej_sing เมื่อ 04 ก.ค. 2009, 20:10 น.

อ้างคำพูดจาก: iannnnn เมื่อ 03 ก.ค. 2009, 23:53 น.
เจออันนี้มาครับ เป็นประโยชน์อย่างมาก(กับตู)

ทำ layout ให้สูงเท่ากันทุกคอลัมน์ (http://www.divland.com/blog/2009/07/01/equal-height-column/)

:14: :14: :14: :14:

ต้นฉบับ
http://www.projectseven.com/tutorials/css/pvii_columns/index.htm (http://www.projectseven.com/tutorials/css/pvii_columns/index.htm)

ตัวอย่างการใช้งาน
http://www.projectseven.com/tutorials/css/pvii_columns/col2fixed.htm (http://www.projectseven.com/tutorials/css/pvii_columns/col2fixed.htm)

:25: นี่ล่ะที่เคยตามหา ......( แอบไปใช้ table ตลอด )

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: Rabbitinblack เมื่อ 04 ก.ค. 2009, 21:30 น.

บางคนพยายามทำยังไงก็ได้ ไม่ให้มีอะไรเกี่ยวกับ table ในเว็บ :56:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: หนุ่ม เมื่อ 05 ก.ค. 2009, 14:22 น.

น่าลองๆ :25:

ผมใช้ตัวนี้อยู่
http://www.dynamicdrive.com/style/blog/entry/css-equal-columns-height-script/ (http://www.dynamicdrive.com/style/blog/entry/css-equal-columns-height-script/)

ใส่ ID ที่ต้องการให้มันเท่ากันลงไปใน js

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 05 ก.ค. 2009, 14:48 น.

:25:
ใช้ได้เหมือนกันเหรอครับ ขอลองมั่ง

ส่วนอันข้างบนที่ว่านั่น
ตอนนี้ใช้อยู่ที่ www.zhezagang.com (http://www.zhezagang.com) ครับ (หามานาน)

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: tudut เมื่อ 12 ก.ค. 2009, 00:17 น.

จริง ๆ แล้วผมงงมากนะครับ สำหรับ CSS ผมซื้อหนังสือมาหนึ่งเล่มแล้วครับ แต่ก็ันั้นแหล่ะครับ

ไม่เข้าใจ ไม่ทราบว่าจริงๆ แล้วเราสามารถนำ Code ต่าง ๆ แยกเป็นชิ้นย่อย ๆ แล้วค่อยนำมาใส่ใน HTML อันเดียวได้หรือไม่ครับผม

ขอบคุณก่อนล่วงหน้าครับ :45:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 12 ก.ค. 2009, 00:36 น.

ได้ครับ จริงๆ แล้วนั่นแหละจุดขายของ css เลย

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 23 ก.ค. 2009, 21:37 น.

แก้ปัญหาอวัยวะเว็บขี่กัน
เคยเจอไหมครับเวลากำหนดอะไรที่มัน floatๆ แล้ว
อยู่ดีๆ ไอ้อันล่างมันก็ทะลึ่งขึ้นมาซ้อนอันบน

ปกติวิธีแก้ที่เราใช้ๆ กันก็คือ สร้างอะไรขึ้นมาก้อนนึง (สมมติว่าเป็น div)
แล้วก็ใส่ css บอกมันให้ clear ให้ที

แต่ทีนี้ถ้าว่ากันตรงๆ มันผิดหลักคอนเซปต์ของ css ที่ดี (เพราะมีอวัยวะเกินมาอันนึง)
ดังนั้น thaicss เลยบอกว่าให้ลองใช้วิธีันี้ดูครับ (ในที่นี้ header ซ้อนกะ section)

โค้ด เลือกทั้งหมด

   body>header:first-child+section:after  {
   content:  " ";
   display:  block;
   clear:  both;
   }

โดยสรุปคือให้ css มันสร้างคอนเทนต์เปล่าๆ ขึ้นมาอันนึง (ตรงบรรทัด content) แล้วก็บอกให้เคลียร์ซะ :12:

ผล http://thaicss.com/lessons/clear.html (http://thaicss.com/lessons/clear.html)

ที่มา thaicss (http://www.thaicss.com/Clear--%28fix%29-%E0%B8%97%E0%B8%B3%E0%B9%84%E0%B8%A1-%E0%B9%81%E0%B8%A5%E0%B8%B0-%E0%B8%97%E0%B8%B3%E0%B9%84%E0%B8%A1%E0%B8%95%E0%B9%89%E0%B8%AD%E0%B8%87-clearfix/)

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 29 ก.ค. 2009, 01:20 น.

F0NTCAMP02 | เบซิกเบสิก CSS (http://www.f0nt.com/forum/index.php/topic,16402.0.html)

ฟค#2 เปิดสอน css ฟรีสำหรับชาวฟร้อนจ้ะ

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 29 ก.ค. 2009, 22:08 น.

ทริปเปิ้ลโพสต์

โค้ด เลือกทั้งหมด

@font-face {
	font-family: Sarabun;
	src: url('/v3/THSarabun-Bold.ttf');
}

กำหนดฟอนต์ให้กับเว็บจ้ะ เป็น css3 นะ
ซึ่งแน่นอนว่าชาวไทยส่วนใหญ่ยังไม่เห็นผล
บรรทัด 2 คือตั้งชื่อฟอนต์แฟมิลี่ตามที่ต้องการ
บรรทัด 3 คือที่อยู่ของไฟล์ฟอนต์ .ttf ที่เก็บไว้สักที่

ตัวอย่างการเอามาใช้คือ

CSS:

โค้ด เลือกทั้งหมด


@font-face {
	font-family: Sarabun;
	src: url('/v3/THSarabun-Bold.ttf');
}

.test {
	font:bold 50px Sarabun,Tahoma;
	color:red;
}

HTML:

โค้ด เลือกทั้งหมด


<span class="test">
ทดสอบการแสดงผลฟอนต์ด้วย CSS3
</span>

ตัวอย่าง:

ทดสอบการแสดงผลฟอนต์ด้วย CSS3

ทั้งนี้ให้ลองทดสอบด้วยเบราว์เซอร์โง่ๆ พวก IE :13:
แล้วจะเห็นว่ามันแสดงฟอนต์สำรอง (Tahoma) แทน
แต่ข้อเสียคือขนาดมันต่างกันเกินไปครับ เลยคุมดีไซน์ยากสักหน่อย

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: JÎ›NÎ£ เมื่อ 29 ก.ค. 2009, 22:15 น.

ทีนี้พวกฟอนต์ละเมิดลิขสิทธิ์ก็จะกระจายอย่างแพร่หลายและรวดเร็ว :30:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 29 ก.ค. 2009, 22:18 น.

โดนจับกันตายห่าล่ะทีนี้ :30:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: Layiji เมื่อ 29 ก.ค. 2009, 22:28 น.

ผมเห็นเป็น tahoma นะ ใช้ ff

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: icez เมื่อ 29 ก.ค. 2009, 22:33 น.

ต้อง FF 3.5 ขึ้นไปอะครับป๋า

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: HJ เมื่อ 29 ก.ค. 2009, 22:40 น.

อ้างคำพูดจาก: icez เมื่อ 29 ก.ค. 2009, 22:33 น.
ต้อง FF 3.5 ขึ้นไปอะครับป๋า

ตอนผมดู คิดในใจ tahoma นี่หว่า

พึ่งกระจ่าง :18:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: ณัฏฐ์ เมื่อ 30 ก.ค. 2009, 00:02 น.

browser ตัวเดียวในเครื่องที่เห็นคือ safari(มี IE chrome FF safari ทุกตัวอัพเดตแล้ว)

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: กันย์ เมื่อ 30 ก.ค. 2009, 00:02 น.

เห็นๆ :25:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 30 ก.ค. 2009, 00:05 น.

http://webfonts.info/wiki/index.php?title=%40font-face_browser_support (http://webfonts.info/wiki/index.php?title=%40font-face_browser_support)
มีรายชื่อเบราว์เซอร์ที่สนับสนุนด้วยจ้ะ
แต่ว่าดูรายละเอียดดีๆ นะ ที่เห็น IE4 นั่นมันเป็นฟอนต์แบบ eot

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: ณัฏฐ์ เมื่อ 30 ก.ค. 2009, 00:20 น.

อ้าวเห็นแล้ว :06:(FF)

สงสัยต้องเปิดรอบสอง
รอบแรกมันโหลดไม่ทัน
(มั้ง)

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 30 ก.ค. 2009, 00:49 น.

ใช่ๆ
เพราะมันต้องโหลดตัวไฟล์ฟอนต์ที่ใช้แสดงผลก่อนน่ะ
ไฟล์นึงก็ 100 กว่าเค :47:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: กากก่อเกรียนนู้บ เมื่อ 30 ก.ค. 2009, 01:56 น.

FF 3.0 ฮะ มองไม่เห้นน :05:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 30 ก.ค. 2009, 01:59 น.

ก็บอกแล้วว่าเริ่มจาก 3.5 :11:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: กากก่อเกรียนนู้บ เมื่อ 30 ก.ค. 2009, 02:06 น.

นั่นแหละครับ แง :05:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 30 ก.ค. 2009, 02:07 น.

แล้วไม่ลงรุ่นใหม่ซะล่ะ :11:
(ทำเป็นงอน)

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: หนุ่ม เมื่อ 30 ก.ค. 2009, 12:01 น.

อ้างคำพูดจาก: iannnnn เมื่อ 29 ก.ค. 2009, 22:08 น.
ทั้งนี้ให้ลองทดสอบด้วยเบราว์เซอร์โง่ๆ พวก IE :13:
แล้วจะเห็นว่ามันแสดงฟอนต์สำรอง (Tahoma) แทน
แต่ข้อเสียคือขนาดมันต่างกันเกินไปครับ เลยคุมดีไซน์ยากสักหน่อย

:25: น่าลองๆ

งั้นเราก็ใช้ css แยก IE ออก น่าจะได้นะ

เห็น path font ใน css จะจะเลย ไม่เหมือน sIFR
ขโมยกันแหลกล่ะทีนี้ :42:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 30 ก.ค. 2009, 12:08 น.

ก็ต้องใช้ฟอนต์ที่เขาอนุญาตให้ Embed แหละครับ
(ตอนนี้ฟอนต์จากทีนี่ก็อนุญาตแล้ว)
หรือไม่ก็ใช้ของฟรีไปเลยโลด

อ้อ พูดถึงแยก IE
ตอนนี้หน้าแรกของฟร้อนเรามีด่าพวกใช้ IE6 แล้วนะ

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: JÎ›NÎ£ เมื่อ 30 ก.ค. 2009, 12:14 น.

ดูมันเล็กๆไปอ่ะ เลยไม่ค่อยน่าสะพรึงกลัวเท่าไหร่ :37:

และโดยธรรมชาติของคนใช้ ie6 แล้ว
รับรองเลยว่ากว่าครึ่งไม่อ่านแน่ๆ เลื่อนลงมาหาที่โหลดฟ้อนต์อย่างรวดเร็ว :30:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 30 ก.ค. 2009, 12:27 น.

เผื่อพนักงานบริษัทหรือตามโรงเรียนที่มันล็อกไม่ให้ลงโปรแกรมไงครับ
เวลาใช้งานจะได้ไม่รำคาญมาก ไม่งั้นได้แดงทุกหน้า :30:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: JÎ›NÎ£ เมื่อ 30 ก.ค. 2009, 13:06 น.

เราต้องกดดันเซ่ :07:

เค้าจะได้ไปกดดันฝ่านไอทีอีกที :30:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: icez เมื่อ 30 ก.ค. 2009, 23:19 น.

อยากเห็นอ๊ะ :05:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: •หมูหมู•™ เมื่อ 01 ส.ค. 2009, 22:58 น.

โครม2.0.172.39 ก็เห็นเป็น ทาโฮมา นะครับ ?

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 01 ส.ค. 2009, 23:27 น.

โครมยังไม่รองรับเลยจ้ะ

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 04 ส.ค. 2009, 00:33 น.

http://www.bloggingcss.com/en/tutorials/the-css3-border-radius-property/ (http://www.bloggingcss.com/en/tutorials/the-css3-border-radius-property/)

ทำกรอบเป็นมุมมนด้วย CSS3 จ้ะ อธิบายละเอี๊ยดละเอียด
Requirements: Firefox 3.0+, Safari 3.1+, Chrome 1.0+

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: กากก่อเกรียนนู้บ เมื่อ 04 ส.ค. 2009, 00:37 น.

:07c: กรี๊ดกร๊าด ของใหม่น่าลองมากก

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: ณัฏฐ์ เมื่อ 04 ส.ค. 2009, 01:19 น.

:07: น่าเล่นมาก มีไอ้เฉียงๆ ด้วย

ปล.แต่คงอีกนานกว่าจะได้ใช้จริงๆ
ตอนนี้ขอ ie มันแสดงผลตรงกับชาวบ้านก่อน= =(ที่จริงโครมก็ยังไม่ค่อยตรงอะนะ)

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: กากก่อเกรียนนู้บ เมื่อ 04 ส.ค. 2009, 01:38 น.

คือถ้าจะใช้นี่ จะได้แบนเบราเซอร์ที่เหลือไปเลย :30:

เป็นเว็บที่อิงคนทำเว็บเป็นหลักมากๆ :30:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: Bellbells เมื่อ 04 ส.ค. 2009, 15:17 น.

ทำเว็บเสร็จ เจ้านายใช้ ie 6 ตรวจงาน มันก็เบี้ยวๆพังๆ ตอนนี้ต้องกลับมาแก้ css ใหม่ ให้มันไม่พังในทุกบราวเซอร์ :01:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: X11 เมื่อ 04 ส.ค. 2009, 16:44 น.

แล้วก็กลับไปใช้ table เย้... \:33:/

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: NooKSTYLE เมื่อ 04 ส.ค. 2009, 17:40 น.

\:07:/ ...เย้

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: Rabbitinblack เมื่อ 04 ส.ค. 2009, 21:34 น.

อ้างคำพูดจาก: เบล เมื่อ 04 ส.ค. 2009, 15:17 น.
ทำเว็บเสร็จ เจ้านายใช้ ie 6 ตรวจงาน มันก็เบี้ยวๆพังๆ ตอนนี้ต้องกลับมาแก้ css ใหม่ ให้มันไม่พังในทุกบราวเซอร์ :01:

:05: โดนประจำเหมือนกัน

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: หนุ่ม เมื่อ 05 ส.ค. 2009, 11:21 น.

\:05:/

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 11 ส.ค. 2009, 01:57 น.

ของเจ๋งจาก Smashing จ้ะ

http://css-tricks.com/date-display-with-sprites/ (http://css-tricks.com/date-display-with-sprites/)

โอยตายๆๆ :07c:
พี่แกใช้เทคนิค sprite (หันภาพแล้วจัดวางเอาเป็น bg)
มาทำให้ css แสดงแถบวันที่แบบโคตรจ๊าบได้ยังงี้เลย
คิดไม่ถึง! :07b:

(หรือถ้าจะทำตัวหนังสือเอียงจริงๆ ก็ดูนี่ http://snook.ca/archives/html_and_css/css-text-rotation (http://snook.ca/archives/html_and_css/css-text-rotation))

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: หนุ่ม เมื่อ 11 ส.ค. 2009, 17:44 น.

:07a: จ๊าบเป้งสุดๆ

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 15 ส.ค. 2009, 23:54 น.

จากจู๋ ฟค2 | เบสิก CSS นะครับ ขอแอบอ้างมาแปะไว้ที่นี่อีกที
เผื่อใครขี้เกียจเข้าไปชมภาพบรรยากาศแต่อยากได้ไฟล์ตัวอย่างสักอัน
หรืออยากรู้ว่าเขาสอนอะไรกันบ้าง ก็โหลดได้จากลิงก์ในแอบอ้างนี้จ้ะ

อ้างคำพูดจาก: iannnnn เมื่อ 15 ส.ค. 2009, 23:50 น.
พอเปิดไฟล์ตัวอย่างเมพ (โหลดข้างบน (http://www.f0nt.com/forum/index.php/topic,16402.msg1314141.html#msg1314141)) มาดู
เลยนึกได้ว่าวันนี้ลืมพูดไปเรื่องนึง
คือเรื่องที่กูเกิ้ลเขาใช้ไฟล์ภาพไฟล์เดียว แต่เอามาแบ่งการแสดงผลเป็นหลายๆ ส่วน
เอามาทำปุ่มเวลาปกติและเวลา hover เพื่อลดภาระในการโหลดไฟล์หลายๆ ไฟล์ครับ

หลักการคือสร้างก้อนอะไรสักก้อนที่ระบุความกว้าง/ความสูงไว้
แล้วก็ใช้ background (ที่ขนาดใหญ่เกินพื้นที่ที่ว่า)
โดยกำหนด position ในการแสดงผล มันก็จะถูกคัดมาแสดงแค่บางส่วนของภาพ
เราเรียกมันว่า Sprite ยังไงดูได้จาก http://delicious.com/iannnnn/sprite (http://delicious.com/iannnnn/sprite)

เทคนิคนี้จะช่วยตอบคำถามเรื่องเว็บกากนั่น(พูดด้วยความริษยา)ให้บุ๋มกะกวางที่ถามมาจ้ะ

ดูตัวอย่างได้ที่นี่ :53:
เอาเมาส์ลองชี้ๆ ตรงโลโก้ตัวนี้แหละจ้ะ มันจะเปลี่ยนรูปได้ :51:

อันนี้โค้ด HTML
โค้ด เลือกทั้งหมด ขยายเนื้อหา
<a href="#"> <span class="test"></span> </a>

ส่วนอันนี้ CSS
โค้ด เลือกทั้งหมด ขยายเนื้อหา
a span.test { display:block; width:90px; height:40px; background: #aaa url('http://www.f0nt.com/forum/Themes/iannnnn11/images/logo.png') no-repeat 0 0; } a:hover span.test { background: #aaa url('http://www.f0nt.com/forum/Themes/iannnnn11/images/logo.png') no-repeat -85px 0; }

เห็นไหมว่าหลักการคือ
- กำหนดความกว้างความยาวของ span (หรือก้อน div ก็แล้วแต่ถนัด) เอาไว้
- ใช้ background image ที่ใหญ่กว่าขอบเขตที่กำหนดเป็นพื้นที่ของปุ่ม
- ใช้การกำหนดพิกัดของภาพที่นำมาแสดง ทั้ง a ธรรมดา และ a:hover
:12:

ส่วนอันนี้คือภาพที่เอามาหั่นเป็น Sprite ของกูเกิ้ลเขา --> (http://www.google.com/images/nav_logo6.png) :18: :18: :18:

เดี๋ยวเอาไปแปะในจู๋ CSS เด็ดๆ ด้วยล่ะ

อ้อ ไฟล์ตัวอย่างที่แนบไว้ในลิงก์ข้างบนนั่นเพิ่งนึกได้ว่าควรจะบันทึกไว้เมื่อตอนเย็นใกล้จะเลิกสอนนี่เอง :08:
ถ้าอยากดูแบบเต็มๆ ว่ามีอะไรอีกบ้าง เดี๋ยวรอหนูอร น่าจะมีจดเลกเชอร์ไว้ครับ

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: ณัฏฐ์ เมื่อ 16 ส.ค. 2009, 00:20 น.

จะบังด้านขวายังไงครับ?
เพราะตอนนี้ชี้ที่ด้านขวามันก็ยังเลื่อนอยู่(ถึงจะมองไม่เห็น)

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 16 ส.ค. 2009, 01:06 น.

:09: บังด้านขวาหมายความว่าไงครับ อะไรเลื่อนๆ :09:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: icez เมื่อ 16 ส.ค. 2009, 01:11 น.

ลองเอาเมาส์ชี้ตรงที่ว่างด้านหลังรูปดูอะครับ

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 16 ส.ค. 2009, 01:15 น.

อุ๊ย :56:

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

หรือ

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

โค้ด เลือกทั้งหมด

a.class12345 {
display:block;
width:90px;
}

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 17 ส.ค. 2009, 11:51 น.

เอาเป็นว่าใครที่พลาดงาน ฟค2 ไป
สามารถอ่านบรรยายสรุปได้ที่นี่จ้ะ

http://www.f0nt.com/forum/index.php/topic,16402.msg1314919.html#msg1314919 (http://www.f0nt.com/forum/index.php/topic,16402.msg1314919.html#msg1314919)

เครดิตหนูอร :12: จดเก่งโคตรๆ

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 17 ส.ค. 2009, 17:43 น.

เบิ้ลหน่อย

http://www.webdesignerdepot.com/2009/08/5-css3-design-enhancements-that-you-can-use-today/ (http://www.webdesignerdepot.com/2009/08/5-css3-design-enhancements-that-you-can-use-today/)
มาอีกละ ยั่วใจกันด้วยห้าเทคนิคเมพโคตรของ CSS3 แต่คุณสามารถทดลองใช้ได้แล้ววันนี้!!!
(หมายถึงคนที่ไม่ได้ใช้ IE :13: นะ)

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: Layiji เมื่อ 17 ส.ค. 2009, 17:45 น.

เอียงได้ drop shadow ได้ จบเลยครับ :07:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 17 ส.ค. 2009, 17:49 น.

ยังไม่จบครับ กว่า IE9 จะมาถึงผู้ใช้ตามครัวเรือน
ก็ล่อไปอีก 8 ปีครับ :3005:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: ณัฏฐ์ เมื่อ 17 ส.ค. 2009, 21:05 น.

:0712:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 18 ส.ค. 2009, 00:05 น.

เจอของดีอีกแล้วมาจาก Smashing Magazine (http://www.smashingmagazine.com/2009/08/17/taming-advanced-css-selectors/)
ดูตัวอย่างเลยดีกว่า แล้วค่อยอธิบาย

อ้างอิงinput:not([type="submit"]) {
   width: 200px;
   padding: 3px;
   border: 1px solid #000000;
   }

หรือ

อ้างอิง.post p:not(.date) {
font-size: 13px;
}

ใช่แล้วครับ not แปลว่าไม่
ใช้ในกรณียกเว้นเฉพาะเจาะจงครับ

มีอย่างอื่นอีกเพียบเลยนะ แต่อ่านแล้วไม่รู้จะเอามาใช้ตอนไหนดี :3005:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: Layiji เมื่อ 18 ส.ค. 2009, 10:12 น.

มันอะไรกันเนี่ย มีใส่สูตรกันด้วย :41:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: Ou! เมื่อ 18 ส.ค. 2009, 10:32 น.

ชักจะงงว่าเมื่อไรใช้วงเล็บแบบไหน :37:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: หนุ่ม เมื่อ 18 ส.ค. 2009, 11:11 น.

อ้างคำพูดจาก: iannnnn เมื่อ 18 ส.ค. 2009, 00:05 น.
มีอย่างอื่นอีกเพียบเลยนะ แต่อ่านแล้วไม่รู้จะเอามาใช้ตอนไหนดี :3005:

เช่นกัน :3005: :3005:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: i P i x e l เมื่อ 28 ส.ค. 2009, 17:49 น.

... ตัดสินใจมาตั้งคำถามครับ ...
... หลังจากอ่านกระจู๋ 27 หน้านี้จนตาแฉะ (ยังไม่นับกระจู๋ css อื่น ๆ และใน อร่อย/css ของยักษ์แอน) ...
... และงมโข่งด้วยความสามารถอันล้นหลามของตัวเองมาหลายวันแล้ว ก็ยังทำไม่ได้ ...
... โจทย์ผมเป็นแบบนี้น่ะครับ ...

(http://img3.f0nt.com/28/74aff240888b3ac966782ec60fa9232f.jpg)

ดูเว็บจริงได้ที่ ชมรมคนรักเกาะสุรินทร์ (http://www.savekohsurin.com)

... ไอ่ด้านซ้าย ทำได้แล้วครับ โดย set ค่า margin-left: -ขนาดรูป ...
... แต่ไอ่ด้านขวา พอใช้เทคนิคแบบเดียวกัน ตำแหน่งมันได้เหมือนกันครับ ...
... แต่ปัญหาของผมคือ มันมี horizontal scrollbar มากวนใจครับ ...
... เพราะมันมองว่า ไอ่ชิ้นที่เกินไปทางขวา เป็น content ของเว็บ ...
... พอจะมีวิธีมั้ยครับ ที่จะทำให้ h-scrollbar หายไป ...

:55:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 28 ส.ค. 2009, 22:07 น.

อย่าไปแบ่งเป็นตารางๆ แบบ table ครับ
ให้ลืมวิธีแบบนั้นไปเลย :12:

ถ้าเป็น table เนี่ยมันต้องตีกรอบเป็น 9 ช่องก่อน
แล้วค่อยซอยๆๆ เอาภาพฉากหลังไปวางถมให้เต็ม

แต่กับ css เนี่ย ให้ตั้งพื้นหลัง 1 ผืน ใหญ่ๆ ไปเลย
แล้วเอาผืนสีขาวไปวางตรงกลางให้มันลอยเคว้งๆ
(สั่งให้มัน margin:0 มันจะจัดกลางหน้าเองทั้งผืน)

(http://img3.f0nt.com/28/581710022622af2db9ee54ffca985a99.png)

เนี่ย คร่าวๆ แบบนี้ครับ

โอ๊ะ ขอโทษๆ :03: (ปิด ฟตช ไปแล้วด้วย)
เพิ่งเห็นว่าพื้นหลังของด้านบนและด้านล่างเป็นภาพเดียว ไม่ได้ Repeat แนวนอน
ดังนั้นตรงการตั้งค่าภาพฉากหลังของทั้งสองอันให้เป็น

โค้ด เลือกทั้งหมด

background:(xxx.jpg) top center no-repeat #5A93EA;

แทนนนะครับ

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: i P i x e l เมื่อ 29 ส.ค. 2009, 01:15 น.

... ถ้ามันจะเป็นแผ่นเดียว งั้นรูปมันก็ใหญ่บะเฮ้มเลยสิครับ ...
... กลัวจริง ๆ จะมีใครยังใช้เน็ทเต่า ๆ อยู่อีกมั้ยเนี่ย (ผมว่าตามองค์กรรัฐก็ยังมีนะ pc เต่า ๆ เน็ทเน่า ๆ) ...
... แต่ซุปเปอร์ง่ายเลยครับ คิดไม่ถึงเลย หัวสมองยังคงถูกโลกของตารางครอบงำ เอิ๊ก :55: ...
... ขอบคุณทั่น~~ป๋าซุ่ม~~แอนมากคับ ...

:51:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 29 ส.ค. 2009, 01:23 น.

ถ้าย้อนไปหน้าแรกๆ ก็จะพบว่าตูยังคิดแบบตารางเอามาใช้กะ css อยู่เหมือนกันนะ :3005:
ก็เพิ่งมาหัดเอาตอนที่สนใจจริงจังนี่แหละครับ :3005:

ส่วนเรื่องภาพใหญ่ไม่ใหญ่นั้น ก็ต้องลองหาวิธี Optimize ภาพเอาครับ (เช่นโปรแกรม Roit)
ภาพฉากหลังขนาดไม่เกินร้อยเค ก็น่าจะพอไหวนะสำหรับเน็ตปัจจุบัน :12:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 29 ส.ค. 2009, 02:11 น.

เบิ้ลจ้ะ

ดีใจมาก :05: ที่ตะกี้นั่งแกะไอ้นี่มาสำเร็จ

http://www.fremontoktoberfest.com/ (http://www.fremontoktoberfest.com/)

สังเกตตรง Sidebar สีเหลืองด้านขวานะครับ :25:
คือตูหาวิธีทำกล่องข้อความที่เป็น(ภาพ)ขอบมนมานานแล้ว
บางวิธีก็โอเคนะ แต่บางวิธีอ่านแล้วงงมาก
จนมาเจออันนี้ เออ ง่ายดีวุ้ย แถมใช้ฉากหลังภาพเดียวเที่ยวรอบโลกด้วย :07:

สังเกตไตเติ้ลของแต่ละกล่อง เป็นชื่อกล่องคนละชื่อกัน
แต่นั่นแหละ ตัดส่วน (Sprite) มาจากภาพเดียวกัน

อ้ะ นี่คือวิธีทำครับ

HTML

โค้ด เลือกทั้งหมด


<div id="boxbox">
	<div id="twitter" class="boxbox-box">
		<h1>Twitter</h1>
		<div class="boxbox-content">กล่อง</div>
	</div>
</div>

CSS

โค้ด เลือกทั้งหมด

		body {background:#4D241C; color:#621; font-size:13px;} 
		/* กำหนดสีกับฟอนต์เฉยๆ */
	
		#boxbox { width: 240px; float:left;}
		/* กำหนดขนาดกล่อง และการจัดวาง */
	
		#boxbox .boxbox-box { background: transparent url(box.png) repeat-y center; }
		/* กำหนดพื้นหลังเป็นภาพเดียวกันทำซ้ำไปเรื่อยๆ ในแนวตั้ง--สังเกตภาพต้นฉบับว่าคัดมาแค่พิกเซลกลางๆ ที่ความกว้างเท่ากล่อง */
	
		#boxbox .boxbox-content { min-height: 60px; background: transparent url(box.png) no-repeat bottom left; }
		/* กำหนดพื้นหลังส่วนล่างของกล่อง สังเกตว่าดึงส่วนซ้ายล่างของภาพมาใช้  */
	
		#boxbox h1 { width: 240px; height: 37px; margin: 0 0 20px 0; text-indent: -9999px; }
		/* อันนี้เป็นไตเติ้ลของกล่อง กำหนดแค่ขนาดพื้นที่ของมันเฉยๆ  */
	
		#twitter h1 { background: transparent url(box.png) no-repeat top right; }
		/* กำหนดพื้นหลังของไตเติ้ล */
	
		#twitter .boxbox-content { padding: 0 20px 20px 20px; }
		/* อันนี้กำหนดระยะห่างจากขอบกล่องถึงเนื้อหา  */

ผลที่ได้ก็ตามไฟล์แนบเลยครับ แกะมาให้สำเร็จละ :12:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: Layiji เมื่อ 29 ส.ค. 2009, 08:52 น.

:07: ขอลอกๆ

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 31 ส.ค. 2009, 12:17 น.

http://www.barelyfitz.com/screencast/html-training/css/positioning/ (http://www.barelyfitz.com/screencast/html-training/css/positioning/)
อธิบายเรื่อง CSS Position แบบเห็นปุ๊บเข้าใจทันที :25:
มีเรื่อง position แล้วก็ float ด้วยนะจ๊ะ

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: Bellbells เมื่อ 31 ส.ค. 2009, 13:40 น.

:25: :25: :25: กรี้ดดดดดดดดด

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: กากก่อเกรียนนู้บ เมื่อ 01 ก.ย. 2009, 04:41 น.

อ้างคำพูดจาก: เบล เมื่อ 31 ส.ค. 2009, 13:40 น.
:25: :25: :25: กรี้ดดดดดดดดด

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 02 ก.ย. 2009, 14:52 น.

http://webdeveloperplus.com/css/25-incredibly-useful-css-tricks-you-should-know/ (http://webdeveloperplus.com/css/25-incredibly-useful-css-tricks-you-should-know/)
25 ทิปน่ารู้ครับ
มีเรื่องที่เราสงสัยๆ กันหลายอย่างเลยนะ

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: IM เมื่อ 02 ก.ย. 2009, 15:05 น.

สงสัยอย่างแรก :47:

มันเขียนว่าอะไรบ้าง :05:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: JÎ›NÎ£ เมื่อ 02 ก.ย. 2009, 16:12 น.

ใช้ CSS กำหนดสีเวลาปาดตัวหนังสือได้ครับ

Before
(http://img3.f0nt.com/02/e571ddc062d85d7e9d985c720cd86846.png)

After
(http://img3.f0nt.com/02/294bbf8b72e05f9dd2104b5fc8cc2bda.png)

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 02 ก.ย. 2009, 17:08 น.

อันนี้เมพมาก :07:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: กันย์ เมื่อ 02 ก.ย. 2009, 18:07 น.

เมพทากๆ :07:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: Bellbells เมื่อ 02 ก.ย. 2009, 18:29 น.

:07: :07: โอ้ววไๆๆๆๆๆ

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 02 ก.ย. 2009, 20:23 น.

เมพแค่ไหนก็ไม่รอดเมื่อเจอไออี :07: :13:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: กันย์ เมื่อ 02 ก.ย. 2009, 21:05 น.

Backgrounds In CSS: Everything You Need To Know
http://www.smashingmagazine.com/2009/09/02/backgrounds-in-css-everything-you-need-to-know/ (http://www.smashingmagazine.com/2009/09/02/backgrounds-in-css-everything-you-need-to-know/)

:12: :12: :12:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: Bellbells เมื่อ 02 ก.ย. 2009, 21:12 น.

:25: :25: เจ๋ง

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: NooKSTYLE เมื่อ 03 ก.ย. 2009, 04:57 น.

อ้างคำพูดจาก: กันย์ เมื่อ 02 ก.ย. 2009, 21:05 น.
Backgrounds In CSS: Everything You Need To Know
http://www.smashingmagazine.com/2009/09/02/backgrounds-in-css-everything-you-need-to-know/ (http://www.smashingmagazine.com/2009/09/02/backgrounds-in-css-everything-you-need-to-know/)

:12: :12: :12:

maintenance

:08:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: IM เมื่อ 03 ก.ย. 2009, 08:37 น.

อ้างคำพูดจาก: นุ้กสไตล์ เมื่อ 03 ก.ย. 2009, 04:57 น.

maintenance

:08:

:25: :25: เจ๋ง

:05:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: เดอะบุ๋ม เมื่อ 03 ก.ย. 2009, 16:11 น.

พี่แอนกับพี่เจนเจ๋งมาก :07:

ขอบคุณค่า :07:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: Layiji เมื่อ 03 ก.ย. 2009, 23:03 น.

ช่วยด้วยครับ :46:

(http://img3.f0nt.com/03/3592b55b6c4ba3ff76e7758c1859fbcb.jpg)

ผมอยากได้แบบนี้ครับ แต่ในภาพนี้ตรง entry ผมต้องเคาะ enter จนสุดหน้า

(http://img3.f0nt.com/03/032a646c6f6756238a90a14b84674ca1.jpg)

ถ้าไม่มี enter จะทับกันแบบนี้ครับ

เหมือนว่าตรง entry มันไม่สูงตามไปด้วย ทำยังไงดีครับ

โค้ด เลือกทั้งหมด


<!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 type="text/css">
<!--
#pic {
	margin: 0px 20px 0 0;
	border: 1px solid #999;
	position: relative;
	padding: 10px;
	float: left;
	display:block;
	clear:both;
	height:auto;
}
.post {

}



.post .title {

	margin: 0;

	border-bottom: 1px dashed #D6C9BF;

      margin-top: 15px;

      font: 20px tahoma;

      color: #737373;

}



.post h2.title {

	height: 40px;

      font-size: 2.4em;

	padding: 0px 0px 5px 0px;   

      margin: 20px 50px 0px 10px;

}



.post p {

	 font: 12px tahoma;

       color: #737373;

       padding-left: 0px;

       padding-right: 20px;

}










.entry {
	height:auto;
	font:tahoma;
	font-size:12px;
	margin: 0px;
	padding: 10px 10px;
	clear:both

}



.meta {

	height: 35px;

	padding: 15px 0 0 30px; 


      background: url(images/post_icon.gif) no-repeat left;

      background-position: 10px;
	  position:relative;

}



#wrap
{
	width: 500px;
	position:relative;
	float:left;
	
	}
-->
</style>
</head>

<body>
<div id="wrap">
     
     <div class="post">

      <h2 class="title">หัวข้อข่าว</h2>

      <div class="entry">			

      <div id="pic"><img src="http://www.varasarn.net/wp-content/uploads/2009/09/rn.jpg" alt="rn" width="150" height="150" /></div> 
      <p>หลังจากที่มีน้องๆให้ความสนใจกันมากมาย นับในบอร์ดได้ 2 คนถ้วน
        ค่ายรังนกครั้งที่ 3 ก็ได้เริ่มเปิดรับสมัครแล้ว      </p>
      </div>
      <div class="meta">Filed under: หมวด | Posted on 12-12-2009  by layiji | เม้น 20 </div>

		</div>
        
         <div class="post">

      <h2 class="title">หัวข้อข่าว</h2>
	</div>
</div>
</body>
</html>

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: Rabbitinblack เมื่อ 03 ก.ย. 2009, 23:09 น.

พี่เลย์กำหนด height ให้กับ class entry ได้นิครับ

ผมลองกำหนดให้ class entry มี height: 200px;

ก็ได้ตามที่พี่เลย์ต้องการนะครับ

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 03 ก.ย. 2009, 23:21 น.

จริงๆ จะทำยังงั้นก็ได้
แต่ถ้าแบบนั้นมันจะติดปัญหาอื่นๆ ที่ตามมาอีก
(อาทิ เวลาย่อขยายหน้า หรือผู้ใช้กำหนดขนาดฟอนต์อื่นๆ หรือดูในสื่ออื่นๆ ที่ไม่ใช่พีซี ฯลฯ)

ดังนั้นวิธีแก้คือเวลาพี่เลย์เขียนไอ้พวกนี้ ลองจัดย่อหน้าให้มันสวยๆ
จะได้อ่านง่ายขึ้น และเช็กง่ายขึ้นครับ :30:

อ้ะ ตูแก้มาตามนี้

1. ย้าย .meta ออกมาจาก .post
2. ใส่ css เพิ่มลงไปที่ .post ว่า overflow:hidden;

เท่านี้แหละจ้ะ
อ้อ ในไฟล์แนบนี่มีเน้นสีนิดนึงนะครับ จะได้รู้ว่ามันหลุดลงไปข้างล่างแล้ว

ป.ล.ทั้งคู่เลย วันเรียน css ไม่ยอมมมากัน :0705:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: icez เมื่อ 03 ก.ย. 2009, 23:25 น.

.meta {

height: 35px;

padding: 15px 0 0 30px;

background: url(images/post_icon.gif) no-repeat left;

ใส่ clear:both; เพิ่มเข้าไปเลยครับ

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 09 ก.ย. 2009, 00:29 น.

11 Classic CSS Techniques Made Simple With CSS3 - Nettuts+ (http://twitter.com/link_click_count?url=http%3A%2F%2Fbit.ly%2F3VNE75&linkType=web&tweetId=3844314437&userId=14211527&authenticity_token=ec7b1135eae43d29e7a6aed0bcaaf30f04fa0ecc)

อ่านแล้วนอกจากจะได้ความรู้เรื่อง CSS3 แล้ว
ยังได้ความรู้เรื่อง CSS เดิม + javascript ด้วยครับ :25:
มีหมดเลย ทำเงา ทำโปร่ง เปลี่ยนตัวอักษร มุมมน ฯลฯ

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: Layiji เมื่อ 09 ก.ย. 2009, 10:05 น.

forbidden :05:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: JÎ›NÎ£ เมื่อ 09 ก.ย. 2009, 10:16 น.

แก้ link ให้ครับ

11 Classic CSS Techniques Made Simple With CSS3 - Nettuts+ (http://net.tutsplus.com/tutorials/html-css-techniques/11-classic-css-techniques-made-simple-with-css3/)

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: เบียร์ เมื่อ 09 ก.ย. 2009, 10:18 น.

ไม่ทัน กำลังจะมาแก้ให้พอดี :05:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 09 ก.ย. 2009, 10:27 น.

คนดีชอบแก้ไข :25:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 29 ก.ย. 2009, 23:28 น.

ว่าจะไปแปะในจู๋ด่า IE
แต่เอาที่นี่ดีกว่า

http://www.positioniseverything.net/explorer.html (http://www.positioniseverything.net/explorer.html)
รวมฮิตบั๊ก IE และวิธีแก้ไข (เฉพาะในส่วนของ CSS)

มีบั๊กใน IE7-8 ด้วยนะ :3005:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 06 ต.ค. 2009, 14:25 น.

Mastering CSS Coding: Getting Started « Smashing Magazine (http://www.smashingmagazine.com/2009/10/05/mastering-css-coding-getting-started/)

อ่านลิงก์นี้สามจบคบไม่ได้ เป็นเซียน CSS ทันที
(เวอร์ไป)

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: NooKSTYLE เมื่อ 06 ต.ค. 2009, 14:32 น.

:25: :25: :25:

กำลังจะลุย CSS แบบจริงๆจังๆพอดีเลยครับ :46:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: กากก่อเกรียนนู้บ เมื่อ 06 ต.ค. 2009, 17:42 น.

:07c: กรี๊ดดดดดดดดดด นี่แหละๆๆๆๆ ที่ต้องการๆๆ
ขอบคุณครับพี่แอน+

อีเบล เอ็งมาอ่านนี่เลยนะ :39b:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 06 ต.ค. 2009, 17:47 น.

:07: ใช่ๆ อีเบลมาอ่านเลยนะ

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: Bellbells เมื่อ 06 ต.ค. 2009, 17:51 น.

:11: เก็บดาวจู๋แรกนะจะบอกให้

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: ณัฏฐ์ เมื่อ 07 ต.ค. 2009, 00:01 น.

:51:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 12 ต.ค. 2009, 16:42 น.

เจอของเจ๋งมาจาก woork
Really simple CSS trick for equal height columns – woorkup.com (http://woorkup.com/2009/10/11/really-simple-css-trick-for-equal-height-columns/)

ทำคอลัมน์ซ้ายขวาให้สูงเท่ากัน
โดยใช้สูตรขี้โกงแบบง่ายอย่างนึกไม่ถึง :30:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 14 ต.ค. 2009, 23:57 น.

CSS Differences in Internet Explorer 6, 7 and 8 « Smashing Magazine (http://www.smashingmagazine.com/2009/10/14/css-differences-in-internet-explorer-6-7-and-8/)

ความแตกต่างในการแสดงผล CSS ระหว่าง IE6-7-8 :08:
มีหลายอันที่น่าเสียดายที่ควรจะมีใน 7 แต่ก็ไม่มี ต้องโดดไป 8 :05:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: ณต เมื่อ 15 ต.ค. 2009, 03:02 น.

วันก่อนได้ฟังเลคเชอร์ วิชา Web Engineering มาครับ
มีบางประเด็นน่าสนใจ เลยอยากมาแบ่งปันกันฟัง

อาจารย์บอกว่าต่อไปนี้ ถ้าหากคุณจะทำเว็บขึ้นมา
ให้ใช้ xhtml (http://www.w3schools.com/xhtml/xhtml_why.asp) เท่านั้น ตามคำแนะนำของ W3C

แต่เตือนให้ระวัง หากใช้ CSS level 2 ขึ้นไป
จะมีปัญหาเรื่องการแสดงผล
หากใช้ user agent(บราว์เซอร์นั่นแหละ) ต่างกัน

เลยมีคำถามว่า ก็ในเมื่อเราทำตามมาตรฐานทุกอย่าง
ใช้ xhtml ใช้ css ก็แล้ว ทำไมยังมีปัญหานี้อยู่

แกก็เลยยกตัวอย่าง Box Model bug (http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug) ขึ้นมา
ที่เล็กนิ่มกำหนดค่าต่างออกไปจากชาวบ้าน
(จริงๆ อาจารย์แก ด่าเล็กนิ่มมาตลอดตั้งแต่เลคเชอร์แรกๆ แล้ว)

แต่ปัญหายังมีมากกว่านั้นอีก
ตรงนี้แกยกตัวอย่างเรื่อง ฟอนต์
แกถามว่า ฟอนต์ จริงๆ แล้วมันคืออะไร
(หลังจากถกเถึยงกันพอสมควร ได้ข้อสรุปคร่าวๆ ว่า
ฟอนต์คือ ชุดคำสั่งที่อุดมไปด้วยข้อมูลเวคเตอร์ทางคณิตศาสตร์
โดย OS จะเป็นตัวจัดการดึงข้อมูลขึ้นมา เพื่อนำมาแสดงผล)

ก็ลากยาวไปถึงสมัยก่อนที่ OS ยังไม่มีฟอนต์
ต้องมี ฟอนต์เซอร์เวอร์ จนถึงยุคปัจจุบัน
ที่ OS ก็มี ฟอนต์ Built-in หมดแล้ว

เนื่องจาก user agent ไม่มี ฟอนต์ built-in
จึงต้องรับข้อมูลมาจาก OS อีกที
ทีนี้ OS และ user agent แต่ละตัวก็มีวิธีการดึงข้อมูล
และการแสดงผลบนหน้าจอ ที่แตกต่างกันออกไป
นั่นก็เป็นอีกสาเหตุ ที่ทำให้แสดงผลบนเว็บต่างกัน
ถึงแม้จะใช้ user agent เดียวกัน แต่หากต่าง OS กัน
ก็มีโอกาสที่จะ แสดงผลต่างกันอยู่ดี

แกก็ให้ดูตัวอย่างหน้าเว็บ ที่มีฟอนต์ต่างๆ
เวลาเปิดดูในบราว์เซอร์ต่างๆ ก็หน้าตาไม่เหมือนกัน
ทั้งๆ ที่ชื่อเดียวกันด้วยซ้ำ

วกกลับมาที่ CSS อาจารย์บอกว่า
จะปลอดภัย ถ้าเราใช้ CSS level 1
เพราะมันเป็นมาตรฐานตั้งแต่ปี 1996
user agent ก็จะรู้จักและแสดงผลถูกต้องหมดแล้ว

แต่ปัญหาของ CSS level 2
(เป็นมาตรฐานตั้งแต่ปี 1998)
คือ user agent บางตัวอ้างว่ารู้จัก
แต่เวลาแสดงผลจริงๆ ก็เป็นคนละเรื่องละราว
(ก็ไออีของค่ายเล็กนิ่มนี่แหละ )
ดังนั้นจึงต้องระวังเป็นพิเศษครับ

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: ณัฏฐ์ เมื่อ 15 ต.ค. 2009, 03:09 น.

อ้อ :46:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: หนุ่ม เมื่อ 15 ต.ค. 2009, 09:58 น.

ความรู้เน้นๆ :12:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 15 ต.ค. 2009, 10:29 น.

ที่อาจารย์บอกว่าเราต้องใช้ XHTML เท่านั้นนี่
มีแวะๆ ไปประเด็นมาตรฐาน HTML5 ไหมครับ
พอดีอ่านมาแบบงูๆ ปลาๆ ว่าเราต้องเลือกแล้วล่ะว่าจะวิ่งไป Support ทางไหน
เพราะ HTML5 เนี่ยพอมันใช้ได้ครอบจักรวาลจริงๆ ปั๊บ XHTML จะเป็นอดีตไป

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: JÎ›NÎ£ เมื่อ 15 ต.ค. 2009, 10:34 น.

กลับมาใช้ table กันเถอะ :05:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 15 ต.ค. 2009, 10:39 น.

ไอ้นั่นน่ะอดูตของอดูตอีกนะ :05:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: ณต เมื่อ 15 ต.ค. 2009, 10:45 น.

อ้างคำพูดจาก: iannnnn เมื่อ 15 ต.ค. 2009, 10:29 น.
ที่อาจารย์บอกว่าเราต้องใช้ XHTML เท่านั้นนี่
มีแวะๆ ไปประเด็นมาตรฐาน HTML5 ไหมครับ
พอดีอ่านมาแบบงูๆ ปลาๆ ว่าเราต้องเลือกแล้วล่ะว่าจะวิ่งไป Support ทางไหน
เพราะ HTML5 เนี่ยพอมันใช้ได้ครอบจักรวาลจริงๆ ปั๊บ XHTML จะเป็นอดีตไป

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

ยังไง ขอตัวไปนอนก่อนนะครับ
แล้วเดี๋ยวจะเรียบเรียงมาให้อ่านกัน

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 15 ต.ค. 2009, 10:53 น.

ขอบคุณครับ รอฟังเลกเชอร์ย่อย :25:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: Ou! เมื่อ 15 ต.ค. 2009, 22:52 น.

แฮร่ :25:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: หนึ่ง เมื่อ 15 ต.ค. 2009, 23:02 น.

นี่พึ่งจะเริ่มหัด CSS ได้อาทิตย์เดียวเองนะ
รู้สึกว่ามันง่ายต่อการแก้มากเลยนะ เหมาะสำหรับลูกค้าที่ยังไม่รู้ว่าตรูจะเขียนอะไรในเว๊บเอาซะมากๆ
ทำโครงให้ แล้วไปแก้คอนเท้นเอาเอง /..จบงาน :30:

ขอรอฟังความรู้ด้วยคนครับ :46:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 15 ต.ค. 2009, 23:19 น.

ใช่ๆ ไชโย มา CSS กันเถอะ :25:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: ณต เมื่อ 16 ต.ค. 2009, 07:13 น.

เอาล่ะ มาต่อกันเรื่อง xhtml หรือ html 5
ขอเตือนก่อนว่ายาว :05:

ตูพยายามจะเรียบเรียงให้เข้าใจง่ายๆ ที่สุดเท่าที่จะทำได้แล้วกัน
ก่อนอื่นต้องขอเกริ่นถึงที่มาที่ไปของ HTML (http://www.w3schools.com/html/html_intro.asp)
ที่เป็นเบื้องหลังของเว็บไซต์ต่างๆ ที่เราเห็นกันทุกวันนี้ก่อนแล้วกัน

ก่อนหน้าที่ Tim Berners-Lee (http://en.wikipedia.org/wiki/Tim_Berners-Lee) จะคิดค้น
และพัฒนา HTML ขึ้นมาในปี 1992 นั้น
มันมี Mark Up Language ที่เป็นมาตรฐาน ISO ตั้งแต่ปี 1986 ชื่อว่า SGML(Standard Generalized Markup Language) (http://en.wikipedia.org/wiki/Standard_Generalized_Markup_Language)
ซึ่งที่มาของมันมาจาก GML ที่คิดค้นโดย IBM ตั้งแต่ปี 1960

แต่ปัญหาใหญ่ของ SGML คือ โคตรยุ่งยากซับซ้อน
เอาง่ายๆ ว่ามนุษย์เข้าใจได้ยากแล้วกัน
นั่นก็เลยทำให้หาคนเขียน Software ที่จะมา process มันยากมากตาม
Tim Berners-Lee ก็คิดค้น HTML ขึ้นมา
เพื่อแก้ปัญหาความซับซ้อนซ่อนเงื่อนตรงนี้ได้สำเร็จ
และ HTML ก็เป็นที่แพร่หลายอย่างที่เห็นในปัจจุบัน

มาถึงวันนี้ W3C บอกว่าต่อจากนี้ให้ใช้ XHTML สำหรับหน้าเว็บใหม่
อ้าว แล้ว HTML ล่ะ จะเอาไปไว้ที่ไหน
HTML ก็ยังใช้ได้อยู่ เพียงแต่ว่า HTML 4.01 จะเป็นเวอร์ชันมาตรฐานอันสุดท้าย
(ทำเป็นลืมๆ เรื่อง HTML 5 ไปก่อน เดี๋ยวจะวกกลับมา บอกแล้วว่ายาว :30:)

ปัญหาใหญ่ของ HTML ที่ W3C มองเห็นก็คือ
หน้าเว็บ HTML ยอมให้มีการผสมผสานกันระหว่างโึค้ด
ของโครงสร้างหลักกับหน้าตาเข้าด้วยกันได้
คือถ้าหน้าเว็บธรรมดาๆ ก็คงไม่เป็นไร
แต่ปัจจุบันก็มีซอฟท์แวร์ทำเว็บเยอะแยะ
ที่สามารถทำ โค้ด HTML ออกมาได้

ซึ่งซอฟท์แวร์พวกนี้ก็มักจะสร้างโค้ดที่ยุ่งเหยิงออกมา
ผสมปนเประหว่างโครงสร้างหลักกับหน้าตา
ยกตัวอย่างง่ายๆ หน้าตาเว็บ
ก็เหมือนกับการทาสีหรือการตบแต่งภายนอกและภายใน
แต่โครงสร้างหลักก็เหมือนกับการตอกเสาเข็ม
หรือการกั้นผนัง หรือบอกว่าบ้านนี้จะมีกี่ชั้นอะไรก็ว่ากันไป

ปัญหาก็คือซอฟท์แวร์ทำเว็บพวกนี้
พอทำโค้ดออกมา มันดันเอาสีไปทาเสาเข็ม
และเอาเสาเข็มไปวางเป็นของตบแต่งซะฉิบ :41:
หนักไปกว่านั้นคือ Browser ต่างๆ
ก็เสือกยอมมองข้ามความผิดพลาดตรงนี้เสียด้วย
แล้วก็แปลโค้ดมั่วๆ พวกนี้ออกมา ให้เราเห็นกันบนหน้าเว็บได้
ขึ้นอยู่กับว่า Browser ยี่ห้อไหนเข้าใจความมั่วตรงนี้มากกว่ากัน
ถ้าจะเปรียบ Browser พวกนี้ ก็เหมือนกับบริษัทรับเหมาสร้างบ้่าน
โดยที่ไม่มีวิศวกร หรือสถาปนิกคุมงานนี่เอง
เอาช่างมาอ่านแบบ แล้วก็ทำตาม ถึงไงตูไม่ได้เป็นคนเซ็นแบบอยูแล้่ว :05:
(ตรงนี้เขาชม IE นะครับ ว่ามันเก่ง ขนาดโค้ดมั่วๆ
มันก็ยังพยายามแสดงผลออกมาได้)

XHTML ก็เลยเข้ามาแก้ปัญหาตรงนี้
โดยแยกโค้ดของโครงสร้างหลักกับหน้าตาออกจากกันโดยเด็ดขาด
รวมถึงเข้มงวดกับโค้ด Tag ต่างๆ ด้วย
(XHTML ทำโครงสร้าง ตบแต่งหน้าตาก็ใช้ CSS)

ที่มาของ XHTML มาจาก XML (http://en.wikipedia.org/wiki/XML)
ข้อดีของ XML คือ มีข้อกำหนดชัดเจน
ว่าอะไรเป็นอะไร ยกตัวอย่างเช่น ถ้าจะสร้างบ้านสองชั้น
ต้องใช้เสาเข็มขนาดเท่าไหร่เป๊ะๆ ไม่ได้ปล่อยให้ไปเติมกันเอง
ดังนั้นมันจึงเป็นการง่ายที่จะสร้างซอฟท์แวร์ต่างๆ เพื่อมาทำงานด้วย
รวมถึงคนที่จะมาทำงานสานต่อ หรือต่อเติม ก็จะทำงานได้ง่ายขึ้น
(นึกออกใช่ไหมครับ ปัจจุบันถ้าเราต้องไปรื้อหรือต่อเติม เว็บใหญ่ๆ อะไรสักเว็บนึง
ที่โครงสร้างเละมากๆ ส่วนใหญ่แล้วทุบทิ้งแล้วทำใหม่หมดจะง่ายกว่า :42:)

XHTML ก็คือ HTML ที่ถูกทำความสะอาด
ข้อกำหนดต่างๆ ไม่ว่าจะเป็นเรื่องโครงสร้าง
หรือหน้าตาเรียบร้อยแล้วนั่นเอง
และเมื่อเป็นอะไรที่สะอาดแล้ว
มันก็สามารถใช้กับ Browserเก่าๆ ก็ได้อย่างไม่มีปัญหา( Backward Compatible)

มาถึงตรงนี้อยากให้ดูสายการพัฒนาก่อนนิดนึง

SGML
|
______________________________
| | |
HTML other SGML XML
|
_______________
| |
XHTML other XML

จะเห็นว่าโครงสร้างการพัฒนาระหว่าง HTML กับ XHTML มันอยู่กันคนละสาย
มาถึงตรงนี้ตูคงจะไม่ลงลึกลงไปในรายละเอียด
ว่า Syntax Rule หรืออะไรทำนองนี้จะเป็นยังไง
แตกต่างกันตรงไหน เพราะมันจะลงลึกเกินไปหน่อย

ทีนี้วกกลับมาที่ HTML 5 กันบ้าง
HTML 5 อยู่ตรงไหนในสายการพัฒนาจากรูปข้างบน
คำตอบคือ ไม่ได้อยู่ในสายการพัฒนาข้างบนนี้เลยครับ

HTML 5 เกิดมาจาก ผู้ผลิตซอฟท์แวร์บราวเซอร์ ซอฟท์แวร์สร้างและทำเว็บรวมตัวกัน
และตั้งชื่อกลุ่มทำงานตรงนี้ว่า WHATWG (http://wiki.whatwg.org/wiki/FAQ#What_is_the_WHATWG.3F) (Web Hypertext Application Technology Working Group)
เพราะไม่เห็นด้วยกับแนวทางของ W3C
แนวคิดและปรัชญาของกลุ่มนี้คือ เน้นไปที่ลูกเล่นต่างๆ
รวมไปถึงการเชื่อมต่อกับ Application (ที่ผู้ผลิตซอฟท์แวร์พวกนี้ทำ)
และด้วยกำลังเงินและบุคคลากร รวมถึงเส้นสายต่างๆ เข้าไปแทรกแซง
นั่นเลยกลายเป็นที่มาว่า เอ๊ะ ตกลง W3C จะให้ใช้อะไรกันแน่

แต่หากว่าเราย้อนกลับไปดู ทีมาของ W3C
แนวคิดและปรัชญาของ W3C คืออะไร
(แน่นอนต้องสวนทางกับ WHATWG ที่คิด HTML5 อยู่แล้ว)

แนวคิดของ W3C อย่างนึงคือ การเข้าถึงเว็บของคนหมู่มาก
ไม่ว่าใคร ยากดีมีจน เด็ก ผู้ใหญ่ คนแก่ คนพิการ ใช้งานจากเครื่องคอม
มือถือ PDA คอมพิวเตอร์จอใหญ่ๆ หรือแม้กระทั่งบราวเซอร์ในตู้เย็น
ก็สามารถใช้งานเว็บได้อย่างที่มีข้อจำกัดน้อยที่สุด

XHTML นั้น ถูกออกแบบมาจากแนวคิดและปรัชญาตรงนี้
จึงลดข้อจำกัดต่างๆ ในการเข้าถึงเว็บจาก หลากหลายอุปกรณ์
และหลากหลายปัจเจกบุคคล
มาถึงตรงนี้ เวลาพวกเราออกแบบเว็บกัน
มีใครนึกถึงคนตาบอดสี ที่มองสีไม่ออก
หรือคนแก่ๆ ที่มองตัวอักษรขนาดปกติไม่ออก
เวลาออกแบบเว็บบ้างไหมครับ :42:

หากแต่ HTML5 นั้นน่าจะตอบสนองกลุ่มคนที่มีกำลังซื้อ
กลุ่มคนที่ชอบใช้เทคโนโลยีใหม่ๆ และตอบสนองธุรกิจใหญ่ๆ
ที่ใช้ซอฟท์แวร์และ Application ของกลุ่มนี้อยู่แล้วมากกว่า

ดังนั้นหาก กลุ่มคนก่อตั้ง W3C ยังยึดถืออุดมการณ์เดิมอยู่
XHTML คือคำตอบวันนี้ สำหรับอนาคตครับ

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: หนึ่ง เมื่อ 16 ต.ค. 2009, 07:34 น.

:46: สุดยอด
เข้าใจถึงความแตกต่างชัดเจนเลยครับ

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: Bellbells เมื่อ 16 ต.ค. 2009, 07:46 น.

:25: ว้าวขอบคุณครับ

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: ยุนเอ เมื่อ 16 ต.ค. 2009, 09:27 น.

วัดกำลังภายในกันอีกแล้ว :37:

google นี้หนุน html5 รึเปล่าครับ ?

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: ณต เมื่อ 16 ต.ค. 2009, 09:49 น.

อ้างคำพูดจาก: ปิยะ เมื่อ 16 ต.ค. 2009, 09:27 น.
วัดกำลังภายในกันอีกแล้ว :37:

google นี้หนุน html5 รึเปล่าครับ ?

จริงๆ แล้ว ตูค่อนข้างเชื่อว่า
เว็บบราวเซอร์บางค่าย จะสนับสนุน HTML 5 นะ
(แหงล่ะ เป็นคนคิดกันขึ้นมานี่หว่า)

แต่อย่างไรก็ตาม XHTML 1.1 มันใช้กับบราว์เซอร์
ได้แทบทุกอันอยู่แล้ว

ดังนั้นกุญแจสำคัญอยู่ที่
คนที่จะสร้างเว็บอย่างเราๆ นี่ต่างหากครับ
ว่าวันนี้จะเลือกเดินไปทางไหนสำหรับอนาคต

ไม่ได้อยู่ที่ผู้ผลิตซอฟท์แวร์หรือ W3C หรอก

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: NooKSTYLE เมื่อ 16 ต.ค. 2009, 09:56 น.

:25: :25: :25:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: ณัฏฐ์ เมื่อ 16 ต.ค. 2009, 10:49 น.

โอ้ ความรู้มากมาย :46:

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

คนที่แพ้ก็คือคนที่จะถูกด่าเป็นรายต่อไป..

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 16 ต.ค. 2009, 12:26 น.

เอ๊ะ อีนี่ประชดอีกแล้ว :30:
แสดงว่ายังไม่เคลียร์กระจู๋นู้นใช่ไหมเนี่ย :37:
ขี้เกียจเล่นด้วยแล้ว เพราะเคลียร์จนไม่รู้จะเคลียร์ยังไงละ ค่อยๆ ปรับทัศนคติเอาละกัน

คือยังงี้ครับ
บทความที่อ่านมาเนี่ยสงสัยว่าจะมาจาก thaicss มั้ง
ซึ่งที่นั่นเขามีแวะๆ พูดถึงเรื่องสองมาตรฐานนี้เหมือนกัน
อย่างเรื่องนี้ HTML5 เป็นสิ่งที่ผมต้องให้ความสนใจแล้วหรือยัง (http://www.pornantha.com/HTML5-%E0%B9%80%E0%B8%9B%E0%B9%87%E0%B8%99%E0%B8%AA%E0%B8%B4%E0%B9%88%E0%B8%87%E0%B8%97%E0%B8%B5%E0%B9%88%E0%B8%9C%E0%B8%A1%E0%B8%95%E0%B9%89%E0%B8%AD%E0%B8%87%E0%B9%83%E0%B8%AB%E0%B9%89%E0%B8%84%E0%B8%A7%E0%B8%B2%E0%B8%A1%E0%B8%AA%E0%B8%99%E0%B9%83%E0%B8%88%E0%B9%81%E0%B8%A5%E0%B9%89%E0%B8%A7%E0%B8%AB%E0%B8%A3%E0%B8%B7%E0%B8%AD%E0%B8%A2%E0%B8%B1%E0%B8%87)

อันนี้เขาบอกว่าทาง W3C เองก็หันมามอง HTML5 แล้ว
ว่าเออ มันก็ดีนี่หว่า แต่มันต้องไปคนละทางกันนะ (ถ้ามองในประเด็นของกระจู๋นี้ เราๆ ก็จะเชียร์ html5 มากกว่า)

XHTML2 และ HTML5 ทางเลือกที่ต้องเดิน (http://www.thaicss.com/XHTML2--%E0%B9%81%E0%B8%A5%E0%B8%B0-HTML5--%E0%B8%97%E0%B8%B2%E0%B8%87%E0%B9%80%E0%B8%A5%E0%B8%B7%E0%B8%AD%E0%B8%81%E0%B8%97%E0%B8%B5%E0%B9%88%E0%B8%95%E0%B9%89%E0%B8%AD%E0%B8%87%E0%B9%80%E0%B8%94%E0%B8%B4%E0%B8%99/)
HTML5 XHTML2 และ อนาคตของเวป (1) (http://www.thaicss.com/HTML5-XHTML2-%E0%B9%81%E0%B8%A5%E0%B8%B0-%E0%B8%AD%E0%B8%99%E0%B8%B2%E0%B8%84%E0%B8%95%E0%B8%82%E0%B8%AD%E0%B8%87%E0%B9%80%E0%B8%A7%E0%B8%9B-(1))
HTML5 XHTML2 และ อนาคตของเวป (2) (http://www.thaicss.com/HTML5-XHTML2-%E0%B9%81%E0%B8%A5%E0%B8%B0-%E0%B8%AD%E0%B8%99%E0%B8%B2%E0%B8%84%E0%B8%95%E0%B8%82%E0%B8%AD%E0%B8%87%E0%B9%80%E0%B8%A7%E0%B8%9B-(2))
HTML5 XHTML2 และ อนาคตของเวป (3) (http://www.thaicss.com/HTML5-XHTML2-%E0%B9%81%E0%B8%A5%E0%B8%B0-%E0%B8%AD%E0%B8%99%E0%B8%B2%E0%B8%84%E0%B8%95%E0%B8%82%E0%B8%AD%E0%B8%87%E0%B9%80%E0%B8%A7%E0%B8%9B-(3))

HTML5 กับ CSS3 อนาคตที่จะมาบรรจบกัน ตอนที่ 1 (http://www.thaicss.com/HTML5--%E0%B8%81%E0%B8%B1%E0%B8%9A-CSS3--%E0%B8%AD%E0%B8%99%E0%B8%B2%E0%B8%84%E0%B8%95%E0%B8%97%E0%B8%B5%E0%B9%88%E0%B8%88%E0%B8%B0%E0%B8%A1%E0%B8%B2%E0%B8%9A%E0%B8%A3%E0%B8%A3%E0%B8%88%E0%B8%9A%E0%B8%81%E0%B8%B1%E0%B8%99--%E0%B8%95%E0%B8%AD%E0%B8%99%E0%B8%97%E0%B8%B5%E0%B9%88-1/)

บทความขนาดยาวชุดนี้แนะนำให้อ่านครับ
เพราะมันไม่ใช่เรื่องไกลตัวของเราๆ กันเลยนะ :12:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: ณต เมื่อ 16 ต.ค. 2009, 20:25 น.

ตูว่าในที่สุดแล้ว

คีย์เวิร์ดของเรื่องนี้คือ Backward Compatible แฮะ
และตูกลับมองว่า css3 จะทำงานได้ดีกับ xhtml มากกว่า แสดงผลได้ถูกต้องมากกว่า
และมีประสิทธิภาพมากกว่าด้วย (ลองนึกถึงอุปกรณ์ mobile ที่มีทรัพยากรจำกัด)
ในขณะที่ HTML 5 จะต้องอาศัยความสามารถของบราว์เซอร์ด้วยในการแสดงผล

ถามใจตูนะ ตูชอบโครงสร้างเคลียร์ๆ แบบ xhtml 1.1 นะ
เพราะปัจจุบัน ตูมีเว็บนึงที่กำลังจะรื้ออยู่
มี static page แถมใช้ Table ทำเลยเอ้าท์ มากกว่า พันหน้า :05:
และแต่ละหน้า โึค้ด HTML ก็เละตุ้มเป๊ะไปหมด
บางหน้ามี โึค้ดจาวาสคริปต์ ที่ไม่ได้ใช้แปะไว้ด้วย :41:

นึกถึง xhtml ขึ้นมาจับใจเลยครับ :05:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: เดอะบุ๋ม เมื่อ 16 ต.ค. 2009, 20:52 น.

พี่ณตเจ๋งอ่ะ :25:

(อ่านไม่รู้เรื่องหรอก เพราะไม่เคยใช้ HTML 5)

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: ณัฏฐ์ เมื่อ 16 ต.ค. 2009, 23:22 น.

เฮ้ย เคลียร์แล้วนะ :37:
เคลียร์จริงๆ(มั้ง)

ตามนี้
ก็เข้าใจว่าอะไรมันไม่มาตรฐาน
ชอบสร้างมาตรฐานตัวเองที่ไม่เข้ากับคนอื่นเนี่ย
มันไม่ดีใช่มะ

แต่ทุกวันนี้เราก็ยังไม่รู้ใช่ป่ะ ว่าอะไรมันคือมาตรฐานกันแน่
ระหว่าง XHTML กับ HTML5
ไม่มีใครรู้เลย และต้องเลือกตามความชอบตัวเอง...
จนกว่าจะมีฝ่ายไหนแพ้ไป(หรือรวมกันได้)
อย่างตอน DVD+ กับ DVD- เนี่ย คือตัวอย่างของการรวมกัน
อย่างตอน HD DVD กับ Blue ray เนี่ย คือตัวอย่างของการแพ้แล้ว กลายเป็นว่าต้อง fade หายไป
คนที่ลงทุนกับ HD DVD ก็คงเซ็งเหมือนกันแหละ ที่ของตัวเองอยู่ๆ ก็จะไม่มาตรฐานซะงั้น

จากที่อ่านมา XHTML ดูมาตรฐานกว่าเห็นๆ ยืดหยุ่น ดูง่าย
แต่ถ้ามัน พัฒนาช้า อืดอาด ลูกเล่นน้อย
ทั้ง google chrome firefox safari opera ก็คงต้องทำให้ตัวเองรับ HTML5 ได้ไปก่อน(ถึงแม้จะไม่ถูก "มาตรฐาน" )
ในอนาคตทางที่ดูที่สุดคือ ทำให้มันใช้ได้ด้วยกัน
แต่ถ้าทำให้รวมไม่ได้ ก็อยู่ที่ว่า W3C จะทำให้ XHTML พัฒนาขึ้นมาได้เร็วทันใจ ค่ายต่างๆ ได้แค่ไหน

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: ยุนเอ เมื่อ 17 ต.ค. 2009, 00:50 น.

และนั่นแหละที่เป็นประโยชน์กับผู้บริโภคอย่างเราๆ ทั้งหลาย

ในนามของตลาดการค้าเสรี

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: บักรุ เมื่อ 23 ต.ค. 2009, 11:55 น.

ขอบคุณสำหรับ ความรู้ครับ

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: Vii เมื่อ 23 ต.ค. 2009, 15:11 น.

เจ๋งโคตร ส่วนตัวก็ได้แต่ลองผิดลองถูกเท่านั้นแหละ เขียนไม่เป็นกะเค้าซะที
ความรู้เยอะมากๆเลยค่ะ :02:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 26 ต.ค. 2009, 13:28 น.

http://muddledramblings.com/table-of-css3-border-radius-compliance (http://muddledramblings.com/table-of-css3-border-radius-compliance)
ตารางเปรียบเทียบการแสดงผล "ขอบมน" (CSS3) ในแต่ละเบราว์เซอร์

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: JÎ›NÎ£ เมื่อ 26 ต.ค. 2009, 14:05 น.

ลองเปิดกับ IE6

คอลัมน์ขวาสุดเหมือนกันทุกรูปเลย :30:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: หนุ่ม เมื่อ 26 ต.ค. 2009, 22:09 น.

8 different ways to beautifully style your lists
http://www.marcofolio.net/css/8_different_ways_to_beautifully_style_your_lists.html (http://www.marcofolio.net/css/8_different_ways_to_beautifully_style_your_lists.html)

ใช้ ol ul li ทำลิสต์ได้แปดแบบ อันสุดท้ายเจ๋งมาก(css3) :12:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 27 ต.ค. 2009, 01:49 น.

:25: ขอบคุณครับ

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: บักรุ เมื่อ 31 ต.ค. 2009, 15:27 น.

อ่านมาตั้งนาน มึนๆ ครับ ลองๆเล่นไปมา แต่มีปัญหากับ IE :13: อีกแล้ว
ตรงลูกศรชี้ไม่รู้มันมายังไง ช่วยหน่อยคัรบ

บน IE
(http://dood.in.th/images/jdv1256976472c.jpg)

บน Firefox
(http://dood.in.th/images/viu1256976472m.jpg)

โค้ด เลือกทั้งหมด

* {
	margin: 0px;
}
html,body {height:100%;}
body {
	text-align: center;
	margin: 0px;
	padding: 0px;
	background-color: #FFF;
	font-family: Tahoma;
}
#wrapper {
	width: 820px;
	margin: 0px auto;
	height: 100%;
}
#header {
	margin-top: 20px;
	margin-bottom: 20px;
}
#nav {
	background-image: url(../flora/images/nav.jpg);
	background-repeat: repeat-x;
	position: relative;
	height: 20px;
}
#nav a {
	text-decoration: none;
	font-size: 13px;
	color: #FFF;
	margin-left: 30px;
	margin-right: 30px;
	font-weight: normal;
}
#footer {
	width: 820px;
}
#banner {
	margin:0;
	height: 300px;
	width: 820px;
	vertical-align: baseline;
	position: relative;
}
#banner .banner_left {
	width: 100px;
	height: 300px;
	float: left;
}
#banner .banner_right {
	height: 300px;
	width: 720px;
	float: left;
}
#content {
	background-color: #c79ebe;
	vertical-align: baseline;
	position: relative;
}

เวลาแสดงผล

โค้ด เลือกทั้งหมด

<body>
	<div id="wrapper">
    	<div id="header"><img src="../flora/images/logo.jpg" /></div>
        <div id="nav">
        	<a href="main.html">HOME</a>
			<a href="room.html">ROOMS & RATE</a>
			<a href="services.html">OUR SERVICES</a>
			<a href="gallery.html">GALLERY</a>
			<a href="location.html">LOCATION</a>
			<a href="reservation.html">RESERVATION</a>        </div>
        <div id="banner">
       	  <div>
       		<div class="banner_left">
            		banner left           	</div>
            	<div class="banner_right">
           		  <embed id="viewer" height="300" width="720" flashvars="xmlDataPath=/rasananda/flash/spa.xml" wmode="transparent" quality="high" bgcolor="#ffffff" name="viewer" style="" src="/new_flora/flash.swf" type="application/x-shockwave-flash"/>           	</div>
            </div>
        </div>
      <div id="content">content</div>
      <div id="footer">footer</div>
     </div>
   
</body>

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 31 ต.ค. 2009, 15:39 น.

:09: ไม่รู้แฮะครับ (ไม่สะดวกทดสอบโค้ด)
ลองลบ Space ว่างๆ หลังแท็ก </embed> ดูว่าหายไหม
หรือไม่ก็ใส่ vspace="0" ลงไปในแท็ก <embed> ดูก่อน

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: บักรุ เมื่อ 31 ต.ค. 2009, 15:45 น.

ได้แล้วจ๊ะ ภูเขาบังเส้นผม
ขอบคุณพี่แอนจ้าา :43:

ถ้ามันมีช่องว่างหมายถึงมันจะเป็นอีกบรรทัดเลยหรอครับ

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 31 ต.ค. 2009, 16:25 น.

IE มันมองว่าเป็นตัวอักษรน่ะครับ น่าเซ็งเนอะ :08:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: บักรุ เมื่อ 31 ต.ค. 2009, 17:02 น.

ลูกค้าก็ไม่เคยเข้าใจ แถมด่ากลับมาอีกแนะ

ลูกค้า : ทำไมเปิดแล้วมันมีช่องว่าง
ลูกหมา : เ่อ่อ !! เปิดด้วยอะไรครับ
ลูกค้า : IE
ลูกหมา : IE มันมีปัญหาการแสดงผลครับ
ลูกค้า : คุณไปอยู่ไหนมา IE เค้าได้รับความนิยมกันทั่วบ้านทั่วเมือง
ลูกหมา : :13:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: Bellbells เมื่อ 31 ต.ค. 2009, 17:05 น.

บางคนก็เข้าใจว่า IE นี่แหละ คือ internet :30:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: Layiji เมื่อ 31 ต.ค. 2009, 18:00 น.

ลองใช้พวก CSS reset ยังครับเผื่อได้

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 01 พ.ย. 2009, 00:04 น.

อันนี้มันเป็นที่ HTML ครับพี่
ลองเอา <img> ไปวางไว้ที่ไหนสักที่ที่มันเบียดๆ ชิดๆ
แล้วก็เผลอเคาะเว้นวรรคสักที นั่นแหละได้เรื่อง วงแตก

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: หนุ่ม เมื่อ 17 พ.ย. 2009, 19:34 น.

9 Most Common IE Bugs and How to Fix Them
http://net.tutsplus.com/tutorials/html-css-techniques/9-most-common-ie-bugs-and-how-to-fix-them/ (http://net.tutsplus.com/tutorials/html-css-techniques/9-most-common-ie-bugs-and-how-to-fix-them/)

9 ปัญหาไออีหลักๆกับวิธีการแก้ :25:

ทำไมเค้าแก้กันง่ายจัง บางอันตูงมแก้ตั้งนาน :08:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: Bellbells เมื่อ 17 พ.ย. 2009, 19:42 น.

:25:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 17 พ.ย. 2009, 23:51 น.

ขอบคุณครับ :12:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 11 ก.พ. 2010, 18:05 น.

http://net.tutsplus.com/videos/screencasts/quick-tip-how-to-work-with-font-face/ (http://net.tutsplus.com/videos/screencasts/quick-tip-how-to-work-with-font-face/)
เล่นกับ @font-face ยังไง ว่ากันตรงๆ

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 04 มี.ค. 2010, 15:28 น.

http://www.webdesignerwall.com/tutorials/the-basics-of-css3/ (http://www.webdesignerwall.com/tutorials/the-basics-of-css3/)
เริ่มต้นกับ CSS3 ครับ
เจ๋งนะอันนี้ ว่ากันเบสิกๆ เลย

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: Layiji เมื่อ 04 มี.ค. 2010, 22:12 น.

css3 นี่ใช้ได้กับ browser ไหนได้มั่งครับ :10:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: IM เมื่อ 04 มี.ค. 2010, 22:15 น.

นอกจาก IE6 ก็น่าจะได้หมดนะครับ(ไม่ยืนยัน)

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 04 มี.ค. 2010, 22:23 น.

นอกจาก IE6 แล้วก็ยังมี IE7 กะ IE8 :10:...... :2239:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 17 มี.ค. 2010, 19:36 น.

ยินดีด้วยนะครับที่เล็กนิ่มเริ่มปล่อย IE9 มาให้ทดสอบแล้ว :12:
รองรับ CSS3 ด้วย :12:

นั่นแปลว่าอีกไม่นาน ไม่เกิน 5 ปี คนไทยจะได้ใช้กันละ

เอานี่ไป

http://css-tricks.com/pseudo-class-selectors/ (http://css-tricks.com/pseudo-class-selectors/)
pseudo class selector คือสถานะของวัตถุ เช่น hover อะไรงี้
มีประโยชน์ครับ รู้จักไว้

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: ณัฏฐ์ เมื่อ 17 มี.ค. 2010, 22:49 น.

อันนี้ประชดรึเปล่าครับ :3005: 5 ปี

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 17 มี.ค. 2010, 23:26 น.

จริงๆ :3005:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: เอิร์ธซึ เมื่อ 27 มี.ค. 2010, 21:54 น.

โหะ !!
ใช้ยากพอๆกับ ดรีมฯ เลยนะครับนี่

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 13 เม.ย. 2010, 01:21 น.

วิธี Word Wrap แบบหักดิบ กูไม่สนอะไรทั้งนั้น

โค้ด เลือกทั้งหมด

.break-word {
  word-wrap: break-word;
}

จาก http://www.webdesignerwall.com/tutorials/word-wrap-force-text-to-wrap/#more-488 (http://www.webdesignerwall.com/tutorials/word-wrap-force-text-to-wrap/#more-488)

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: inatmon เมื่อ 14 เม.ย. 2010, 00:41 น.

ถามพี่แอนหน่อยครับ
ต่อมาจากกรณี bg เว็ปเฟลนะครับ ทำยังไงถึงจะโชว์แบคกราวน์แดงเฉพาะไอ้อี6 :13:... ได้ครับ?

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 14 เม.ย. 2010, 00:52 น.

ไป View Source เอาเลยครับ
จะมีซ่อนข้อความนี้ไว้

โค้ด เลือกทั้งหมด


<!--[if lte IE 6]>
	<link rel="stylesheet" type="text/css" media="screen" href="/img/iefail.css" />
<![endif]-->

ทีนี้จะยัดอะไรใส่ CSS ก็ว่าไปจ้ะ

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: inatmon เมื่อ 14 เม.ย. 2010, 01:40 น.

แล้วถ้าดันไม่เห็นข้อความนี้หล่ะครับ ยัดข้อความนี้ลง css ด้วยเลยใช่มั้ยครับ?

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 14 เม.ย. 2010, 01:47 น.

อ๋อๆ
หมายถึงใส่โค้ดนี้ลงในไฟล์ html ครับ
ลองเข้า FAILin.th แล้ว View Source ลอกเลย!

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: inatmon เมื่อ 14 เม.ย. 2010, 01:57 น.

อ่อครับ ขอบคุณครับ :46:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: ณัฏฐ์ เมื่อ 14 เม.ย. 2010, 01:58 น.

ทำไม(ก่อนหน้านี้)ตูพยายามอ่านแล้วหาไม่เจอ :3005:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 14 เม.ย. 2010, 02:02 น.

คืองี้ๆ

ไอ้โค้ดข้างบนนั่นคือบอกไฟล์ html ว่า เฮ้ย อันนี้เฉพาะเบราว์เซอร์ที่ IE6 ลงมานะ
(มันมีแบบอื่นอีก ดูที่ http://www.thesitewizard.com/css/excludecss.shtml (http://www.thesitewizard.com/css/excludecss.shtml) ก็ได้)
แล้วข้างในจะใส่อะไรก็ว่าไป เช่นอันนี้บอกว่าถ้า IE6- ให้เรียกไฟล์ css สำหรับ IE6 นะ
อยู่ในไฟล์นี้ๆ นั่นแหละจ้ะ

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 27 เม.ย. 2010, 00:00 น.

(ข้างบนนั่นได้ยังไม่รู้)

เจอมา อันนี้เมพโคตร
ถ้าขนาดเบราว์เซอร์กว้างตามที่กำหนด ก็สั่งให้แสดงผล CSS จากไฟล์ที่ต้องการได้ :07:
ถ้านึกไม่ออกให้ดูคลิป

Resolution Dependent Layout with CSS (http://vimeo.com/11167731)

แต่ต้องใช้ jQuery ช่วยนะ ถ้าไม่ใช้ก็คือเปิดมาโหลดอันเดียวอยู่เลย แต่ก็เมพอยู่ดี
http://css-tricks.com/resolution-specific-stylesheets/ (http://css-tricks.com/resolution-specific-stylesheets/)

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 08 ก.ค. 2010, 17:59 น.

http://css-tricks.com/attribute-selectors/ (http://css-tricks.com/attribute-selectors/)
สอนใช้และเปรียบเทียบ Selector แบบต่างๆ ครับ
เพิ่งรู้ว่ามัน [ใส่][หลายอัน] ได้ด้วย :25:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: หนุ่ม เมื่อ 08 ก.ค. 2010, 19:54 น.

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

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 02 ส.ค. 2010, 19:15 น.

http://www.student.oulu.fi/~laurirai/www/css/middle/ (http://www.student.oulu.fi/~laurirai/www/css/middle/)

จัดกลางแนวตั้งกันเถอะ :25:
(ไม่ง้อ IE6 มันละ)

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: IM เมื่อ 04 ส.ค. 2010, 07:39 น.

ถามอิเบลอาทิตย์ก่อนเองว่าจะจัดกลางแนวตั้งทำไง
ได้คำตอบซะที :25a:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: Bellbells เมื่อ 04 ส.ค. 2010, 12:42 น.

ก็เพิ่งได้คำตอบตอนนี้แหละ :25:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 04 ส.ค. 2010, 15:35 น.

ว้าย ตีกินนี่หว่า :25:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 10 ส.ค. 2010, 11:50 น.

อันนี้ขอจดไว้ใช้หน่อย
จาก http://www.1stwebdesigner.com/development/useful-css-snippets/ (http://www.1stwebdesigner.com/development/useful-css-snippets/)
(มีอีกหลายอันน่าสนใจนะ)

โค้ด เลือกทั้งหมด

h1 {
	text-indent:-9999px;
	margin:0 auto;
	width:400px;
	height:100px;
	background:transparent url("images/logo.jpg") no-repeat scroll;
}

อันนี้ใช้บ่อย :12: คือเอาไว้แทน h1 ด้วยภาพ ที่เมื่อก่อนเราจะใช้เป็น img เท่านั้น
พอมาอันนี้เลยได้ทั้งความสวยงาม ทั้ง SEO ครับ เป็นสูตรอมตะเลยนะ
ลองใช้กันดูๆ

โค้ด เลือกทั้งหมด

/* external links */
a[href^="http://"]{
	padding-right: 20px;
	background: url(external.gif) no-repeat center right;
}

/* emails */
a[href^="mailto:"]{
	padding-right: 20px;
	background: url(email.png) no-repeat center right;
}

/* pdfs */
a[href$=".pdf"]{
	padding-right: 20px;
	background: url(pdf.png) no-repeat center right;
}

ใส่ไอคอนเล็กๆ บอกประเภทไฟล์ในลิงก์
ยังหาโอกาสใช้จริงๆ ไม่ได้สักที

โค้ด เลือกทั้งหมด

.transparent {
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
}

ปรับความใสของวัตถุ (เช่นพื้นหลังซ้อนๆ กัน)
อันนี้อยากใช้ละ เดี๋ยวหาโอกาสเล่นดีกว่า

โค้ด เลือกทั้งหมด

/* IE 6 */
* html .yourclass { }

/* IE 7 */
*+html .yourclass{ }

/* IE 7 and modern browsers */
html>body .yourclass { }

/* Modern browsers (not IE 7) */
html>/**/body .yourclass { }

/* Opera 9.27 and below */
html:first-child .yourclass { }

/* Safari */
html[xmlns*=""] body:last-child .yourclass { }

/* Safari 3+, Chrome 1+, Opera 9+, Fx 3.5+ */
body:nth-of-type(1) .yourclass { }

/* Safari 3+, Chrome 1+, Opera 9+, Fx 3.5+ */
body:first-of-type .yourclass {  }

/* Safari 3+, Chrome 1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
 .yourclass  {  }
}

แฮ็กการแสดงผลแต่ละเบราว์เซอร์ (อันนี้ไม่ผ่าน W3C แต่ชาวโลกทุกคนดูรู้เรื่อง ยอม!)

โค้ด เลือกทั้งหมด

#footer {
	position:fixed;
	left:0px;
	bottom:0px;
	height:30px;
	width:100%;
	background:#999;
}

/* IE 6 */
* html #footer {
	position:absolute;
	top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}

ล็อก Footer ไว้ท้ายหน้า อันนี้ไม่รู้จริงๆ :25:

โค้ด เลือกทั้งหมด

.box {
	min-height:500px;
	height:auto !important;
	height:500px;
}

กำหนดความสูงขั้นต่ำใน IE

โค้ด เลือกทั้งหมด

.container {
	min-height: 10em;
	display: table-cell;
	vertical-align: middle;
}

จัดกึ่งกลางแนวตั้ง

มีอีกเพียบเลยนะ กดไปดูเอาเองครับ

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: JÎ›NÎ£ เมื่อ 15 ส.ค. 2010, 00:37 น.

ไม่ไหวจะเคลียร์ :12:

http://www.thaicss.com/Clear--(fix)- (http://www.thaicss.com/Clear--(fix)-)ทำไม-และ-ทำไมต้อง-clearfix/

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 15 ส.ค. 2010, 00:39 น.

thaicss.com มีจุดยืนอย่างมากเรื่องการ "ไม่" เขียนอะไรให้เกินครับ
ดังนั้นทุกอย่างจึงวางอยู่บนเส้นมาตรฐานเป๊ะๆ

อย่างเรานี่ทำแบบนั้นไม่ได้จริงๆ มันเนี้ยบเกิน :3005:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: JÎ›NÎ£ เมื่อ 15 ส.ค. 2010, 00:42 น.

อยากเนี๊ยบเหมือนกัน แต่แพ้ช่างแม่งทุกที :58:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: Rabbitinblack เมื่อ 15 ส.ค. 2010, 11:05 น.

อ้างคำพูดจาก: iannnnn เมื่อ 15 ส.ค. 2010, 00:39 น.
thaicss.com มีจุดยืนอย่างมากเรื่องการ "ไม่" เขียนอะไรให้เกินครับ
ดังนั้นทุกอย่างจึงวางอยู่บนเส้นมาตรฐานเป๊ะๆ

อย่างเรานี่ทำแบบนั้นไม่ได้จริงๆ มันเนี้ยบเกิน :3005:

ลองพยายามดู มันไม่ได้ยากอะไรขนาดนั้น

ยิ่งงานแบบนี้ เวลากลับมาแก้ จะเป็นอะไรที่สบายใจมากมาย

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 16 ส.ค. 2010, 23:57 น.

ทีนี้ข้อเสียมันก็มีไง เช่นแกจะไม่แคร์ IE6 เลย
มาตรฐาน ต้องมาตรฐานเป๊ะๆ เท่านั้น
(พยายามทำให้ได้แบบนั้นอยู่ แต่ตูแคร์ :08:)

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: Rabbitinblack เมื่อ 17 ส.ค. 2010, 00:59 น.

อ้างคำพูดจาก: iannnnn เมื่อ 16 ส.ค. 2010, 23:57 น.
ทีนี้ข้อเสียมันก็มีไง เช่นแกจะไม่แคร์ IE6 เลย
มาตรฐาน ต้องมาตรฐานเป๊ะๆ เท่านั้น
(พยายามทำให้ได้แบบนั้นอยู่ แต่ตูแคร์ :08:)

:30: หลัก ๆ ต้องมาตรฐานไว้ก่อน

ส่วน IE6 เราค่อยมา Hack เอาอีกที ซึ่งการ Hack นี่ละที่ไม่มาตรฐาน :30:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: พราว (ก็พราวแหละ) เมื่อ 07 ต.ค. 2010, 00:00 น.

อ่านมานานมากจากหน้าแรกถึงหน้า 34 2.45 ชม. รวดพร้อม reboot หนึ่งครั้ง
เพราะอ่านไปก็ click link ที่อ้างอิงมาเรื่อยๆ จน หมาย่างร้องเอ๋งๆ ว่า
Can't perform this operation ,memory not enough! อะนะคะ กดเพลินไปหน่อย
เข้ามาที่นี่เพราะว่าจะขออนุญาติเอา font จากที่นี่ไป embed ใน site
แต่ clear นิดหน่อยที่พี่แอนบอกที่นี่อนุญาติ

ปกติจะเขียน CSS คุมมันทุก browser เลย เหนื่อยและหงุดหงิดมากมาย
ปัจจุบันจะพยายามไม่ยุ่งกับ CSS ค่ะ ใช้เท่าที่จำเป็น ส่วนมากจะจบที่ jQuery
อะไรที่มันเกี่ยวกับรูปจะใช้ GDI+ อัด ตัด หั่น บั่น ควั่น คว้าน กะทุ้ง ปะกับ ออกมาสะ
และไม่ได้เขียน PHP เขียน ASP.NETค่ะ ปกติจะแยก code กับ design เด็ดขาดอยู่แล้ว
เลยละเลย CSS ไปทุกที เพราะ server-side control เอามาวางแล้วก็ไม่ต้องยุ่งอีก
แต่ยิ่งอ่านก็ยิ่งได้ความรู้เพิ่ม จะติดตามอ่านต่อไปเรื่อยๆค่ะ

ขอบคุณมากค่ะ

อ่อเทคนิคที่จะใช้ embede font จะใช้เจ้าตัวนี้ค่ะ
Portable Font Resources (.pfr) : TrueDoc technology was
developed by Bitstream and licensed by Netscape. It can be
viewed by Navigator 4.0+ and Explorer 4.0+ on Windows, Mac,
and Unix platforms.

แล้วเพิ่ม tag นี้เข้าไป

<LINK rel = "fontdef" src="url/YourFontName.pfr">

แต่ยังไม่ค่อยจะ 100%
จากที่นี่ค่ะ Get Any Font You Want (http://www.netmechanic.com/news/vol3/css_no15.htm)

และก็ CSS Cheat Sheet มี V2 แล้ว Load ได้ที่นี่ค่ะ
CSS Cheat Sheet (V2) (http://www.addedbytes.com/cheat-sheets/css-cheat-sheet/)
มาเป็น PDF ด้วยดีเลยจะขยายใหญ่ๆ แล้วก้อแปะในห้องน้ำไม่ก็หน้าตู้เย็น ^^ จะได้อ่านทุกวันค่ะ

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 07 ต.ค. 2010, 00:39 น.

:25: ขอบคุณครับ
มีภาษาศัพท์ประหลาดมาปนด้วยเพียบเลย แต่ก็ขอบคุณครับ :05:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: พราว (ก็พราวแหละ) เมื่อ 07 ต.ค. 2010, 00:52 น.

อ่านมาตั้ง 30 กว่าหน้า พวกพี่ๆยังใช้กันสะเยอะนี่คะ เลยใช้มั่งค่ะ :33:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: Layiji เมื่อ 28 มี.ค. 2011, 22:55 น.

ตอนนี้ถึงยุคที่ embed font ลงเว็บหรือยังครับ :25:

เพิ่งโหลด ff อันใหม่ไป เลยอยากรู้น่ะครับ

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: JÎ›NÎ£ เมื่อ 28 มี.ค. 2011, 22:58 น.

เป็นผู้นำเลยครับ ไม่ต้องรอเป็นผู้ตาม :25:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: Layiji เมื่อ 28 มี.ค. 2011, 23:01 น.

พยามแล้ว ใส่ไม่สำเร็จ (สระยังลอยอยู่) :05: :05:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 28 มี.ค. 2011, 23:52 น.

ถ้าจะเอาชัวร์ก็รออีกสักครึ่งปีครับ
ส่วนเรื่องการใส่ฟอนต์ที่รองรับ OpenType แบบนี้
http://www.wpdevnight.com/ (http://www.wpdevnight.com/)
(ลองดูนะครับว่าใช่อย่างที่ต้องการไหม)

ใช้เทคโนโลยีของฟอนต์ตรากระรอกครับ
http://www.fontsquirrel.com/fontface/generator (http://www.fontsquirrel.com/fontface/generator)

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: Rabbitinblack เมื่อ 28 มี.ค. 2011, 23:53 น.

แนะนำให้เลือกแบบ basic นะครับ ถ้าเลือกแบบอื่น รู้สึกมันจะตัดภาษาไทยทิ้งไปนะครับ

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 29 มี.ค. 2011, 00:01 น.

ตูลองเลือกแบบ Expert แล้วไม่ได้ปรับอะไรเพิ่ม :30:
ก็ออกมาโอเคนะครับ

(http://img3.f0nt.com/28/b21424639e442c014aff249828c60244.png)
อันนี้โครม

(http://img3.f0nt.com/29/83898d4f9ca0dbaa5210833979a43edc.png)
อันนี้ IE9

(http://img3.f0nt.com/29/66fec8600f232b2c3270c16fdbfe17d7.png)
อันนี้หมาย่าง 4

สระวรรณยุกต์สวยงาม :12:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: Rabbitinblack เมื่อ 29 มี.ค. 2011, 00:14 น.

งั้นดี คราวหน้าจะได้ใช้บ้าง 555

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: Layiji เมื่อ 29 มี.ค. 2011, 09:40 น.

ในเว็บที่ให้ดูสระยังลอยอยู่เลย

แต่ของแอนทำไงอ่ะ :25:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: Layiji เมื่อ 29 มี.ค. 2011, 20:18 น.

อ๊ะ จริงๆแล้วได้แล้วแฮะ แต่ทำไม ff 4 :07: มันยังลอยอยู่หว่า แต่ chrome มันไม่ลอย

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 29 มี.ค. 2011, 20:57 น.

ของตูได้หมดเลยนะ (วินโด่เจ็ด)

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 10 เม.ย. 2011, 01:15 น.

http://www.dynamicdrive.com/style/csslibrary/item/css_triangle_arrow_divs/ (http://www.dynamicdrive.com/style/csslibrary/item/css_triangle_arrow_divs/)
เทคนิคทำเครื่องหมายคำพูดที่มีลูกศรสามเหลี่ยมด้วย CSS :25:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 27 ก.ค. 2011, 22:22 น.

คุณบิ๊กไทเกอร์มาบ้านตูคืนนี้คืนที่สองแล้ว
เพื่อมาดู Streaming จากการสัมมนา #CSSSummit แบบออนไลน์ (ตั๋วแพงมาก)
ได้อะไรเยอะนะครับ แต่ดึกไปหน่อย เพราะเป็นเวลาฝรั่ง (บ้านเราก็สามทุ่มยันเจ็ดโมง)

http://www.slideshare.net/rachelandrew/css3-and-selectors-8702950 (http://www.slideshare.net/rachelandrew/css3-and-selectors-8702950)

อันนี้เป็นหนึ่งในลิงก์ที่ได้ครับ แนะนำ CSS3
ถ้าจะตามก็ http://www.twazzup.com/?q=%23CSSSummit&l=all# (http://www.twazzup.com/?q=%23CSSSummit&l=all#)
แต่ไม่มีอะไรสดๆ ให้ดูนะ เป็นเพียงทวีตจากคนดูเท่านั้น (ยังดี)
หรือไม่ก็อ่านทวีตตูย้อนจากเมื่อคืนตั้งกะสี่ทุ่มก็ได้

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 03 ส.ค. 2011, 16:43 น.

เบิ้ล :01a:

www.imgtocss.com (http://www.imgtocss.com)
เว็บแปลงภาพเป็น CSS ครับ :07:
ข้อดีก็คือเวลาเราส่งเมลแนบลายเซ็นหรืออะไรงี้
ถ้าเป็นภาพแล้วคนรับไม่ได้กดให้แสดงภาพ มันก็จะไม่ขึ้นชิมิ
แต่แบบนี้ขึ้นล่ะ เพราะไม่ใช่ภาพ

[noae]

[/noae]

(ที่เห็นนี่เป็น CSS นะ) :53: :53:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: JÎ›NÎ£ เมื่อ 03 ส.ค. 2011, 16:48 น.

td td td td td td td td td td td td td td td td td .... :59:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 03 ส.ค. 2011, 16:53 น.

:59: เราไม่ได้เขียนเอง ปล่อยมันไปเหอะ

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: JÎ›NÎ£ เมื่อ 03 ส.ค. 2011, 17:02 น.

แล้วมัน css ตรงหนายยยย :59:

// นึกถึงยุค adobe golive :30:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: Layiji เมื่อ 03 ส.ค. 2011, 17:30 น.

สรุปคือมันซอยตารางออกมาเป็นรูปหรือนี่ :59:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: icez เมื่อ 03 ส.ค. 2011, 17:42 น.

อ้างคำพูดจาก: JanÎ£ เมื่อ 03 ส.ค. 2011, 16:48 น.
td td td td td td td td td td td td td td td td td .... :59:

F F F F F F F F F F F F F F F F F F F U U U U U U U U U U U U U U U U U U U U U U U U U U U U U U

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: Bellbells เมื่อ 03 ส.ค. 2011, 17:50 น.

:59: แปะไม่เป็น

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 03 ส.ค. 2011, 17:56 น.

:59: ตูก็แปะไม่ขึ้นเหมือนกัน สงสัยเอาไว้ส่งทาวงอื่นที่ส่งเป็นแบบ HTML ได้

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: Ou! เมื่อ 03 ส.ค. 2011, 21:49 น.

:59: ไม่มีอะไร แค่อยากใช้อีแมะนี้บ้าง

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: NooKSTYLE เมื่อ 04 ส.ค. 2011, 02:41 น.

ลองไปแปะเป็น footer ของ hotmail

...มันบอกว่าข้อความยาวเกินไป :23:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 04 ส.ค. 2011, 11:15 น.

:30: ใส่ SNSD ทั้งวงก็โค้ดเยอะสิ

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: กากก่อเกรียนนู้บ เมื่อ 04 ส.ค. 2011, 11:24 น.

:59: เทเบิ้ล!!!!!

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: NooKSTYLE เมื่อ 04 ส.ค. 2011, 20:02 น.

โลโก้ 250x250 px เอง

โค้ดบานเลย :07:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: Layiji เมื่อ 04 ส.ค. 2011, 20:18 น.

สุดท้ายจบท้ายที่

"หากภาพคุณไม่แสดง กรุณากดตุ่มแสดงภาพในแถบเขียวด้านบน"

:30:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: เทอร์โบบูสเตอร์ เมื่อ 04 ส.ค. 2011, 20:27 น.

แง โพสในบอร์ดไม่ได้

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: Layiji เมื่อ 04 ส.ค. 2011, 22:23 น.

โพสในบอร์ดก็แปะรูปปกติสิวะ :59:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: เทอร์โบบูสเตอร์ เมื่อ 04 ส.ค. 2011, 22:42 น.

จริงด้วย :59:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: Bellbells เมื่อ 04 ส.ค. 2011, 23:21 น.

กาก :59:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: ฟิ้งซ์ เมื่อ 21 พ.ย. 2011, 08:53 น.

แปะ กระจู๋นี้มีของดีเยอะนี่นา :53:

อ่านไปได้ 12 หน้า เพิ่งรู้ว่าเคยแปะไปแล้วรอบนึง :30:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 21 พ.ย. 2011, 12:05 น.

:30: แล้วก็ไม่เข้ามาดูอีกเลย

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: ฟิ้งซ์ เมื่อ 21 พ.ย. 2011, 15:00 น.

กระทู้คล้ายๆ กันเยอะนี่นา :05:
แถมตอนนั้นเข้ามาแล้วอ่านไม่รู้เรื่องด้วย :16:
(ตอนนี้ก็แค่รู้เรื่องบ้างนิดหน่อย :53: )

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: หนุ่ม เมื่อ 18 เม.ย. 2012, 23:26 น.

ขุดหน่อย

สร้างกล้อง Leica จาก CSS3 :25:
https://developer.mozilla.org/media/uploads/demos/d/m/dmatthams/91ff736681b397cdb58667fa1c0e9e6e/leica_1334757882_demo_package/index.html

ส่วนอันนี้แม่มสร้างหัวรถไฟเลย :07: :07:
https://developer.mozilla.org/media/uploads/demos/T/a/Taufik/d3e0d49cb47d05ffaf0a55a8697e6db6/pure-css3-classic-tr_1334500141_demo_package/index.html

อยากดูอันอื่นๆ นี่เลย https://developer.mozilla.org/en-US/demos/

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 18 เม.ย. 2012, 23:42 น.

ทำไปทำไม้ย์ :0705:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: JÎ›NÎ£ เมื่อ 18 เม.ย. 2012, 23:44 น.

นั่นนะสิ :30:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: Layiji เมื่อ 19 เม.ย. 2012, 08:55 น.

ทำเพื่อให้รันได้กับ browser บางตัว :30:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 22 เม.ย. 2012, 21:53 น.

http://css-tricks.com/examples/ShapesOfCSS/ (http://css-tricks.com/examples/ShapesOfCSS/)
เนี่ยอันนี้เขาสอนวิธีวาดสี่เหลี่ยมสามเหลี่ยมแปดเหลี่ยมวงกลม ฯลฯ จาก CSS
พอทำเป็นแล้วค่อยเอาไปทำรถไฟข้างบนนู่น

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: ณัฏฐ์ เมื่อ 22 เม.ย. 2012, 23:35 น.

อินฟินิตี้ :55:
ลูกศร :55: :55:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: JÎ›NÎ£ เมื่อ 23 เม.ย. 2012, 10:09 น.

ไอ้้พวก 3 เหลี่ยม มันออกมาเป็นงั้นได้ไงอ่ะ :55:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 23 เม.ย. 2012, 10:27 น.

ที่จริงมันคือ border น่ะครับ
แต่ทีนี้ไปบังคับให้มันหนาชนกะขอบอีกด้สนซะ เลยหั่นออกมาเหลือแค่เสี้ยวเดียว

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: JÎ›NÎ£ เมื่อ 23 เม.ย. 2012, 10:52 น.

งงตรงทำไม border-bottom ที่ไปชนกับข้างบนทำไมมันตัดกันเป็นเส้นทะแยงอ่ะ :09:

(http://img3.f0nt.com/23/8be2a45140c3a01f40063f4f07df799a.jpg)

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 23 เม.ย. 2012, 11:18 น.

เปิดบทความนี้ไว้พอดี ลองดูไล่จากบนลงล่าง เขาอธิบายน่าเข้าใจดีครับ
http://net.tutsplus.com/tutorials/html-css-techniques/css-refreshers-borders/ (http://net.tutsplus.com/tutorials/html-css-techniques/css-refreshers-borders/)

สังเกตว่าถ้าเราทำ border คนละสีกันทุกด้าน จุดที่ชนกันจะเป็นทแยงๆ
แล้วถ้าเรากำหนดให้ border มันหนา ไอ้จุดทแยงนั่นจะชัดขึ้น

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: ณัฏฐ์ เมื่อ 23 เม.ย. 2012, 11:34 น.

:25:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: JÎ›NÎ£ เมื่อ 23 เม.ย. 2012, 11:37 น.

อีบทความข้างบนนั่น สีแสบตามาก :05:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 25 มิ.ย. 2012, 18:10 น.

จดไว้หน่อย ยังไม่เคยใช้ เดี๋ยวจะหยิบมาใช้ละ
เป็นเทคนิคใหม่ใน CSS ที่ใช้แทน text-indent:-9999px
แต่ซ่อนข้อความไว้หลังภาพได้เหมือนกัน

โค้ด เลือกทั้งหมด

.hide-text {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}

ที่มา http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/ (http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/)

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 30 ก.ค. 2012, 11:12 น.

รวมฮิตตัวอย่างเอฟเฟกต์ CSS3 Animation
ที่เล่นกับ Properties ต่างๆ วื้บๆ
มีเยอะมาก จิ้มดูก็ได้ไอเดียไว้ใช้เพียบละ

http://leaverou.github.com/animatable/ (http://leaverou.github.com/animatable/)

:25:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: papos เมื่อ 30 ก.ค. 2012, 11:16 น.

:12:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: หนุ่ม เมื่อ 30 ก.ค. 2012, 12:11 น.

:25:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 27 ก.ย. 2012, 11:50 น.

Adobe กำลังผลักดันให้ CSS Image Filter ได้เป็นมาตรฐาน CSS ล่ะ
ลองเล่นดูแล้วจะร้องเหยดๆๆๆ (อยากได้เบลออออ :25:)

http://html.adobe.com/webstandards/csscustomfilters/cssfilterlab/ (http://html.adobe.com/webstandards/csscustomfilters/cssfilterlab/)

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: ณัฏฐ์ เมื่อ 27 ก.ย. 2012, 13:12 น.

เฮ้ยยย :25:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: Earthchie เมื่อ 22 ต.ค. 2012, 18:10 น.

hue rotate :25:

เอาไปรวมร่างกับ jquery ได้ banner/slide show เจ๋งๆ เพียบแน่ :25:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 07 พ.ค. 2013, 12:09 น.

ขุดข้ามปี

http://www.youtube.com/watch?v=UM0Cl3wWys0#ws (http://www.youtube.com/watch?v=UM0Cl3wWys0#ws)
ต่อไปใช้ CSS แบบนี้ได้แล้วจะโคตรจ๊าบเลยครับ เว็บก็จะกลายเป็นของเท่ๆ ยืดๆ ย้วบๆ ได้
http://adobe.ly/16OIALQ (http://adobe.ly/16OIALQ)

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: Layiji เมื่อ 07 พ.ค. 2013, 12:19 น.

ไปไกลจนตามไม่ทันแหล่ว ของพวกนี้มันมีโปรแกรมคลิกๆลากๆทำได้ยังอ่ะ
หรือต้องเขียนโค้ดยุบยับเหมือนเดิมครับ :05:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 07 พ.ค. 2013, 13:14 น.

Adobe พอมีอยู่นะ ชื่อ Adobe Edge

มาใน Creative Cloud :30:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: Earthchie เมื่อ 07 พ.ค. 2013, 14:16 น.

stiqr.com ไม่ถึงขั้นนั้น แต่ก็ลากวางๆ ได้เหมือนกัน
เหมาะกับเว็บเนื้อหานิ่งๆ ครับ

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: icez เมื่อ 07 พ.ค. 2013, 15:19 น.

ท่านนายกยังไม่เลิกอีกเหรอครับ :30:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 07 พ.ค. 2013, 15:25 น.

เลิกเหอะ :05: เสียว

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 11 ต.ค. 2013, 22:37 น.

จดไว้หน่อย

Intro to CSS Masking (http://www.youtube.com/watch?v=vV3h5OetmSI#)

CSS Masking / Css Clip
http://www.html5rocks.com/en/tutorials/masking/adobe/ (http://www.html5rocks.com/en/tutorials/masking/adobe/)

เมื่อสามปีก่อนจะใช้ ก็ยังไม่มีเบราว์เซอร์บ้านไหนที่รองรับ บัดนี้น่าจะโอเคแล้ว

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: iannnnn เมื่อ 06 พ.ย. 2013, 13:09 น.

http://codepen.io/diegopardo/pen/GqEho (http://codepen.io/diegopardo/pen/GqEho)

http://codepen.io/diegopardo/pen/JFBCn (http://codepen.io/diegopardo/pen/JFBCn)

เท่ทั้งคู่เลย :25:

ชื่อเรื่อง: ตอบ: CSS เด็ดๆ
โพสต์โดย: คุณชาย ( 737 ) เมื่อ 06 พ.ย. 2013, 16:50 น.

:25: แจ่ม

ฟอนต์ฟอรั่ม

F0NT Community (เก่า) => ห้องคอม => หิ้งคอม => โพสต์ถูกเริ่มโดย: Layiji เมื่อ 30 พ.ค. 2007, 16:56 น.