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

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

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

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

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


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

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

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

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


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

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

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

ดูด้วย


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

รับงานถ่ายภาพ
www.rpash.com

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

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

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

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

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


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

ทำมาหากินด้วยการเปิดร้านสกรีนเสื้อยืด จ้ะ

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 นำโชค »	บันทึกการเข้า

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

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 ก็

โค้ด:

<body>

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

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

</body>

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

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

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


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

ทำมาหากินด้วยการเปิดร้านสกรีนเสื้อยืด จ้ะ

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

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


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

สู่ความโดดเดี่ยว อันไกลโพ้น

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 นำโชค »	บันทึกการเข้า

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

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

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


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

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

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

แอบอ้าง

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

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


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

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

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

โค้ด:

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

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

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

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


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

ทำมาหากินด้วยการเปิดร้านสกรีนเสื้อยืด จ้ะ

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 น. โดย แอน ปรัชญา »	บันทึกการเข้า

ทำมาหากินด้วยการเปิดร้านสกรีนเสื้อยืด จ้ะ

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

น่าสน

มารอดู


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

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.

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

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


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

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

หน้า: [1] 2 3 4 5 6 7 8 ... 38

ฟอนต์ฟอรั่ม > F0NT Community (เก่า) > ห้องคอม > หิ้งคอม > หัวข้อ: CSS เด็ดๆ

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