CSS เด็ดๆ » ฟอนต์.คอม

Layiji

จอมพลัง

จิตพิสัย 1986

โพสต์: 10729

ออฟไลน์

CSS เด็ดๆ (30 พ.ค. 2007, 16:56 น.)

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

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

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


	บันทึกการเข้า

นักเขียนการ์ตูนรายปี

ป้าแป้งกึ่งสำเร็จรูป

เอาไว้กินกับ

มังกร

จิตพิสัย 379

โพสต์: 6148

เพียงแค่เติมน้ำ....

ออฟไลน์

Re: CSS เด็ดๆ (30 พ.ค. 2007, 16:58 น.)

ลงชื่อนั่งดูค่ะ กรี๊ดดดดด


	บันทึกการเข้า

เราแก้ไขอดีตไม่ได้ แต่เราทำปัจจุบันให้ดีได้

iSharp

และ

มังกร

จิตพิสัย 581

โพสต์: 14864

ไม่หล่อแต่อร่อย

ออฟไลน์

Re: CSS เด็ดๆ (30 พ.ค. 2007, 17:00 น.)

ดูด้วย


	บันทึกการเข้า

:+: เก็บเลเวลชีวิต :+:

iannnnn

ยักษ์

จิตพิสัย 3236

โพสต์: ขี้เกียจนับ

ความหล่อ: ประเมินค่ามิได้

ออฟไลน์

Re: CSS เด็ดๆ (30 พ.ค. 2007, 17:01 น.)

เนื่องจากต้องทำงานด้านนี้โดยตรง ล้วก็ประสบปัญหา Compatible กะ IE 3cษ

เยอะมาก
ก็เลยเซฟลิงก์เกี่ยวกับ css ไว้เยอะพอสมควรครับ

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

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


	บันทึกการเข้า

Layiji

จอมพลัง

จิตพิสัย 1986

โพสต์: 10729

ออฟไลน์

Re: CSS เด็ดๆ (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
รู้สึกว่าถ้าเกิดสลับกันจะมีปัญหาเกิดขึ้นได้

มีตัวอย่างไฟล์ด้านล่างด้วย แป๊ะยิ้ม


« แก้ไขครั้งสุดท้าย: 30 พ.ค. 2007, 17:47 น. โดย Layiji นำโชค »	บันทึกการเข้า

นักเขียนการ์ตูนรายปี

iannnnn

ยักษ์

จิตพิสัย 3236

โพสต์: ขี้เกียจนับ

ความหล่อ: ประเมินค่ามิได้

ออฟไลน์

Re: CSS เด็ดๆ (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 ก็

โค้ด:

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

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

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


	บันทึกการเข้า

คุณชาย

ลอดลาย

มังกร

จิตพิสัย 450

โพสต์: 15134

โลกกำลังร้อน จนคนกำลังเพ้อ...

ออฟไลน์

Re: CSS เด็ดๆ (30 พ.ค. 2007, 17:18 น.)

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


	บันทึกการเข้า

เราสบายดี แล้วคุณเป็นอย่างไรบ้าง

Layiji

จอมพลัง

จิตพิสัย 1986

โพสต์: 10729

ออฟไลน์

Re: CSS เด็ดๆ (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://www.ssi-developer.net/css/menu-rollover-effect_table.shtml
ไฟล์อยู่ด้านล่าง


« แก้ไขครั้งสุดท้าย: 30 พ.ค. 2007, 17:48 น. โดย Layiji นำโชค »	บันทึกการเข้า

นักเขียนการ์ตูนรายปี

Boss'fany

น้องบอสครับ :D

มังกร

จิตพิสัย 136

โพสต์: 6117

티파니

ออฟไลน์

Re: CSS เด็ดๆ (30 พ.ค. 2007, 17:49 น.)

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


	บันทึกการเข้า

지금은 소녀시대 , 앞으로도 소녀시대 , 영원히 소녀시대

Layiji

จอมพลัง

จิตพิสัย 1986

โพสต์: 10729

ออฟไลน์

Re: CSS เด็ดๆ (30 พ.ค. 2007, 17:52 น.)

แอบอ้าง

min-height: 100%;
height: auto !important;

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


	บันทึกการเข้า

นักเขียนการ์ตูนรายปี

iannnnn

ยักษ์

จิตพิสัย 3236

โพสต์: ขี้เกียจนับ

ความหล่อ: ประเมินค่ามิได้

ออฟไลน์

Re: CSS เด็ดๆ (30 พ.ค. 2007, 18:08 น.)

โค้ด:

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

จำไม่ได้ว่าอันไหนสำหรับ IE 3cษ

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

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


« แก้ไขครั้งสุดท้าย: 30 พ.ค. 2007, 20:48 น. โดย แอน ปรัชญา »	บันทึกการเข้า

iannnnn

ยักษ์

จิตพิสัย 3236

โพสต์: ขี้เกียจนับ

ความหล่อ: ประเมินค่ามิได้

ออฟไลน์

Re: CSS เด็ดๆ (30 พ.ค. 2007, 20:46 น.)

คุยกะป๋าในเอ็มแล้วไม่ถนัดครับ ง่ะ

เพราะเป็นคนที่ไม่ถนัดในการตอบเร็ว ก็เลยปั่นเอาง่ายกว่า หมีโหดดดด

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

แอบอ้าง

ถ้าเคยชินกับระบบ 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 3cษ

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

โค้ด:

* html #wrapper { height: 100%;}

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

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

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


« แก้ไขครั้งสุดท้าย: 30 พ.ค. 2007, 20:49 น. โดย แอน ปรัชญา »	บันทึกการเข้า

ริสา

Chocolate girl

หมี

จิตพิสัย 37

โพสต์: 826

ตามกระแส

ออฟไลน์

Re: CSS เด็ดๆ (30 พ.ค. 2007, 20:47 น.)

น่าสน

มารอดู


	บันทึกการเข้า

เง็ก เจสสิก้า อาม่า

ไอ้เห็ดสด...ใส

หมู

จิตพิสัย 5

โพสต์: 403

ไอ้เห็ดสด...ใส

ออฟไลน์

Re: CSS เด็ดๆ (30 พ.ค. 2007, 21:51 น.)


	บันทึกการเข้า

But there is not enough time,
And there is no, no song I could sing
And there is no, combination of words I could say
But I will still tell you one thing
We're better together.

Layiji

จอมพลัง

จิตพิสัย 1986

โพสต์: 10729

ออฟไลน์

Re: CSS เด็ดๆ (30 พ.ค. 2007, 22:07 น.)

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


	บันทึกการเข้า

นักเขียนการ์ตูนรายปี

หน้า: [1] 2 3 4 5 6 7 8 ... 37 ขึ้นบน

พิมพ์

ฟอนต์ฟอรั่ม > ไม่เกี่ยวกะฟอนต์ > ห้องคอม > หิ้งคอม > กระจู๋: CSS เด็ดๆ

	ผู้เขียน	กระจู๋: CSS เด็ดๆ (อ่าน 54925 ครั้ง)
0 สาวก และ 1 ขาจร กำลังดูกระจู๋นี้