หน้า: [1] 2 3 4 5 6 7 8 ... 38
 
ผู้เขียน หัวข้อ: CSS เด็ดๆ  (อ่าน 237981 ครั้ง)
0 สมาชิก และ 1 ขาจร กำลังดูหัวข้อนี้
หลังจากอ่านเรื่อง CSS ไปหลายวันเลยอยากจะตั้งกระทู้เกี่ยวกับการใช้ CSS แบบ
โชว์โค้ด และวิธีใช้งาน และอาจจะมีเหตุผลประกอบหน่อยๆ
แต่อยากรบกวนผุ้ใช้ CSS ทุกท่านช่วยกันโพสหน่อยนะครับ

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



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

นักเขียนการ์ตูนรายปี
ลงชื่อนั่งดูค่ะ  กรี๊ดดดดด
บันทึกการเข้า

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

รับงานถ่ายภาพ
www.rpash.com
เนื่องจากต้องทำงานด้านนี้โดยตรง ล้วก็ประสบปัญหา Compatible กะ IE 3cษ เยอะมาก
ก็เลยเซฟลิงก์เกี่ยวกับ css ไว้เยอะพอสมควรครับ

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


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

ทำมาหากินด้วยการเปิดร้านสกรีนเสื้อยืด จ้ะ
เริ่มด้วยเรื่อง 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 นำโชค » บันทึกการเข้า

นักเขียนการ์ตูนรายปี
วิธีทำ 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 จากจู๋รวมฮิตสคริปต์เด็ดอีกทีนะก๊ะ
บันทึกการเข้า

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

สู่ความโดดเดี่ยว อันไกลโพ้น
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 นำโชค » บันทึกการเข้า

นักเขียนการ์ตูนรายปี
 กรี๊ดดดดด มาดูครับ ผมไม่เคยเขียน css เลย
บันทึกการเข้า

지금은 소녀시대 , 앞으로도 소녀시대 , 영원히 소녀시대
แอบอ้าง
min-height: 100%;
height: auto !important;


อันนี้คืออะไรน่ะ
บันทึกการเข้า

นักเขียนการ์ตูนรายปี
โค้ด:
min-height: 100%;
height: 100%;


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


ส่วน !important นี่ถ้าเอาไปต่อท้ายอันไหน
แสดงว่าถ้าเกิดว่ามีการเซ็ตค่าตรงนี้ 2 อันที่ค่าซ้อนกัน ให้ยึดอันนี้เป็นสำคัญ (มั้ง)
« แก้ไขครั้งสุดท้าย: 30 พ.ค. 2007, 20:48 น. โดย แอน ปรัชญา » บันทึกการเข้า

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




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

แอบอ้าง

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

ทำมาหากินด้วยการเปิดร้านสกรีนเสื้อยืด จ้ะ
น่าสน  กรี๊ดดดดด กรี๊ดดดดด
มารอดู
บันทึกการเข้า

หน้ามึน
 ปลื้ม
บันทึกการเข้า

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.
โอ้ขอบคุณครับ
บันทึกการเข้า

นักเขียนการ์ตูนรายปี
หน้า: [1] 2 3 4 5 6 7 8 ... 38
 
 
Powered by MySQL Powered by PHP Powered by SMF 1.1.21 | SMF © 2006-2007, Simple Machines | Thai language by ThaiSMF Valid XHTML 1.0! Valid CSS!