CSS มันคืออะไรกันครับ ผมอยากรู้อะ มันใช้งานยังไง? เว็บ myspace มันต้องใส่ภาษา CSS เพื่อที่จะ เปลี่ยนแปลงเว็บอ่าคับ เช่น เปลี่ยนฟอนต์ เปลี่ยนพื้นหลัง ใส่รูป ใส่เพลง ใส่แบนเนอร์ต่างๆ ใส่Flash ฯลฯ ผมอยากใช้เป็นครับ ช่วยหน่อยครับ ได้โปรดครับ :44:
ใช่ครับ ที่พูดมานี่ถูกต้องเลย
ข้อดีของ css คือ
1.ไม่ต้องกำหนดสไตล์ว่าจะใส่สียังไง แบล็กกราวนด์แบบไหน ฯลฯ ทุกครั้งที่เขีียนเว็บแต่ละหน้า
2.มีประโยชน์มาก โดยเฉพาะอย่างยิ่งกับการใช้ script อย่าง .asp .php
3.มีรูปแบบที่หลากหลายกว่า เช่นกำหนดขอบให้เป็นเฉพาะแต่ละด้านได้ หรือทำขอบเป็นเส้นปะ
4.ทำให้เว็บเป็นระเบียบ คือกำหนดเป็นมาตรฐานเอาไว้เลย
5.ทำให้โหลดหน้าเว็บได้เร็ว เพราะการโหลดไฟล์ .css จะโหลดแค่ครั้งเดียวต่อเว็บนั้น(โดยธรรมชาติ)
แต่ถ้าใส่สไตล์ทุกหน้า แน่นอน โค้ดจะเยอะ จนทำให้ขนาดใหญ่มโหฬาร
6.สะดวกต่อการแก้ไข เพราะแก้ครั้งเดียว ก็คือแก้ทั้งเว็บ เปลี่ยนโค้ดสี css บรรทัดเดียว เว็บทั้งเว็บก็จะเปลี่ยนตาม
เท่าที่รู้มา มันไม่มีข้อเสียครับ
ส่วนเรื่องการใช้ css ไม่ยากนะครับ เริ่มจากการแกะ source ของเว็บอื่นๆก่อน อย่างเว็บนี้ดูก็ได้
http://f0nt.com/forum/Themes/iannnnn/style.css
แล้วสังเกตความเปลี่ยนแปลงที่เกิดขึ้น และถ้าจะเอาดีจริงๆจัง แนะนำครับว่าใช้ไฟร์ฟอกซ์ดีกว่า เพราะมันมีเครื่องมือเอาไว้แก้ไข css แล้วดูกันสดๆได้เลย
CSS มันคืออะไรกันครับ
- มันคือ .. เอ้อ คือไฟล์ตัวนึงที่เอาไว้กำหนดหน้าตาบุคลิกของเว็บเพจรับ
ผมอยากรู้อะ มันใช้งานยังไง?
- เอาคร่าวๆ คือ สร้างไฟล์ CSS แยกมาตัวนึงแล้วก็ให้หน้าเว็บเรียกไปใช้
- ส่วนวิธีเอาไปใช้นั้น ยาวเหยียดครับ
- ลอง View source หน้านี้หาคำว่า css ดู แล้วลองเชื่อมโยงกับสิ่งที่คุณเข้าใจ งงแล้วถาม
เว็บ myspace มันต้องใส่ภาษา CSS เพื่อที่จะ เปลี่ยนแปลงเว็บอ่าคับ เช่น เปลี่ยนฟอนต์ เปลี่ยนพื้นหลัง ใส่รูป ใส่เพลง ใส่แบนเนอร์ต่างๆ ใส่Flash ฯลฯ ผมอยากใช้เป็นครับ ช่วยหน่อยครับ ได้โปรดครับ
- ไม่ทราบว่าคุณ จชกจ ชอบอ่านขนาดไหน เลยเอาลิงก์มาแปะให้ดูเล่นครับ
- www.w3schools.com/css/css_intro.asp แนะนำตัว CSS และสอนตั้งกะเบบี๋ยันเล่นเป็น
- www.htmlhelp.com/reference/css/quick-tutorial.html ถ้าชอบอะไรเร็วๆ ด่วนๆ ลองอ่านที่นี่ เข้าใจง่ายดี
ถ้างง ถามนะครับ
อย่าเขิน
ใช้เวลาเรียนรู้ไม่นานครับ
ผมเองก็เพิ่งจะลืมตาอ้าปากได้เมื่อไม่กี่เดือนก่อนเอง :08:
ถ้าอยากหาเว็บสุดยอดอลังการงานสร้างแห่ง css --- ไว้ลอกนั่นแหละ
ก็ลอง http://del.icio.us/iannnnn/css ครับ
ส่วนห้าโอ
เอ็งเป็นโคตรเร็วเลย
ไม่ไหวๆ เด็กสมัยนี้
เปิดเรียนแว่วๆมาว่า อาจารย์จะสอนสร้างเว็บ
ขอบคุณมากครับ :12:
ข้อเสียของ css มีนะครับ
คือคำสั่งเหมือนกันแต่แสดงผลต่าง Browser ไม่เหมือนกัน
หรือนี่จะเรียกว่าข้อเสียของ Browser ดีหว่า - -?
มาช่วยอีกคนๆ
อย่างโอเปร่าเงี้ย มันจะไม่แสดงผล css หรือจาวาสคริปต์บางคำสั่ง
แตว่าถ้าเปิดในไออีแล้วมันจะแสดงผลปกติ
แต่ก็เป็นแค่บางคำสั่งนะคะ
สองโพสต์ข้างบน เป็นที่ไอ้อีครับ ไม่ใช่ css
สังเกตครั้งที่แปดล้านได้เลยว่า
ปัญหาจะเกิดขึ้นกะบราวเซอร์ที่ทะลึ่ง กำหนดกติกามาใช้กะตัวเอง
แต่ไม่บอกชวบ้านชาวช่อง -- และนั่นคือ ความไม่ได้มาตรฐาน
ที่เป็นเอกสิทธิ์เฉพาะของเล็กนิ่มครับ
อ้างคำพูดจาก: iannnnn เมื่อ 14 มี.ค. 2006, 23:24 น.
ถ้าอยากหาเว็บสุดยอดอลังการงานสร้างแห่ง css --- ไว้ลอกนั่นแหละ
ก็ลอง http://del.icio.us/iannnnn/css ครับ
ส่วนห้าโอ
เอ็งเป็นโคตรเร็วเลย
ไม่ไหวๆ เด็กสมัยนี้
ใช่เลย
วีหัด css มานานมาก
แต่ไม่เก่งซักที :05:
:07: ถ้าเห็นจานถ่อมตัวอีกที จะลบทีละสิบเลย
ทำบทความสอนไปเลยครับ
พี่แอนใจร้าย :05:
(+1 เคน เห็นด้วยค่ะ :22:)
จะว่าไปมันก็ยากนะที่จะสอน เพราะคำสั่งมันเยอะ
ถึงรู้หน้าที่ของแต่ละตัว แต่ใช้ไม่เป็นก็จบ
ต้องลองเล่นเองสถานเดียวครับ
ปล.ถ้าเห็นจานถ่อมตัวอีกที จะลบทีละหนึ่งเลย :07:
ก็สอนเฉพาะ โครงสร้างและวิธีนำไปใช้มันก็พอ
เพราะโครงสร้างก็ไม่มีอะไรมาก ก็มีแค่
อ้างอิงselector {propertiy: value}
แล้วก็วิธีนำไปใช้ ก็มีไม่กี่วิธี เช่น ฝังไว้กับแท็ก, ฝังไว้ที่เฮดเดอร์ หรือฝังไว้ในไฟล์ (นอกนั้นยังมีการกำหนด CSS ด้วย จาวาสคริปท์อีก แต่มันยุ่งยากไป)
แล้วส่วนที่เป็น property กับ value จะมีอะไรบ้าง ก็ทำตารางให้เอาไปใช้เลย
ถ้าคนเป็น HTML แล้ว ก็น่าจะเข้าใจ เพราะว่าความเห็นส่วนตัวแล้ว ผมว่าภาษา HTML ยากกว่า CSS นะ
เอางี้ ถ้าไม่มีใครคิดจะสอน ผมจะสอน เพราะจะได้ทำประโยชน์ให้ชาวโลกได้บ้าง เพราะรู้สึกว่าตัวเองไม่ค่อยมีประโยชน์ต่อใครสักเท่าไหร่ :05:
แต่ถ้ามีใครสอนแล้ว ผมไม่ยุ่งด้วยล่ะ...
สอน Java Script ได้ไหมครับ แค่ Java Script ธรรมดาๆนี่แหละ ผมไม่รู้จะไปหาความรู้ที่ไหนดัี หนังสือมันก็เป็น Java ตัวใหญ่เลย พวกในเว็บก็ไม่ค่อยมี Search เจอแต่ Free Script Download ซึ่งอ่านไม่รู้เรื่องอยู่ดีครับ :05:
งั้นจู๋นี้เอาไว้ติว CSS โดยจาน อจวว ละกันครับ :12:
ซวยล่ะ :38:
งั้น CSS พรุ่งนี้เริ่มสอนละกัน :05:
ส่วน จาวาสคริปก็พอสอนได้ แต่ไม่ลึกมาก จะเอาไหม หรือจะมีใครอื่นที่เก่งกว่า มาสอนจาวาสคริปท์ดีไหม
ปล.เคยเป็นวิทยากรสอน CSS กับ จาวาสคริปท์ให้คนในบริษัทเก่ามา น่าจะพอสอนได้ แต่ไม่ลึกถึงขั้นเซียนนะ :05:
อยากให้สอน javascript มากๆครับ
ตั้งจู๋ใหม่เป็นเรื่อง CSS Tutorial ไปเลยครับ
หรืออีกจู๋ Javascript Tutor ก็ได้
จะได้รู้กันไปว่านี่คือเว็บฟ๐นต์
แตก CSS
แตก JavaScript
:35:
งั้นเริ่มสอน CSS ล่ะนะ :05:
บทนำ
ก่อนที่จะเริ่มสอน ทุกคนต้องพอรู้เรื่องเกี่ยวกับ HTML มาก่อน และพออ่านเป็น เขียนเป็นอยู่บ้าง ไม่งั้นจะไม่เข้าใจแน่นอน
ส่วนใครยังไม่เป็น HTML ก็เข้าไปอ่านในเว็บดังนี้
http://www.sansukhtml.com/ - อันนี้สอนเบื้องต้น เหมาะสำหรับคนยังไม่เคยเป็น
http://www.nectec.or.th/courseware/internet/html/index.html - อันนี้สอนละเอียดดี เหมาะสำหรับคนที่เป็นนิดๆแต่ยังไม่เชี่ยว
CSS ย่อมาจาก Cascading Style Sheets
และเนื้อหาบทนำอื่นๆ ได้มีคนกล่าวไว้แล้วในคำตอบที่ผ่านๆมา
ขอแทรกนิดนึงครับ
อยากทราบ javascript ที่ใช้ควบคุม css ในหน้าเว็บครับ
เช่นเว็บ ผจก ที่กดแล้วเปลี่ยนขนาดฟอนต์น่ะ
ในที่นี้ถ้าเราจะเอามาเปลี่ยน css ทั้งหน้า จะทำได้จะใด
บทที่ 1 CSS Syntax
ภาษา CSS เป็นภาษาที่ไม่เป็น case-sensitive คือ ตัวเล็กตัวใหญ่จะมีผลเหมือนกัน เช่นเดียวกับ html นั่นเอง ส่วนรูปแบบคำสั่งของ CSS เป็นดังนี้
1.1Syntax
selectors {property: values}
โดย
selectors คือ การบ่งบอกว่า เราจะให้คำสั่งนี้ ใช้กับอะไร (ที่เติม s เพราะว่า บางทีเราอาจเลือกหลายๆอย่างได้)
property คือการกำหนดคุณสมบัติกับสิ่งที่ selector นั้นเลือก
values คือ ตัวแปรที่จะกำหนด (ซึ่งบางครั้งก็มีหลายตัวแปร)
ตัวอย่างเช่น
font {color: red}
คำสั่งนี้ เป็นการทำให้ตัวอักษร tag "font" ทุกแท็กเป็นสีแดงหมด
ตัวอย่างต่อมา
font {color: red; font-family: tahoma}
คำสั่งนี้ เป็นการที่นอกจากจะทำให้ตัวอักษรใน tag "font" ทุกแท็กเป็นสีแดงหมด แล้วยังใช้ฟอนต์ Tahama เสียด้วย
โดยเป็นการแสดงให้เห็นว่า ใน 1 คำสั่ง สามารถมีได้หลาย property นั่นเอง โดยเป็นการใช้ ";" คั่นระหว่าง property นั่นเอง
ลองดูอีกตัวอย่าง
font {
color: red;
font-family: tahoma
}
แบบนี้ก็มีผลอันเดียวกับด้านบน ซึ่งจะใช้แบบไหนแล้วแต่ถนัด แบบบน ประหยัดเนื่อที่ ส่วนอันล่างจะดูง่ายกว่า ใครพอรู้ภาษาตระกูล C หรือ จาวา มา จะเห็นว่ามันมีส่วนคล้าย ตรง ปีกกา "{ }" กับ การคั่น property ด้วย ";"
ตัวอย่างต่อมา
font {
color: red;
font-family: tahoma
}
body {
background-color: green;
}
เป็นตัวอย่างว่า เราสามารถใช้ได้หลายๆคำสั่งนั่นเอง คือ นอกจากจะให้กำหนด สีแดง กับฟอนต์ให้แท็ก "font" แล้ว ยังไปกำนด สีพื้นหลังให้กับหน้าเว็บเป็นสีเขียวอีกด้วย
อ้างคำพูดจาก: iannnnn เมื่อ 16 มี.ค. 2006, 09:17 น.
ขอแทรกนิดนึงครับ
อยากทราบ javascript ที่ใช้ควบคุม css ในหน้าเว็บครับ
เช่นเว็บ ผจก ที่กดแล้วเปลี่ยนขนาดฟอนต์น่ะ
ในที่นี้ถ้าเราจะเอามาเปลี่ยน css ทั้งหน้า จะทำได้จะใด
อ๊ะ เดี๋ยวลองดูให้ (แปบนึงนะ) อาจจะไม่ได้คำตอบที่สมบูรณ์นัก
แก้ไข: หาไม่เจอ ขอ URL หน่อย :05:
:45:
โฮก... {หมีโหด}
กว่าจะหาเจอ....
<html>
<head>
<style type="text/css">
.s1 {
background-color: green;
color: red;
}
.s2 {
background-color: blue;
color: orange;
}
</style>
<script language="JavaScript">
function toGreenRed() {
document.getElementById("body1").className="s1";
}
function toBlueOrange() {
document.getElementById("body1").className="s2";
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body id="body1">
<font>ฟ๐นต์</font><br />
<input type="button" onclick='toGreenRed()' value="พื้นหลังเขียว"/>
<a href='javascript: toBlueOrange();'>พื้นหลังน้ำเงิน</a>
</body>
</html>
ถ้าเข้าใจก็ลองเอาไปแอปพลายเอง
ไม่รู้ว่าตรงจุดประสงค์ที่ถามหรือเปล่า
พยายามทำให้โค้ดไม่ซับซ้อนมากแล้ว
ถ้าไม่เข้าใจตรงไหนก็ถามมานะครับ
แต่แบบที่เปลี่ยนไฟล์ CSS เลย ไม่รู้ว่าทำไงเหมือนกัน
โฮก.... {หมีโหด}
สู้ตายนะลุงอจวว. :42:
ก่อนอื่นต้องขอบอกว่า ใครยังไม่เข้าใจ ก็อ่านผ่านๆไปจนถึงบทที่ 2 ก่อน แล้วจะร้อง อ๋อ... เอง(มั้ง)
เพราะบทนี้จะยังไม่ยกตัวอย่างที่ใช้งานได้จริงๆ
1.2 Selector
Multi-Selector
เราสามารถ ใช้ selector ได้หลายๆตัว ต่อ 1 คำสั่ง เช่น
b, strong {
color: green
}
ในที่นี้ทั้งแท็ก "b" และ "strong" ก็ถูกจับจอง ให้แลมองเป็นสีเขียว
Class Selector
สมมุติว่าเรากำหนดแท็ก font ดังนี้
<font>ถ้า อจวว ไม่หล่อ ก็ยังรักจริง</font>
<b>ถ้า อจวว ไม่หล่อ ก็ขอแฟนสวยๆ</b>
<font class="s1">แต่ที่จริงแล้ว อจวว ก็ดูไปแล้วเหมือนจะหล่อนิดๆ</font>
<b class="s1">(ไอ้คนติวเตอร์จิตใจมันฟุ้งซ่านป่าววะ)</b>
ในที่นี้ 2 บรรทัดด้านบน จะไม่ถูกกำหนด class แต่ 2 บรรทัดล่าง ได้ถูกกำหนด class เอาไว้ แถมใช้ชื่อเดียวกันอีกตะหากคือ "s1" ดังนั้นเราจะกำหนดสไตล์ให้กับ class ที่ ชื่อ "s1" ดังนี้
.s1 {
color: green
}
ผลของมันคือ เป็นการกำหนดให้ 2 บรรทัดล่าง จากโค้ดข้างบน ให้มันเป็นสีเขียว นั่นเอง ไม่ว่าจะแท็ก "font" หรือ "b" ก็ตาม
แต่ถ้าเราจะเพิ่มเติมว่า ในเท็ก "b" ให้มีขนาดฟอนต์สัก 20 pt แต่แท็กอื่นไม่ต้องไปกำหนดอะไรมัน เราก็ใช้แบบนี้
.s1 {
color: green
}
b.s1 {
font-size: 20pt
}
ID Selector
วิธีการ เหมือน Class Selector แต่จะแตกต่างตรงที่ "class" เป็น "id" และ "." เป็น "#"
<font>ถ้า อจวว ไม่หล่อ ก็ยังรักจริง</font>
<b>ถ้า อจวว ไม่หล่อ ก็ขอแฟนสวยๆ</b>
<font id="s1">แต่ที่จริงแล้ว อจวว ก็ดูไปแล้วเหมือนจะหล่อนิดๆ</font>
<b id="s1">(ไอ้คนติวเตอร์จิตใจมันฟุ้งซ่านป่าววะ)</b>
เราจะกำหนดสไตล์ให้กับ id ที่ ชื่อ "s1" ดังนี้
#s1 {
color: green
}
ถ้าเราจะเพิ่มเติมว่า ในเท็ก "b" ให้มีขนาดฟอนต์สัก 20 pt แต่แท็กอื่นไม่ต้องไปกำหนดอะไรมัน เราก็ใช้แบบนี้
#s1 {
color: green
}
b#s1 {
font-size: 20pt
}
หมายเหตุ :
1. จริงๆแล้วตามหลัก ไม่ควรใช้ id ซ้ำกัน เพราะเวลาอ้าง id ด้วย Javascript จะเกิดปัญหา ดังนั้น ควรใช้ class จะดีกว่า
2. เค้าว่ากันว่า (เปิดตำรามา) ไม่ควรใช้ชื่อ id หรือ class ให้มีตัวเลขนำหน้าเช่น 3000annnn แต่ annnn3000 นี่ใช้ได้ เพราะตัวเลขนำหน้า เค้าว่ากันว่าถ้าเปิดใน Fixefox แล้วจะ error (แต่ไม่เคยลองทำดูนะ)
ต่อๆๆ กำลังบ้าน้ำลาย เพราะรีเควสมากันดีนัก จะติวให้ตาลายอ้วกแตกอ้วกแตนกันไปข้างนึง ฮ่าๆๆๆๆ :30: :30: :30: (หัวเราะอย่างสะใจ)
1.3 ความซ้ำซ้อน
ดูตัวอย่าง สมมุติว่าเราทะลึ่งพิมพ์โค้ดลงไปแบบนี้
b {
color: red;
font-size: 10pt
}
b {
font-size: 20pt;
text-align: center
}
จะเห็นว่าเราอ้างซ้ำซ้อนกัน ผลที่ได้ จะกลายเป็นแบบนี้
b {
color: red;
font-size: 20pt;
text-align: center
}
จะเห็นได้ว่า มันจะยก color ที่เป็นสีแดงจากตัวบนมาใช้ แล้วมันจะเปลี่ยน font-size จากเดิม 10pt เป็น 20pt แล้วจากเดิม ไม่มี text-align มันก็เพิ่มขึ้นมา ซึ่งหลักการของมันคือ มันจะอ่านคุณสมบัติจากตัวแรกก่อน พอมันพบว่ามีอะไรเปลี่ยนแปลงไป มันก็จะอัพเดทคุณสมบัติที่แก้ไขหรือเพิ่มขึ้นมานั่นเอง
ด้วยหลักการนี้เราไปประยุกต์ ได้ดังนี้
สมมุติว่าเรามีโค้ด
b {
color: black;
font-size: 10pt
}
b.s1 {
color : green
}
โค้ดนี้ มันจะกำหนดแท็ก b ให้เป็นตัวอักษรสีดำ และมีขนาด 10 pt แต่ว่าเราอยากให้มีแท็ก b บางตัวให้มันมีสีเขียวบ้าง เราก็แค่ใส่ class="s1" ลงไปในแท็กที่อยากให้สีเขียว ซึ่งไม่ว่าแท็ก b อันไหน มันก็ยังมีขนาด 10 pt ที่เป็นคุณสมบัติเดียวกันอยู่ดี
1.4 Comment
ถ้าเราไม่อยากให้คำสั่งนั้นใช้งานได้ หรือจะโน๊ตอะไรก็แล้วแต่ เราจะคอมเม้นได้เหมือนๆจาวา คือ
/* นี่คือคอมเม้นนะจ๊ะพ่อรูปหล่อ */
font {color: blue}
/* อันนี้ไม่ใช้ชั่วคราวนะยะ
font {color: green}
*/
พอก่อนสำหรับวันนี้ พรุ่งนี้เรามาว่าด้วยการกำหนด สีของ แท็ก "A" แล้วก็เริ่มบทที่ 2 วิธีการนำไปใช้กัน
(+2) ค่าคำตอบครับ
(จริงๆ อยากได้แบบเรียกไฟล์เอาเลย แต่ยังงี้ก็พอ เอาไว้ใช้ในแต่ละหน้าไป)
<link rel="stylesheet" type="text/css" href="แฟ้มซีเอสเอส.css">
ใช่ตัวนี้หรือเปล่าครับ
แบบไฟล์ เห็นส่วนใหญ่เค้ามักใช้ php หรือ asp อะไรแบบนี้ เขียนให้มันเปลี่ยนไฟล์น่ะครับ
ยกตัวอย่าง http://www.punneng.com ปั้นเหน่งจะเปลี่ยน CSS เป็นสีของวันที่เปลี่ยนไป
ถ้างั้นก็ง่ายหน่อย
แต่แบบแนบไปในไฟล์แบบนี้็โอเคครับ เดี๋ยวจะเอาไปใช้ :12:
พี่ อจวว คะ
คืออยากถามว่า
.s1 ที่อยู่ข้างหน้าปีกกา มันคืออะไรคะ ไม่เข้าใจ
พอดีไม่รู้เรื่อง css :42:
อ๋า..
เดี๋ยวมาเกาะเรียนด้วยคน 55
อ้างคำพูดจาก: MINI~ เมื่อ 16 มี.ค. 2006, 15:09 น.
พี่ อจวว คะ
คืออยากถามว่า
.s1 ที่อยู่ข้างหน้าปีกกา มันคืออะไรคะ ไม่เข้าใจ
พอดีไม่รู้เรื่อง css :42:
แสดงว่าตูสอนไม่เข้าใจ (รู้สึกมีปมด้อยด้านการสอนคน) :05:
ก่อนอื่น จะถามว่า มินิ พอจะเข้าใจ HTML บ้างใช่ไหมครับ
ถ้าเข้าใจแล้ว ลองย้อนกลับไปหัวข้อ 1.1 Systax อีกทีนะ
ในนั้นมันจะบอกว่า เป็นส่วนของ selector ซึ่ง ถ้าไม่มีจุดนำหน้า ก็หมายถึง มันจะเป็นแท็กใน html
เช่น font หน้าปีกกา ก็หมายถึง มันจะกำหนดสไตล์ให้กับ แท็ก font ทุกแท็ก ในไฟล์ html นั้นเลย
ส่วนที่ถามเรื่อง .s1 หน้าปีกกา คือ s1 เป็นชื่อที่เราตั้ง จะชื่ออะไรก็ได้ เพื่อเป็นการกำหนดว่า สไตล์นี้มันจะไปกำหนดให้กับแท็ก html ที่กำหนด attribute ที่ชื่อ class เป็น s1
เช่น <font class="s1">kkk</font> หรือ <b class="s1">kkk
คือมันจะไปกำหนดสไตล์ ให้เฉพาะ แทกที่ ใส่คำว่า class="s1" ลงไป
ปล.สอนยากอย่างที่ห้าโอบอกจริงๆด้วย :05:
พอเข้าใจได้ครับ ไปอ่านเว็บฝรั่งที่หน้าแรกนิดหน่อยก็ได้ครับ แต่ไม่รู้จะฝึกอย่างไรดีครับ
s1 จะใช้ชื่ออื่นเช่น <font class="mee">โฮก</font>
.mee {color:gay} ก็ได้หรือครับ
มีหลายสิ่งที่ผมยังไม่แน่ใจ แต่ตอนนี้รู้แล้วครับ มาจากพี่ อจวว.นี่แหละ
ขอบคุณมากครับ
อ๋อ
class นี่ก็ประมาณแปลเป็นไทยว่า หน้า อะไรอย่างนี้ปะคะ
font class = ฟอนต์ของหน้า....
ถ้าเป็นภาษา css ก็ใช้ . แทน font class
ใช่มั๊ยคะ :25:
อธิบายง่ายๆ
class มันก็คือชื่อส่วนนั้นๆน่ะครับ
ยกตัวอย่าง
.กรุงเทพ
{มีม็อบ : 5000 คน;
มีบ้าน : 4000 หลังคาเรือน;
ทุกคน : เป็นตุ๊ด}
แต่ก็ไม่จำเป็นว่าจะต้องใช้กับกรุงเทพซักกะหน่อย
ถ้าใช้กับภูเก็ต คุณสมบัติของภูเก็ตก็จะเหมือนกับกรุงเทพครับ
ห้าโอเปรียบเทียบได้แจ๋ว!! :45:
ขออธิบายเสริมแบบเตาะแตะ
จาก http://f0nt.com/forum/index.php/topic,5153.msg203082.html#msg203082 นะครับ
แท็ก เช่น <body>,<textarea>
ซึ่งมันมีอยู่แล้วในภาษา html เวลาเอา่มากำหนดก็ว่ากันไปเลย ดังนี้
body {background-color: #000}
textarea {width: 500px}
คลาส เช่น .กรุงเทพ, .บุรีรัมย์, .บริติชเวอร์จิ้น
เป็นชื่อเฉพาะที่ตั้งขึ้นมา (ภาษาอังกฤษเท่านั้นนะ) จะใส่หลังจุด ดังตัวอย่างที่ว่ามา
เราจะกำหนดอะไรไปก็ได้ลงในนั้น
ไอดี เช่น #ไทย, #ยุ่น
ปกติแล้ว ไอดีมันจะใหญ่กว่าคลาส
คือในไอดีนึงสามารถยัดคลาสได้หลายอัน
งงไหมครับ ต้องลองทำดู
แนะนำโปรแกรมเด็ด
(http://www.bradsoft.com/img/ts-banner.gif)
โหลดเวอร์ชั่น Lite ได้ที่ www.bradsoft.com/topstyle
แนะนำให้โหลดโปรแกรมนี้มาช่วยเขียน CSS (อยากได้เวอร์ชั่นโปรไหมครับ :21: )
เพราะขณะที่เขียนมันจะมีบรรดาสรรพคุณที่คุฯต้องการอยู่ในแถบให้ .. ใช้ง่ายดี
อีกตัวนึงเป็น อทช ที่ใช้ดูและทดลองแก้ไข css ในหน้าของหมาย่างเลย (นี่ก็ใช้ง่าย)
แนะนำไปแล้วที่ http://f0nt.com/forum/index.php/topic,1556.msg187784.html#msg187784
โหลดที่ https://addons.mozilla.org/extensions/moreinfo.php?id=179&application=firefox
:40:
ในดรีมบีเวอร์ก็เห็นเด้งๆมาช่วยเราเหมือนกันครับ
อ้างคำพูดจาก: 山 เมื่อ 16 มี.ค. 2006, 17:46 น.
ในดรีมบีเวอร์ก็เห็นเด้งๆมาช่วยเราเหมือนกันครับ
นั่นล่ะ ที่ชอบมากๆ
และอย่าลืมปิดเครื่องหมาย ; ทุกครั้งที่ขึ้นคำสั่งใดๆนะ
(http://img.f0nt.com/image/1991.jpeg)
Top Style ก็มีนะครับ หรูกว่านั้นเยอะเลยด้วย
(ฟด2/iannnnn :43: )
อา เดี๋ยวนี้โปรแกรมช่วยเยอะจัง
... ใช้แต่ editplus :32:
อ้างคำพูดจาก: iannnnn เมื่อ 16 มี.ค. 2006, 17:34 น.
ห้าโอเปรียบเทียบได้แจ๋ว!! :45:
ขออธิบายเสริมแบบเตาะแตะ
จาก http://f0nt.com/forum/index.php/topic,5153.msg203082.html#msg203082 นะครับ
แท็ก เช่น <body>,<div>
ซึ่งมันมีอยู่แล้วในภาษา html เวลาเอา่มากำหนดก็ว่ากันไปเลย ดังนี้
body {background-color:#000}
div {width}
คลาส เช่น .กรุงเทพ, .บุรีรัมย์, .บริติชเวอร์จิ้น
เป็นชื่อเฉพาะที่ตั้งขึ้นมา (ภาษาอังกฤษเท่านั้นนะ) จะใส่หลังจุด ดังตัวอย่างที่ว่ามา
เราจะกำหนดอะไรไปก็ได้ลงในนั้น
ไอดี เช่น #ไทย, #ยุ่น
ปกติแล้ว ไอดีมันจะใหญ่กว่าคลาส
คือในไอดีนึงสามารถยัดคลาสได้หลายอัน
งงไหมครับ ต้องลองทำดู
ยังติดอยู่นิดนึงตรง กรุงเทพ , บุรีรัมย์....
อันนี้คือว่า อย่างเช่น
.td1 {
border: 5px solid #ffffff;
}
(เอามาจากธีมในกูไลฟ์)
อะไรประมาณนี้รึเปล่าคะ ?
(td1 รู้ว่ามันคือยังไง แต่เรียกภาษาไทยว่ายังไงดีคะ :42:)
ใช่จ้ะ ยังงั้นเลย
อย่าง tag เนี่ย มันคือภาษาของ html ที่เป็นคำศัพท์อยู่แล้ว (เช่น <บ้าน>, <พรรคการเมือง>
แต่ class นี่เป็นชื่อเฉพาะที่เรากำหนดมาเพื่อใช้ประกอบกับแท็กอะไรก็ได้เป็นงวดๆ ไป
เช่น .จันทร์ส่องหล้า, .ทักสินรักเทมาเส็ก เป็นต้น
แล้วเราจะตั้งขึ้นมายังไงล่ะคะ :09:
เอาไปใช้ประกอบแท็กที่ต้องการครับ เช่น
กำหนด css ขึ้นมาดังนี้นะ
อ้างอิงประเทศไทย { การปกครอง: ประชาธิปไตย; } // ตรงนี้ก็คือ tag
.ทรท { หัวหน้าพรรค : รวย,เหลี่ยม; ลูกพรรค : โลภ; จำนวนผู้สมัคร : 400 คน;} // ตรงนี้คือ class
.ปชป {จำนวนผู้สมัคร : 0 คน;}
เวลาเอามาใช้ก็
อ้างอิง<โลก>
<ประเทศไทย> <-- ตรงนี้บราวเซอร์จะเห็นลักษณะของประเทศไทย คือปกครองโดยระบอบประชาธิปไตยโดยอัตโนมัติ
เราจะทำการหาเสียงกันนะครับ
<พรรค class="ทรท">สวัสดีครับ เลือกผมนะครับ</พรรค>
<พรรค class="ปชป">สวัสดีครับ เลือกผมนะครับ</พรรค>
</ประเทศไทย>
</โลก>
พอจะนึกออกไหม ว่า พรรคทั้ง 2 พรรคที่ถูกกำหนด class ต่างกัน มันจะออกมาเป็นยังไง
เอ้อ ได้ข้อสรุปแล้วว่า นิยามของ css ก็คือ การกำหนด
สรรพคุณ นี่เอง
พอเข้าใจแล้วค่ะ ขอบคุณค่ะ :42:
:30:
เข้าใจได้ไงเนี่ย ตูอ่านเองยังงงเองเลย
พรรคการเมือง อะไรก็ไม่รู้ :21:
(+1)
จริงๆแล้ว ในมุมมองของผมคือ...
tag หมายถึง คน พรรคการเมือง จังหวัด ประเทศ ซึ่งบางทีก็ไม่เกี่ยวกันเลย เช่น จังหวัดกับพรรคการเมือง(กรณีศึกษาคือ br hr) แต่บางที่ก็ขึ้นอยู่กับ อีก tag เช่น คน อาศัยอยู่ในจังหวัด ซึ่งจังหวัดก็อยู่ในประเทศอีกที (กรณีศึกษาคือ แท็ก table tr td)
class หมายถึง เมือง ชานเมือง บ้านนอก ซึ่งมีความสัมพันธืกันตรงที่ เป็นแต่ละประเภท ของจังหวัด เหมือนกัน
id หมายถึง กรุงเทพฯ นครฯ ทรท ไอ้แอนนนนน (ซึ่งไม่บังคับ แต่ควรที่จะเป็นชื่อเฉพาะและไม่ซ้ำกัน เพื่อการเรียกจาก Javascript ให้ถูกต้อง)
กล่าวคือ
id(identify) จะเป็นชื่อของ tag เพื่อให้ tag นั้นๆ ดูต่างกันเช่น
<คน id="ทักษิณ">อิอิอิ</คน>
<คน id="ไอ้แอนนนนน">หึหึหึ</คน>
เวลา Javascript มันจะเลือกกระทำ เราจึงต้องบอกให้ Javascript ให้เข้าใจซะก่อนว่าจะเอาใครออกไป
ถ้าไม่ใส่ id แล้ว มันก็จะสับสน ว่าจะเอาใครออกกันแน่
ส่วน class ก็เหมือนกับ ชนชั้น หรือรูปแบบ เช่น รถเบนซ์คลาส C คลาส S
ตัวอย่างก็เช่น
<ประเทศ>
<จังหวัด class="เมือง" id="กรุงเทพฯ"></จังหวัด>
<จังหวัด class="เมือง" id="เชียงใหม่"></จังหวัด>
<จังหวัด class="บ้านนอก" id="นครฯ"></จังหวัด>(สมมุตินะจ๊ะสมมุติ)
</ประเทศ>
อะไรแบบนี้
ดังนั้น ถ้าในอนาคตเราจำเป็นต้องใช้ Javascript เข้ามาร่วมด้วยในอนาคต อย่าพยายามใช้ id ซ้ำกัน
หรือไม่งั้นก็หลีกเลี่ยงโดยการ ใช้ class ในการกำหนด style เสียดีกว่า...
แต่ที่มีทั้ง id และ class ก็เนื่องจากว่า
กรุงเทพ เชียงใหม่ นครฯ มีที่ตั้งที่แน่นอน และที่ตั้งไม่ซ้ำกันอยู่แล้ว จึงกำหนดสไตล์ ในเรื่องของที่ตั้งไว้กับ id
ส่วน เมือง และ บ้านนอก ก็ต่างกันที่ มีความมั่งคั่ง และความล้าหลัง มีหลายจังหวัดที่ดูเป็นเมือง และหลายจังหวัดที่ดูเป็นบ้านนอก เราจึงกำหนดสไตล์ในเรื่องประมาณนี้ไว้กับ class
ส่วน ประเทศและจังหวัด ก็มีความต่างกัน เพราะจังหวัดอยู่ในประเทศอีกทีนึง
สมมุติว่าคนประเทศไทยส่วนใหญ่ นับถือศาสนาพุทธ เราก็ตั้งสไตล์ให้กับ tag ประเทศ ว่าให้นับถือพุทธ
แต่สมมุติว่า จังหวัด นครฯ นับถืออิสลามกันหมด เราก็ มากำหนดสไตล์ให้กับ id ที่ชื่อ นครฯ ให้นับถืออิสลามต่างหาก ผลที่ได้ออกมาคือ หลายๆจังหวัดนับถือศาสนาพุทธ แต่ นครฯ นับถืออิสลาม
นอกจากนั้น ประเทศ อาจจะใส่ id ไปก็ได้ เช่น <ประเทศ id="ประเทศไทย"></ประเทศ>
-------------------------------------------------
ส่วน ตรง .s1 เราจะสามารถเปลี่ยนเป็นอะไรก็ได้ตามใจเรา เช่น .cat ก็ไม่ว่ากัน แต่เวลากำหนด class ใน แท็ก ก็ต้องกำหนดเป็น class="cat" ด้วย
------------------------------------------------
อีกเรื่องนึงคือว่า....
ดูตัวอย่างนะ
.kitty {
color: red;
font-size: 12pt;
background-color: green
}
จะเห็นว่าแม้ว่าโปรแกรมช่วยสร้างต่างๆมันจะมี ; ห้อยท้ายทุก property
แต่วิธีที่ถูกต้องจริงๆ property ตัวสุดท้าย ควรจะไม่มี ; ปิดท้าย
เพราะว่า ถ้าปิดท้าย ตามทฤษฎีระบบมันจะมองว่า จะยังมีอีก property ที่อยู่หลัง ; อันสุดท้ายอีก
ทำให้มันอ่านตัวเปล่าๆ แบบเปล่าประโยชน์ เพิ่มอีก 1 property ทำให้ มันช้าขึ้น
แต่หยวนๆหรอกน่ะ เพราะจริงๆแล้วมันต่างกับเพียงโคตรเสี้ยวๆๆๆ วินาที และเราจะแทบไม่เห็นความแตกต่างเลย
ที่โปรแกรมมันห้อยท้ายให้ ก็คงเพราะง่ายต่อการที่ให้โปรแกรมมันจัดการโค้ดนั่นเอง
-------------------------------------------------
ณ ตอนนี้คงต้องใช้จินตนาการไปก่อน เดี๋ยวจะเริ่มสอนให้ใช้งานจริงซะที
โอ๊ะ คราวนี้อธิบายรู้เรื่อง :12:
:30:
ต่อไปจะกล่าวถึงบทที่ 2 บทที่ 3 ต่อไป
โดยบทที่ 2 จะกล่าวถึงวิธีนำไปใช้
ส่วนบทที่ 3 จะรวม Property ต่างๆที่พอจะหาได้ มาลงเป็นตาราง
บทที่ 2 การนำไปใช้ร่วมกับภาษา HTML
2.2 External File
เป็นวิธีที่นิยมใช้ที่สุด และดูมีประโยชน์ที่สุด
หลักการ
- เป็นการสร้างไฟล์ .css แล้วเขียนคำสั่ง CSS ไว้ในไฟล์นี้ แล้วให้ HTML เรียกมันมาใช้อีกที
ประโยชน์
- สร้างไฟล์ CSS เพียงไฟล์เดียว ก็ใช้กับหน้าเว็บหลายๆหน้าได้
- ดังนั้นจึงทำเว็บได้เร็วกว่าฝังไว้ทุกๆหน้า
- ทำให้เว็บของเราที่มีหลายหน้า ดูเป็น สไตล์ เดียวกันหมด
- ทำให้ไม่สับสนในการแก้ไข และแก้ไขแค่ไฟล์เดียว ก็แก้ไขสไตล์ของหน้าเว็บได้ครอบคลุม
วิธีการใช้งาน
- ในเอกสารเว็บของเรา จะใส่โค้ดดังนี้ ไว้ในส่วนของแท็ก <head></head>
<link rel="stylesheet" type="text/css" href="[color=Red]Styles.css[/color]">
ตรงสีแดง เราสามารถเปลี่ยนเป็นชื่อหรือพาธที่เราต้องการ
- จากนั้นเราก็สร้าง text file ขึ้นมา อาจจะใช้ Dream หรือ notepad ก็ได้ แต่ต้องเซฟให้ไฟล์มีนามสกุลเป็น .css
2.2 Internal
เป็นการฝังไว้ในไฟล์หน้าเว็บเลย แบบนี้ มักจะเห็นฮิตกันในบริการบล็อกฟรีต่างๆ เช่น blogspot (เพราะเราสร้างไฟล์ .css ไม่ได้) และแบบนี้มักใช้เป็นแบบเริ่มต้นศึกษา
หลักการ
- เป็นการกำหนดสไตล์ของทั้งหน้า (เฉพาะหน้านั้นที่ฝังไว้)
ประโยชน์
- มันจะโหลดเร็วกว่านิ๊ดดดดดดดดดดนึง (นิดมากจนไม่เห็นความแตกต่าง)
- ใช้ในสถานการณ์ที่ไม่อาจแยกไฟล์ CSS ออกมาได้ เช่น บริการ บล็อกฟรี หลายๆเว็บ
วิธีใช้ ตัวอย่างเช่น
<head>
<style type="text/css">
b {color: red}
.takky {font-size: 12pt}
</style>
</head>
โดย ให้ style อยู่ในส่วนของ head นั่นเอง
2.3 Style in Tag
วิธีนี้คือการกำหนดเข้าไปตรงๆในแท็กนั้นๆเลย เป็นวิธีที่ย่อยที่สุด ในวิธีทั้งหมด ไม่รู้ประโยชน์ที่แท้จริงมันคืออะไร แต่ว่า เวลาเราใช้โปรแกรมช่วยทำเว็บ เช่น Dreamweaver หรือ โปรแกรมอื่นๆ ถ้าเราลากๆเมาส์ กับตัว tag กำหนดค่าไปเรื่อยๆ บางที จะมีการกำหนดโดยวิธีนี้โดยไม่ได้ตั้งใจขึ้นมา
วิธีการนำไปใช้
ดังตัวอย่าง
<font style="font-size: 10pt; color: red">ทักกี้</font>
อะไรแบบนี้ โดย style นี้ สามารถอยู่ในแท็กได้ทุกแท็ก
วิธีการใช้คงหมดแล้ว
จริงๆ ก็มีอีกวิธีคือ ใช้ java script กำหนดสไตล์เอา แต่จะไม่ขอกล่าวถึง เพราะตูเองก็ไม่เชี่ยวชาญเท่าไรนัก
ขอบคุณพี่อะจ๊ากมากเลยค่ะ
วีอยากรู้เรื่อง id selector มานานแล้ว
(+1)
(พี่แอนคะ ที่จริงนั่งงงกับโพสนั่นอยู่เกือบครึ่งชั่วโมง แล้วค่อยไปถามจานวี เพียง 3 นาทีเท่านั้น เข้าใจเลย :21:)
+1 พี่อจวว ค่ะ :22:
:08:
:42:
เสริมนิดนึงนะครับ
ในหน้าเว็บนึง เราสามารถใช้การตั้งค่า CSS ได้ทั้ง 3 แบบเลย
โดยระบบจะเลือกใช้แบบที่ 1 เป็นตัวแม่ (อยู่นอกสุด)
แบบที่สองเป็นตัวรองลงมา และแบบที่ 3 เป็นตัวในสุด
เวลามองก็ซ้อนกันจากนอกเข้ามา
เช่นจากในแฟ้ม style.css (เรียกใช้แบบที่ 1 ใส่ไปว่า <link rel="stylesheet" type="text/css" href="style.css">)
font {
font-family: Tahoma;
font-size: 20px;
color: red
}
และกำหนดใน header แบบที่ 2
<style type="text/css">
font { color: black }
</style>
แล้วมากำหนด ใน tag ตามแบบที่ 3
<font style="font-size: 15px">
จะได้คุณสมบัติสุดท้ายคือ
font-family: Tahoma; (จากตัวที่ 1 เพราะไม่มีการเปลี่ยนแปลง)
font-size: 15px; (จากตัวที่ 3)
color: black; (จากตัวที่ 2)
+1 ไอซ์ :12:
จบบทเรียนแล้วหรอคะพี่ อจวว
เพิ่งเข้ามาดู :42:
เปิดเป็นแตกสอนเล้ยยย สอนกันเยอะเหลือเกิน :42:
ยังไม่จบครับ แต่ขี้เกียจ ฮ่าๆๆๆๆๆ :30: :30: :30:
ขุด
สุดยอดโปรแกรมดูพรีวิว CSS แบบสดๆ
ที่สำคัญคือดูได้ทั้ง IE กับไฟร์ฟอกซ์ ได้ในเวลาเดียวกัน!!
แก้แล้วเห็นผลทันที ไม่ต้องเซฟอะไรเลย
(เหมือน extension EditCSS)
(http://img.f0nt.com/image/5462.jpeg)
ดาวน์โหลดที่นี่ (ฟรี)
http://www.sitevista.com/cssvista/
ขอบใจ
อ๊ะ ไอ้อี :41:
อ้างคำพูดจาก: iannnnn เมื่อ 16 มี.ค. 2006, 09:17 น.
ขอแทรกนิดนึงครับ
อยากทราบ javascript ที่ใช้ควบคุม css ในหน้าเว็บครับ
เช่นเว็บ ผจก ที่กดแล้วเปลี่ยนขนาดฟอนต์น่ะ
ในที่นี้ถ้าเราจะเอามาเปลี่ยน css ทั้งหน้า จะทำได้จะใด
ของเว็บผู้จัดการไม่แน่ใจ คำสั่ง javascript setStyle() แล้วให้มันไปเซ็ทเป็น cookie ซึ่ง cookie ตัวนี้จะไปกำหนดลิ้งไฟล์ css ที่ต้องดึงมาใช้ในหน้านั้นๆ ถ้า small ก็เปิดไฟล์ css_S.css ถ้าเป็น large ก็เปิด css_L.css
function InitStyle()
{
var strCss = getCookie("css");
if(typeof(strCss) == "undefined")
strCss = "Normal";
if(strCss == "Small")
document.write('<link rel="stylesheet" title="Small" href="/css/css_S.css" type="text/css">');
else
document.write('<link rel="stylesheet" title="Small" href="/css/css_S.css" type="text/css" disabled>');
if(strCss == "Normal")
document.write('<link rel="stylesheet" title="Normal" href="/css/css.css" type="text/css">');
else
document.write('<link rel="stylesheet" title="Normal" href="/css/css.css" type="text/css" disabled>');
if(strCss == "Large")
document.write('<link rel="stylesheet" title="Large" href="/css/css_L.css" type="text/css">');
else
document.write('<link rel="stylesheet" title="Large" href="/css/css_L.css" type="text/css" disabled>');
if(strCss == "ExtraLarge")
document.write('<link rel="stylesheet" title="ExtraLarge" href="/css/css_XL.css" type="text/css">');
else
document.write('<link rel="stylesheet" title="ExtraLarge" href="/css/css_XL.css" type="text/css" disabled>');
return true;
}
function SetStyle(strName)
{
var intCount;
for(intCount = 0;intCount < document.styleSheets.length; intCount++) {
if(document.styleSheets[intCount].title == strName)
document.styleSheets[intCount].disabled = false;
else
document.styleSheets[intCount].disabled = true;
}
setCookie("css", strName, 30, "/", null);
}ที่หน้านั้นก็เรียก
<link rel="stylesheet" title="Mocked" href="/css/css.css" type="text/css" disable>กับ
<SCRIPT LANGUAGE="JavaScript" SRC="/JavaScript/Style.js"></SCRIPT>และลืมใส่อันนี้จนได้
<SCRIPT LANGUAGE="JavaScript">
InitStyle();
</SCRIPT>ลืมคำสั่งที่ปุ่ม
<a href="Small%20Style" onclick="SetStyle('Small'); return false;" > <img name="imgSmallCss" src="http://www.manager.co.th/images/SmallCss.gif" border="0" height="23" width="13"></a>อาจจะส่งตัวแปรหลายทอดไปหน่อย :02:
แต่ถ้าจะเอาโค้ดอย่างง่ายๆ ก็
<html>
<head>
<title>Untitled</title>
<script>
function setStyle(a) {
switch (a) {
case "tt1" : {
document.getElementById('plaintext').style.fontSize="10pt";
break;
}
case "tt2" : {
document.getElementById('plaintext').style.fontSize="12pt";
break;
}
case "tt3" : {
document.getElementById('plaintext').style.fontSize="14pt";
break;
}
}
}
</script>
</head>
<body>
<input type="button" value="1" onclick="setStyle('tt1')">
<input type="button" value="2" onclick="setStyle('tt2')">
<input type="button" value="3" onclick="setStyle('tt3')">
<br><span id="plaintext">
This section contains a complete reference of all the built-in JavaScript objects, along with their methods and properties.
This section also contains an event reference and a reference of the top-level properties and functions that can be used on all of the built-in JavaScript objects.
A reference to all of the HTML DOM objects are listed in the menu to the left.</span>
</body>
</html>
โค้ดอันนี้ก็ตรงไปตรงมา
เซ็ท id ให้กับข้อความว่า plaintext
มีปุ่มสามปุ่ม ปุ่มแรกถ้ากดก็ให้ไปเรียก function จาก javascript ชื่อ setStyle (ขอยืมใช้ชื่อฟังก์ชั่นผู้จัดการละกัน) โดยให้กำหนดค่าเป็น tt1
ปุ่มที่สองก็เป็น tt2 แล้วปุ่มที่สามเป็น tt3
ตัวฟังก์ชั่น setStyle() ก็ให้รับค่าเข้ามา
function setStyle(a)ตัวแปร a คือตัวที่จะรับค่าเข้ามาในฟังก์ชั่น
จากนั้้นในฟังก์ชั่นก็ให้ตรวจสอบตัวแปร a ด้วย switch
ถ้าเป็น tt1 ให้เปลี่ยนขนาดฟอนต์ของ id plaintext เป็น 10pt
document.getElementById('plaintext').style.fontSize="10pt";
(+2) :25:
ถ้ายังงี้มันก็น่าจะบันทึกค่าการปรับขนาดตัวอักษรไว้ใช่ไหมครับ
ว่าเราปรับเป็นเล็กหรือใหญ่มาก่อน
แต่ทำไมเข้า ผจก ทีไรตัวเล็กจิ๋วหลิวเหมือนเดิมทุกที
โปรแกรมเมอร์เขาไม่ได้ทำเผื่อตรงนี้ไว้หรือเปล่า
เอ๊ะ หรือเขาทำมาให้ชาวไออีอย่างเดียว
ใช่จ้ะ มันน่าจะบันทึกการปรับค่า เพราะคนเขียนเว็บผู้จัดการตั้งวันหมดอายุไว้ซะ 30 วันแน่ะ
อ้างอิงsetCookie("css", strName, 30, "/", null);
แต่ไม่รู้ทำไมมันไม่ทำงานใน firefox ทั้งที่มันก็ setcookie ได้เรียบร้อย
เปิด tools > options > privacy > cookies > view cookies
แล้วหาเว็บ manager.co.th ชื่อ cookie "css" มันก็มีบันทึกแล้ว
ทำไมเปลี่ยนหน้าใหม่ไม่ยอมเรียกก็ไม่รู้
ลองกับ IE ก็ทำงานนะ
เปิดหน้าแรก กดตัวอักษรใหญ่สุด
แล้วไปเปิดหน้าสอง หน้าสาม ก็ยังคงขนาดใหญ่ได้
คิดเปลี่ยนขนาดมาให้อีกแบบ
ผูก javascript กับ css
<html>
<head>
<style>
#plaintext td.tt1 {
font-size : 10pt;
color : red;
}
#plaintext td.tt2 {
font-size : 12pt;
color : green;
}
#plaintext td.tt3 {
font-size : 14pt;
color: blue;
text-decoration : bold;
}
</style>
<script>
function setStyle(a) {
document.getElementById('plaintext').rows[0].cells[0].className=a;
}
</script>
</head>
<body>
<input type="button" value="1" onclick="setStyle('tt1')">
<input type="button" value="2" onclick="setStyle('tt2')">
<input type="button" value="3" onclick="setStyle('tt3')">
<br>
<table id="plaintext" ><tr><td>This section contains a complete reference of all the built-in JavaScript objects, along with their methods and properties.
This section also contains an event reference and a reference of the top-level properties and functions that can be used on all of the built-in JavaScript objects.
A reference to all of the HTML DOM objects are listed in the menu to the left.</td></tr></table></span>
</body>
</html>
อันนี้คือกดปุ่มแล้วให้เปลี่ยน class
ทีนี้ก็ไปปรับดูว่าถ้าเปลี่ยน class ใหม่แล้วอยากให้แสดงรูปแบบอย่างไร
แก้ไข... ลืมใส่ rows[0]
มิน่ารันบน firefox มันหา object ไม่เจอ
document.getElementById('plaintext').rows[0].cells[0].className=a;
:25: + :05:
ขอบคุณครับ
อ้างคำพูดจาก: iannnnn เมื่อ 16 มี.ค. 2006, 09:17 น.
ขอแทรกนิดนึงครับ
อยากทราบ javascript ที่ใช้ควบคุม css ในหน้าเว็บครับ
เช่นเว็บ ผจก ที่กดแล้วเปลี่ยนขนาดฟอนต์น่ะ
ในที่นี้ถ้าเราจะเอามาเปลี่ยน css ทั้งหน้า จะทำได้จะใด
http://labs.silverorange.com/archives/2004/september/csszooming
ที่มา : Digg.com (http://digg.com/programming/CSS_Text_Zooming)
(+2) เฮ้ย ประโยชน์สูงสุด!!
10 อย่าง ที่คนมักเข้าใจผิดเกี่ยวกับการใช้โค้ด CSS
http://www.designdetector.com/link/to/ten-common-css-mistakes/
ที่มา http://digg.com/programming/Ten_Common_CSS_Mistakes
เว็บไซต์ CSS ที่รวมทุกด้าน มีตัวอย่างประกอบ แกะโค้ดศึกษากันเอาเอง
http://www.cssplay.co.uk
digg อีกรอบ คนแถวนั้นชอบ css
http://digg.com/programming/CSSPlay.co.uk_|_tons_of_cascading_style_sheet_ideas
อันสุดท้ายกดไม่ไปครับ ลิงก์ผิด
ขอโทษครับ
อ้าว แค่นั้นเองเรอะ ตูคิดว่าสะกดผิดอะไรงี้ :08:
//แก้ไข
อ๋อ เว็บนี้ตูเข้าบ่อย ลอกบ่อยด้วย :35:
http://www.cssplay.co.uk/menus/flyout_horizontal.html
อันนี้ช่วยอธิบายเรื่องเมนูโปร่งแสงได้ดีมากๆ เลย
(ถ้าใช้ ie ก็ใช้เป็นความโปร่ง ส่วนสำหรับ ฟฟ หรือ อปร ก็ใช้ alpha ของ .png เอา :12:)
อ้างคำพูดจาก: X11 เมื่อ 25 พ.ค. 2006, 22:28 น.
คิดเปลี่ยนขนาดมาให้อีกแบบ
ผูก javascript กับ css
อ้างอิง<html>
<head>
<style>
#plaintext td.tt1 {
font-size : 10pt;
color : red;
}
#plaintext td.tt2 {
font-size : 12pt;
color : green;
}
#plaintext td.tt3 {
font-size : 14pt;
color: blue;
text-decoration : bold;
}
</style>
<script>
function setStyle(a) {
document.getElementById('plaintext').rows[0].cells[0].className=a;
}
</script>
</head>
<body>
<input type="button" value="1" onclick="setStyle('tt1')">
<input type="button" value="2" onclick="setStyle('tt2')">
<input type="button" value="3" onclick="setStyle('tt3')">
<table id="plaintext" ><tr><td>This section contains a complete reference of all the built-in JavaScript objects, along with their methods and properties.
This section also contains an event reference and a reference of the top-level properties and functions that can be used on all of the built-in JavaScript objects.
A reference to all of the HTML DOM objects are listed in the menu to the left.</td></tr></table></span>
</body>
</html>
อันนี้คือกดปุ่มแล้วให้เปลี่ยน class
ทีนี้ก็ไปปรับดูว่าถ้าเปลี่ยน class ใหม่แล้วอยากให้แสดงรูปแบบอย่างไร
document.getElementById('plaintext').rows[0].cells[0].className=a;
อันนี้ประยุกต์ใช้เป็น javascript - random background ตอนโหลดหน้าเลยได้บ่ครับ
ในเมื่ออันนี้คือ bg ปกติที่ใส่ไว้ด้วย css
body {
background-image: url(images/bg1.jpg);
}
เมื่อเร็วๆนี้ตูไปแกะโค้ดเปลี่ยน background มาจาก
http://www.colorschemer.com/
ได้ผลเป็นที่น่าพอใจอย่างยิ่ง
ได้นะ เท่าที่ลองดู
<html>
<head>
<style>
body.test1 {
background-image : url('bg1.jpg');
}
body.test2 {
background-image : url('bg2.png');
}
</style>
<script>
function switchBg() {
num=Math.floor(Math.random()*2+1);
document.body.className="test"+num;
}
</script>
</head>
<body onload="switchBg();">
</body>
</html>
ตอนแรกคิดว่าถ้าเปลี่ยนเฉพาะ background image อย่างเดียว
จะเก็บเป็น array ของ javascript เฉยๆ ไม่ต้องผูกกับ css ก็ได้เหมือนกัน
<html>
<head>
<script>
var bgx=new Array();
bgx[0]="bg1.jpg";
bgx[1]="bg2.png";
function switchBg() {
num=Math.floor(Math.random()*2);
document.body.background=bgx[num];
}
</script>
</head>
<body onload="switchBg();">
</body>
</html>
เอ่อ...
เดี๋ยวค่อยมาอธิบายโค้ดนะ :42:
พี่หน่อยจบโบราณไม่ใช่เหรอครับ
:09:
โบราณเอกประวัติศาสตร์คอมพ์ :02:
อธิบายโค้ด... 1
<html>
<head>
<style>
body.test1 {
background-image : url('bg1.jpg');
}
body.test2 {
background-image : url('bg2.png');
}
</style>
<script>
function switchBg() {
num=Math.floor(Math.random()*2+1);
document.body.className="test"+num;
}
</script>
</head>
<body onload="switchBg();">
</body>
</html>
ไม่มีอะไรมาก...
css สร้าง class ของ body ไว้ 2 ชุดชื่อ test1 กับ test2
ที่ให้ลงท้ายด้วย 1 กับ 2 เพราะจะได้ random ตัวเลขตัวท้าย จะสร้าง class กี่ตัวก็ให้มันเรียงไปละกัน
จากนั้นก็สร้าง function ชื่อ switchBg ใน javascript
บรรทัดแรก
num=Math.floor(Math.random()*2+1);
ก็คือให้มัน random ตัวเลขระหว่าง 0-1 (ไม่เกินสองว่างั้นเถอะ) >> Math.random() *2
แต่เนื่องจาก javascript มัน random ออกมาเป็นทศนิยมเพียบ ก็เลยต้องให้ปัดเศษเป็นเลขจำนวนเต็ม คือใส่ Math.floor ครอบอีกชั้น
เนื่องจากชื่อของ class มี test1 กับ 2 แต่ค่าที่ random ได้จะเป็น 0, 1 ก็เลยให้มัน +1 ทุกครั้งที่ random ออกมา ก็จะได้ 1 หรือ 2
ตรงนี้ถ้าใส่ class เพิ่ม ก็มาเพิ่มตรงตัวคูณของ random ได้
มี 5 ตัว ก็ใส่ Math.random()*5
บรรทัดต่อมา
document.body.className="test"+num;
ก็เป็นการเอาค่าที่ random มากำหนด class ของ body
document.body.className ก็คือกำหนด className ที่ต้องการใช้ให้กับ tag <body>
class คือเอาชื่อ test มาบวกกับค่า random 1 หรือ 2
เวลาใช้งาน ก็คือสั่งที่ <body>
สั่งตอนไหน ก็ onload ตอนที่กำลังโหลดเพจนั้น
ทำอะไร onload="switchBg()" ให้เรียกฟังก์ชั่น switchBg()
(+3) ขอบคุณครับ :12:
ที่ต้องการให้เป็น css เพราะพอดีผมลองทำเว็บนึงที่พยายามพึ่งการใช้ css มากกว่า html น่ะครับ
การกำหนดสไตล์ต่างๆ ก็เลยพยายามพึ่งมันแทน
สคริปต์ 2
<html>
<head>
<script>
var bgx=new Array();
bgx[0]="bg1.jpg";
bgx[1]="bg2.png";
function switchBg() {
num=Math.floor(Math.random()*2);
document.body.background=bgx[num];
}
</script>
</head>
<body onload="switchBg();">
</body>
</html>
อันนี้คือทำทุกอย่างใน javascript เลย
สร้างตัวแปรเป็น Array เก็บชื่อ background image
var bgx=new Array();
bgx[0]="bg1.jpg";
bgx[1]="bg2.png";
ถ้าจะเพิ่ม ก็เพิ่มตัวแปร แล้วบวกตัวเลข index ของ array ไป
เช่น
bgx[2]="test.jpg";
bgx[3]="test2.jpg";
คำสั่ง random เหมือนกับอันก่อนนะ
num=Math.floor(Math.random()*2);
ส่วนอันนี้
document.body.background=bgx[num];
คือสั่ง background ของ body ตรงๆ เลย >> document.body.background
โดยให้ใช้ค่าจาก array ตาม index no ที่ random มา
ถ้า random ได้ 0 ก็จะได้ bgx[0] ไปเรียกไฟล์ bg1.jpg ราวๆ นี้
ปกติก็ไม่ค่อยได้สั่ง html เหมือนกัน
แต่ถ้าต้องการจะควบคุม template ของทั้งเว็บ จะตัดเป็นไฟล์ header.html กับ footer.html แล้วใช้คำสั่ง include ของ php เรียกเข้ามา
เวลาต้องการเปลี่ยน theme ใหม่ก็ตัด header กับบ footer ตัวใหม่มาแทนที่ ราวๆ นี้
ไฟล์ header.html
<html>
<head>
<title>Nattanan</title>
<link type="text/css" href="main.css">
</head>
<body bgcolor="#F49AC1">
<table width="770" height="550" align="center"><tr><td valign="middle">
<table align="center" width="720" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center"><img src="images/logo.gif" width="82" height="70" alt="" border="0"></td>
</tr>
<tr>
<td bgcolor="#ffffff" >
file footer.html
</td>
</tr>
<tr>
<td bgcolor="#F3BCD4">
<!-- Menu of the site-->
<table align="center" width="690" border="0">
<tr>
<td align="center"><a href="index.php"><img src="images/but_index.gif" width="37" height="20" alt="" border="0"></a></td>
<td align="center"><a href="product.php"><img src="images/but_product.gif" width="51" height="20" alt="" border="0"></a></td>
<td align="center"><a href="#"><img src="images/but_store.gif" width="38" height="20" alt="" border="0"></a></td>
<td align="center"><a href="#"><img src="images/but_contact.gif" width="50" height="20" alt="" border="0"></a></td>
</tr>
</table>
</td>
</tr>
<!-- Footer-->
</table>
</td></tr></table>
</body>
</html>
เสร็จแล้วก็เรียกใช้
<?
include("header.html");
?>
type body of the web page here........
<?
include("footer.html");
?>
อู๊ย ชัดครับ เอกประวัติศาสตร์คอม :42:
บางสิ่งที่เคยรู้ แต่เพิ่งเอามาบอก
1.ใช้<style type="text/css" media="all">@import "xxxxx.css";</style>
ยังดีกว่า<link rel="stylesheet" type="text/css" href="xxxxx.css" /> เสียอีก
เพราะอะไร? เพราะว่าถ้าเราใช้ อทช.ของ firefox ที่เอาไว้ดู css สดๆ มันจะไม่โชว์ภาพ background น่ะสิ
(อีกอย่างคือ code <link rel=".... /> มันยาวกว่าด้วย เกะกะ)
2. ถ้าอยากจะทำเว็บแล้วให้พื้นหลังมีเงา ลองโค้ดนี้
background-image: url(รูปภาพที่มีเงาขนาบซ้าย-ขวาตรงกลางไม่มีสี.jpg) center top repeat-x;
แปล
center = ให้ bg อยู่ตรงกลาง
top = ให้ bg อยู่ข้างบนด้วย
repeat = ไม่ให้ background มันฉายภาพซ้ำๆ
-x; แกน x (แนวตั้งนั่นเอง)
เอ๊ะ อ่านอันที่ 2 แล้วไม่เข้าใจ
นั่นหมายถึงใช้ที่รูปหรือว่าหน้าเว็บ?
ถ้าใช้ที่รูปนี่ รูปที่เอามาสวมมันต้องพอดีกันหรือเปล่า
แล้วถ้าพอดีกัน มันจะต้อง repeat ด้วยเหรอ
โอเคเอาเว็บนี้ไปดู
http://www.highfield.berks.sch.uk/events_diary.php
:08:
อ้อ ก็ wordpress ใช่มะ :22:
อะ แถมให้อีก 1 เรื่อง
การทำอักษรขึ้นต้น โดยใช้ภาพแทน
ดูตัวอย่าง http://www.stopdesign.com/articles/replace_text/ex_dropcap.html
วิธีทำ http://www.stopdesign.com/articles/replace_text/
ทำไมตูต้องกรี๊ดเรื่อยๆ วะ :39:
เจอเว็บโคตรสุดยอดมาครับ
มันคือเว็บที่ให้บริการฟรี สำหรับตรวจ-แก้ไขโค้ดทั้ง HTML, XHTML และที่ขาดไม่ได้คือ CSS
อย่างเช่น โค้ดสีทำไมต้องใช้ #aaaaaa แทนที่จะเป็นแค่ #aaa ก็พอแล้ว
หรือไม่ทำไมต้อง padding: 5px จะเว้นวรรคทำไม ในเมื่อ padding:5px ก็ได้
ทุกอย่างจะถูกแก้ให้โดยอัตโนมัติ แล้วจะจัดเรียงโค้ดใหม่ให้เป็นระเบียบสวยงาม
เรียงตามตัวอักษร A-Z ง่ายต่อการแก้ไขในภายภาคหน้า
ที่นี่ครับ
http://codemelt.com
อนึ่ง : โค้ดที่ถูกแก้ไขแล้ว ขนาดไฟล์อาจจะลดลงอย่างไม่น่าเชื่อ
อสอง : บอร์ดนี้มีโค้ดผิดพลาดนับร้อยจุด
อ้าวเหรอ
ตูเคยเอาลิงก์มาแปะเรื่อง 10 หรือ 19 เทคนิคเขียน css ให้หล่อ
เขาบอกเวลาเขียนโค้ดสี ให้ใช้แค่ 3 ตัวก็ได้
นี่มันเรื่องของความเคร่งครัดอีกแล้วเหรอ :09:
อ่อ.. ศูนย์บริการลดน้ำหนักส่วนเกิน (ของโค้ด) เหรอ :43:
ไม่รู้สิ ไม่เคร่งครัดกับเว้นวรรคและขึ้นบรรทัดใหม่ (บ่อยๆ)
เพราะจะเน้นวางโค้ดให้ตัวเราอ่านง่ายที่สุด และเน้นบรรทัดสำคัญๆ เอาไว้ด้วย remark
เพื่อที่เวลากลับมาไล่แก้โค้ดจะได้หาเจอง่ายๆ กวาดสายตารอบเดียวเจอ
อาจจะเป็นคนละแนวกับกลุ่มประหยัดโค้ด
แต่ถ้าใช้ Dreamweaver เขียนเว็บและสร้าง behavior ต่างๆ ในหน้าเว็บ (เพิ่มโค้ด javascript ให้อัตโนมัติ)
ก็ไม่ต้องห่วงเรื่องโค้ดส่วนเกิน เกินเพียบเลยล่ะนั่น
หลายๆ behavior ตัวคำสั่งจริงๆ บางทีมีีแค่บรรทัดเดียวเอง
ตูก็ว่าทำให้คอมรู้เรื่องแต่คนแก้งงนี่ ไม่ไหวเหมือนกันนะ
(แต่ก็ดีแล้ว มีสถานที่ผูกไวยากรณ์ให้)
แต่ก่อนพยายามเว้นวรรคให้แก้ง่ายเข้าใจง่าย
แต่เดี๋ยวนี้ขี้เกียจ เลยเหลือแต่ Selector ละบรรทัดเดียว
ยกเว้นอะไรที่ต้องเขียนยุ่งๆ
:08:
เรียน CSS ในแผ่นเดียว
http://www.ilovejackdaniels.com/css_cheat_sheet.png
stylesheet hacks
http://centricle.com/ref/css/filters/
CSS เป็นอะไรที่เข้าใจยาก :08:
http://codemelt.com/
เดี้ยงไปแล้วหรือครับ เข้าไม่ได้ :41:
มีเว็บคล้ายๆกันพอแก้ขัดไหมครับ
กะลังเรียน CSS (จากที่นี่แหล่ะ) เขียนไปเขียนมา :08: เละใช้ได้ อยากจัดให้สวยงามสมวัย :40:
เข้าไม่ได้เหมือนกันครับ :31:
(ไม่เคยเข้าตะหาก)
มีคำถามและขอคำแนะนำครับ มือใหม่ๆๆ
ตามรูปครับ เราจะทำเยี่ยงไรได้บ้าง ลองแล้วหาทางวางไอ้ div3 ไม่ได้
จะจัดรูปแบบนี้โดยไม่ใช้ตารางครับ
วิธีอย่างในรูปนี่โอเคไหมครับ หรือมันผิดหลักการ แนะนำด้วยครับ :46:
(http://img2.f0nt.com/08/376417cd71540d8b231ba41c7e430158.jpg)
ถ้า DIV1 กับ DIV2 มีเนื้อหาข้างในที่กว้างลงมา DIV3 จะอยู่เฉยๆ หรือยืดตามลงมาด้วยครับ :09:
คือ ผมยังหาทางวาง div3 ตรงนั้นไม่ได้เลยครับ :41:
มันพยายามขึ้นบรรทัดใหม่อย่างเดียว :05:
จริงๆ div1 div2 เนี้อหาสั้นๆครับ ไม่เกินนั้นแน่นอน
ใส่ float:right ใน div3 ครับ
หรือถ้าจะเอาชัวร์ก็ให้ div1+div2 เป็น float:left ด้วยเลย
แล้วกำหนดความกว้างของมันเป็นเท่าไหร่ก็ว่าไป
(ถ้าบวกกันแล้วเกินความกว้างของตัวห่อ มันจะล้นนะ)
:46: ขอบคุณครับ ทำได้แล้ว :25:
ถามเพิ่ม กรณีจะห่อ คล้ายๆเอา table มาครอบ ต้องใช้ warpper สถานเดียวเลยใช่รึปล่าวครับ
คือไม่อยากเอา table มาจัดหน้าแล้วล่ะ ไปอ่านมาหลายๆที่
รู้สึกเขาบอกประมาณว่ามันผิดประโยชน์ใช้สอย มีผลกับ SEO ด้วย
ตอนนี้เว็บที่ทำอยู่ระยะหลังๆ ก็เลิกใช้ Table โดยสมบูรณ์แล้วครับ
(ไม่รวมเว็บนี้นะ :48:)
แต่ถ้าข้อมูลไหนที่ต้องการแสดงผลเป็นตาราง การใช้ Table ก็ไม่ผิดนะครับ
แต่อย่าลืมว่า css มันเกิดมาเพื่อแยกเนื้อหาออกจากดีไซน์
ดังนั้นถ้าเลี่ยงได้ก็เลี่ยงโลด
ส่วนกรณีจะห่อ ก็ใช้อะไรสักอย่างเช่น div ขนาดใหญ่มาครอบไว้
แต่ผมมักตั้งชื่อว่า wrapper (หรือ wrap) ตามเว็บอะไรไม่รู้ที่อ่านมา
จะได้เข้าใจง่ายๆ ครับ ว่ามันแปลว่าห่อ
div นี่สามารถล็อคตำแหน่ง แบบ fixed กับหน้าจอได้ไหมครับ
ประมาณว่า
ไม่ว่าจะ เลื่อนขึ้นหรือลง ไอ้ div อันนี้มันก็อยู่ หน้าจอเหมือนเดิม สมมุติด้านซ้าย
คล้าย javascript เลื่อนเมนูน่ะครับ แต่ใช้ java มันรอปล่อยปุ่ม มันถึงเลื่อนลงมา
http://www.listulike.com/generator/
ทำ้(ลอก)ได้แล้วครับ
รบกวนถามหน่อยครับ :05:
http://sikamon.com/contact.php (http://sikamon.com/contact.php)
(http://img2.f0nt.com/04/731e8fc7d9815e26453ba3c52b5693ba.jpg)
คือว่า ทำไมปุ่ม reset มันถึงเหลื่อมกันอย่างงั้นอะครับ
- จะไปใส่แท็กซ้อนแท็กซ้อนแท็กซ้อนๆๆๆ แท็กทำไมละก๊าบ เอาออกให้เมิ้ด
- ถ้า div มันทำให้ซ้อนกันยังงี้ เปลี่ยน div เป็น span สิครับ มันจะวิ่งในบรรทัดเดียวกัน
- แต่ถ้าให้เสนอ ก็ไม่ต้องใส่ปุ่ม Reset หรอกครับ เข้าใจว่าโลกนี้ไม่เคยมีใครกด Reset เลยนะ
ที่ใส่ซ้อนๆ กันไว้ก็คงเมื่อเอาไว้ทำขอบมนๆ แหละครับ
เมื่อก่อนผมทำเว็บ จะทำขอบมนที ใส่ div ซ้อนกัน 12 ตัวหล่ะครับ
แต่ถ้าหากใช้ span เท่าที่ผมรู้จะทำให้กำหนดความยาว
ไม่ได้ทำให้รูปบางส่วนหายได้ครับถ้าตัวอักษรเล็กเกินไปครับ
ไม่แน่ใจว่าแก้ได้โดยใช้ line-height รึเปล่าครับ ช่วยตอบทีครับ
แต่ถ้าเป็นผมนะครับ......
จะใช้ input type="submit" แล้วกำหนดขนาดของปุ่มให้ตายตัว
แล้วค่อยตั้ง background ของเจ้า input ตัวนั้นให้เป็นรูปปุ่มแหละครับ วิธีนี้ผมว่าชัวร์ดี
:44:
อ้างคำพูดจาก: dttvb เมื่อ 04 พ.ย. 2007, 21:18 น.
ที่ใส่ซ้อนๆ กันไว้ก็คงเมื่อเอาไว้ทำขอบมนๆ แหละครับ
เมื่อก่อนผมทำเว็บ จะทำขอบมนที ใส่ div ซ้อนกัน 12 ตัวหล่ะครับ
ใช่แล้วครับ
คือว่าตัว form นี้ผมเอามาจาก ที่นี่ (http://www.smashingmagazine.com/2006/11/11/css-based-forms-modern-solutions/) น่ะครับ จริงๆแล้วไม่ค่อยจะรู้เรื่องเท่าไหร่ ก็มั่วๆเดาๆเอาไปเรื่อย ถ้าแก้ได้ยังไงแล้วจะมารายงานนะครับ :08:
ขอบคุณครับ
ขอเป๋นิดนึง ปกติทำขอบมนๆ ด้วย div กับ css นี่มันต้องทำยังไงเหรอครับ :37:
http://del.icio.us/iannnnn/corner
แฮ่ :02:
อุ๊ย :25:
bookmark เว็บไว้แล้วฮะ
:02:
หมดการสอนแล้วเหรอครับ มาอ่านแล้วได้ความรู้มากเลยครับ
อ่านต่อได้ใน css เด็ดๆ จ้ะ
บนหิ้งคอมนี่แหละ
อ้างคำพูดจาก: iannnnn เมื่อ 25 มิ.ย. 2009, 21:33 น.
อ่านต่อได้ใน css เด็ดๆ จ้ะ
บนหิ้งคอมนี่แหละ
ครับผม ขอบพระคุณมากครับ :12:
แล้วพวก display ต่าง ๆ มันแสดงผลต่างกันอย่างไรเหรอครับ
ยังแบบงง ๆ อยู่ว่ามันต่างกันอย่างไร
ดูในนี้ก็ได้
CSS display property (http://www.w3schools.com/css/pr_class_display.asp)
ที่เห็นใช้กันบ่อยๆ คือ
display: inline; แสดงเป็นบรรทัดเหมือนใส่อีโม :27: ลงในบรรทัดข้อความแบบนี้แหละ
display: block; แสดงเป็น Block เป็นกล่องๆ แยกออกมาจากบรรทัด ถ้าไม่มีการใช้ร่วมกะคุณสมบัติอื่นๆ ก็จะตัดเป็นบรรทัดใหม่
display: none; ซ่อนไปเลย
รบกวนสอบถามหน่อยครับ คือว่า ไอ้ อิลิเมนท์ (element) นี่คือ ไรเหรอครับใน CSS อะครับ พอดีได้ตามอ่านตามในกระทู้นี้แล้วไม่เข้าใจครับ ขอบพระคุณมากครับ
แล้วไอ้ CSS เนี่ย มันสามารถแบบว่า ประมาณว่า เมื่อเราเอา mouse ไป hover ที่ลิงค์แล้ว แล้วให้ลิงค์ที่ hover มีเสียง นี่ทำได้หรือไม่ครับ ขอบพระคุณมากครับ
ไอ้แบบนี้นี่ CSS รึเปล่าครับ :09:
http://abduzeedo.com/super-easy-neon-style-photoshop (http://abduzeedo.com/super-easy-neon-style-photoshop)
มันโฟโต้ชอปธรรมดานี่ครับ :40:
เปล่าๆ หมายถึงตัวเว็บอะ
ที่มัน fade
ตรงรูปใช่ไหม?
มันใช่ jQuery เฟดเอาน่ะ :22:
อ่อ :46:
ขุด(และเบิล) :46:
(http://img3.f0nt.com/30/bafa835ad1233bbd32cf615213626758.png)
อะคือนัดมี ซิลเวอร์ไลท์อยู่ก้อนนึง
แล้วทำ เมนูเป็น html ขึ้นมา(ใช้ jQuery เรียก)
เสร็จปุ๊บ ทำแล้วก้อน ซิลเวอร์ไลท์มันเลือน(ภาพ 2)
ก็เลยสั่งเป็น position:absolute;
ทีนี้ก้อน ซิลเวอร์ไลท์ก็ไม่เลื่อนแล้ว
แต่ เมนูดันไปโผล่ข้างหลัง
เลยใช้ z index เตะ ก้อน ซิลเวอร์ไลท์ ไปข้างหลัง
เมนูกลับมา อยู่ข้างหน้าแล้ว
แต่ ซิลเวอร์ไลท์กดไม่ได้ครับ เหมือนมีอะไรบังอยู่
ทำยังไงดีอะ :46:
:05: อ่านแล้วยังไม่เข้าใจ
ไหนคือเมนู :3005:
ที่เขียนว่า html น่ะครับคือเมนู :05a:
อธิบายง่ายกว่าเดิม(รึเปล่า)
คือนัดมี silverlight ก้อนนึง กับ div อีกก้อนนึง
แล้วนัดอยากให้ div มาโผล่ข้างหน้า silverlight(ทีแรกมันหลบอยู่ข้างหลัง)
เลยสั่งให้ silverlight เนี่ย z index เป็น -1
มันเลยทำให้คลิกไม่โดน silverlight
ปล.แก้ได้แล้วเมื่อเย็น
ไปแก้ z index ของ div นั้นแทน ให้เป็น 2 ขั้นไปอะไรก็ได้ ส่วน silverlight ก้อนนั้นไม่ต้องกำหนด(มาตรฐานมันน่าจะ 1)
:46:
ไม่รู้เหมือนกัน ว่า silverlight มันสั่ง transparent ได้เหมือน flash อะไรหรือเปล่าอะ
ถ้าลองเอา code มาให้ดูประกอบด้วยก็ได้นะ
โค้ดเยอะและงงมากครับ :30:
ใช้ js สร้าง ส่วน html ขึ้นมาเกือบหมดเลย
เลยเอามาเล่าคร่าวๆ เอา :47b:
ขุดมาถาม :47b:
http://nuttyi.tumblr.com/post/1081721057/hers (http://nuttyi.tumblr.com/post/1081721057/hers)
บล็อกผม หัวข้อมันพิมพ์ภาษาไทยไม่ได้อะครับ(ถ้าใช้ภาษาไทยจะหายไปเลย)
ตรงคำว่า Hers นั่นแหละ
ทีนี้จะแก้ก็ไม่รู้จะต้องแก้ตรงไหน
ดูไม่ออกด้วยว่ามันคือฟอนต์อะไร(จะได้หาชื่อฟอนต์แล้วไปแก้ตรงนั้นเลย)
เท่าที่อ่านดูมันก็น่าจะรับภาษาไทยนะ :05:
ขอบคุณครับ :46:
ตามไปดูแล้วมันใช้
http://www.select2web.com/jquery/font-on-web-by-cufon.html (http://www.select2web.com/jquery/font-on-web-by-cufon.html)
<canvas style="width: 100px; height: 33px; top: 3px; left: -1px;" height="33" width="100"></canvas><cufontext>Hers</cufontext>
มันใช้ cufon สร้างตัวอักษรขึ้นมาแทนใน tag h2
ซึ่งชุดตัวอักษรที่ใช้มันอาจจะไม่มีชุดภาษาไทยก็ได้ (ในโค้ดใช้ฟอนต์ rockwell)
ลองเอาอะไรที่มันเกี่ยวกับ cufon ออก น่าจะหายนะ :22:
ขอบคุณครับ เดี๋ยวลองก่อน :46:
กลับมาถามอีกแล้ว :47b:
ที่เว็บ reg มันเป็นตัวปัญหากับ non-ie
มี css ตัวนี้อยู่
.levelone {
position: absolute;
}
ถ้าเอา position: absolute; จะใช้งานได้ปกติ
ทีนี้มีคำถามว่า
ถ้าอยากได้ javascript เพื่อแก้ css แบบบรรทัดเดียวทำได้มั้ยอะครับ? ยังไง?(จะได้เซฟไว้กรอกบน addressbar ตอนเข้าเว็บได้เลย)
เห็นเพื่อนเขียนไว้ ประมาณนี้
javascript : frames[1].document.styleSheets.item(0).disabled=true;
ก็แก้ได้
แต่นัดว่ามันน่าจะมีวิธีที่มาแก้ที่ตัว .levelone ได้เหมือนกันอะ
งงป่ะ :44:
งง :09:
ถ้าต้องการ disable .levelone ออก สำหรับ none-ie
ใช้ firebug แล้วกดปิด .levelone ก็น่าจะได้นะ
ใช่ๆ แค่ไปเสริชหา แล้วเอาออกก็ได้แล้ว
แต่อยากให้คนอื่นใช้ง่ายๆ อะ
ที่จริงจะเอาไปทำเป็น userscript ด้วย
ติดไว้เลย จะได้ไม่ต้องแก้ทุกรอบ
อ้อ แลวอันนี้ userscript อันเดิมที่ลงไว้กับโครม
มันทำงานบ้างไม่ทำงานบ้างแล้วแต่ดวง
เลยอยากลองเล่นกับตัว levelone ตรงๆ เผื่อมันจะดีขึ้น
// ==UserScript==
// @name reg chula
// @namespace regfix
// @include https://www.reg.chula.ac.th/*
// ==/UserScript==
window.location='javascript:frames[1].document.styleSheets.item(0).disabled=true;';
อะ
http://www.shawnolson.net/a/503/altering-css-class-attributes-with-javascript.html (http://www.shawnolson.net/a/503/altering-css-class-attributes-with-javascript.html)
javascript alter css
changecss('.levelone','position','เปลี่ยนเป็นอะไรซักอย่าง ลองหาค่า default ดู')
เขียน javascript ไม่เป็น
แต่เขียน css ไปส่งที่เว็บ userstyles.org ก็สามารถเรียกใช้ได้เหมือนกันนะเออ
เปลี่ยน absolute เป็น relative น่าจะได้นะ
ขอบคุณครับ :46:
เดี๋ยวลองงมๆ ดู
อ้อ เว็บที่ว่า
https://www.reg.chula.ac.th/cu/reg/logon/logonframe.html (https://www.reg.chula.ac.th/cu/reg/logon/logonframe.html)
มีคนเขียนมาไว้แล้วนิ :47:
จริงด้วย :47b:
กำลังจะอัพเข้าไป เจอโค๊ดนั้นแล้วก็ไม่ต้องละ :47:
อยากเห็นที่พี่เขียนอะ :46:
โค๊ดที่มีอยู่แล้วนั้นเขียนดีกว่าเยอะ :47:
ของพี่เขียนบรรทัดเดียว แต่ก๊อบโค๊ดมาซะเยอะ
เอาโค๊ดจากลิงก์นั่นแหละมาแปะ แล้วก็เพิ่มบรรทัดที่บอกตามนั้นเลย
กำลังงง ว่ากำลังจะทำอะไร
คือถ้า browser อื่นที่ไม่ใช่ IE เปิด ให้ไม่ต้องเรียก position:absolute; เหรอ หรือว่ายังไง
ใช่ครับ
:30: ขอโทษที กลับไปอ่าน เพิ่งเห็นว่าจะใช้งานใน address bar
นึกว่าจะไปแก้ไข code ของเว็บเอง โทษที ๆ
มีปัญหาสงสัยเรื่อง CSS ค่ะ ไม่ได้ใช้นานมาก จำไม่ได้เลย :05:
คือ.. อรสร้าง DIV ขึ้นมาเพื่อที่จะวางซ้อนกัน
เพื่อจะให้ได้รูปตามนี้..
(http://i90.photobucket.com/albums/k251/netuza/Muju/Works/1-2.jpg)
ปัญหาที่เกิดขึ้นกับอรคือตอนทำ Div มาซ้อนต่อๆกันมันเกิดช่องว่างน่ะค่ะ..
(คือลองทำแต่ยังไม่ได้ใส่ Background นะคะ ใช้สีเอาเน่าๆก่อน)
(http://img3.f0nt.com/14/f927d250896595d383bd07142611c922.jpg)
อันนี้คือโค้ด..
อ้างอิง<style type="text/css">
<!--
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
}
.oneColElsCtrHdr #container {
width: 1600px;
background: #069;
margin: 0 auto;
border: 1px solid #000000;
text-align: left;
}
.oneColElsCtrHdr #header {
background: #DDDDDD;
padding: 0 10px 0 20px;
}
.oneColElsCtrHdr #header h1 {
margin: 0;
padding: 10px 0;
}
.oneColElsCtrHdr #mainContent {
width:800px;
margin: 0 auto;
padding: 0 20px;
background: #9CC;
}
.oneColElsCtrHdr #footer {
padding: 0 10px;
background:#DDDDDD;
}
.oneColElsCtrHdr #footer p {
margin: 0;
padding: 10px 0;
}
-->
</style></head>
<body class="oneColElsCtrHdr">
<div id="container">
<div id="header">
<h1>Header</h1>
</div>
<div id="mainContent">
<h1> Main Content </h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p>
<h2>H2 level heading </h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
</div>
<div id="footer">
<p>Footer</p>
</div>
</div>
</body>
ความเข้าใจตอนนี้คือ div น่าจะแบ่งแบบนี้...
(http://img3.f0nt.com/14/bbd39de9e74fe75a307c2cec36aa5c37.jpg)
ใครพอทราบว่าแก้ไขยังไงรบกวนช่วยด้วยนะคะ
เพราะลองหา tutorial แล้วไม่เจอค่ะ :05:
ขอบคุณล่วงหน้านะคะ
น่าจะอันนี้นะ
http://www.f0nt.com/forum/index.php/topic,10123.msg630311.html#msg630311 (http://www.f0nt.com/forum/index.php/topic,10123.msg630311.html#msg630311)
ไหลไปหน้าสามเลย
น้องอรแค่เติมอันนี้ลงไปใน css ก็ได้แล้วจ้ะ
* { margin:0; padding:0; }
สาเหตุที่มันเป็นแบบนั้น เพราะว่าตัว h1 ใน <div id="header"> มันมีค่า margin อยู่ในตัวมันเอง
การจะเคลียร์ค่าทุกตัว ให้ใช้ *
การใช้ body ไม่ได้เป็นการเคลียร์ค่าทุกตัว ดังนั้น h1 จึงยังมีค่า margin อยู่ในตัวมันเองอยู่จ้ะ
สุดยอดเลยฮะ บิ้กไทเกอร์ :25:
:25:
ขุดหน่อยครับ
มีปัญหาตรงเมนูน่ะครับ
<ul class="menu">
<li class="menu-hl"><a href="index.php">Home</a></li>
<li><a href="login.php">Login</a></li>
<li><a href="register.php">Register</a></li>
<li><a href="gallery.php">Gallery</a></li>
</ul>
โค้ดแบบด้านบนคือ ปุ่ม Home จะถูกไฮไลต์เอาไว้ให้รู้ว่าอยู่หน้า Home
ถ้ากดไปหน้า Login ก็จะให้มันย้ายไปไฮไลต์ปุ่ม Login แทน
แต่ปัญหาคือ ผมต้อง manual code สำหรับหน้า login ใหม่เป็น
<ul class="menu">
<li><a href="index.php">Home</a></li>
<li class="menu-hl"><a href="login.php">Login</a></li>
<li><a href="register.php">Register</a></li>
<li><a href="gallery.php">Gallery</a></li>
</ul>
แบบนี้มีวิธีที่ง่ายกว่ามั้ยครับ แบบว่าให้มันรู้ตัวมันเอง ว่าตอนนี้อยู่หน้า home แล้วต้องไฮไลต์ปุ่ม Home
มันแก้ได้ด้วยวิธี CSS หรือ PHP มั้ยครับ (เช่น get url มาเทียบไรเงียะ ทำได้มั้ยครับ)
มารอบฟังด้วยคน
งานที่ส่งไปแก้ทุกหน้าเลย :30:
ลองใช้ jQuery น่าจะง่ายขึ้นมั้ยอะ
ทำไงครับ ต้องลองๆ :25:
เขียนให้มันเก็บค่าดิ
แบบแต่ละ li ก็มี id ของมัน แล้วเวลาคลิ๊กที่ li ไหน ให้เก็บค่า id ไป
แล้วพอเข้าหน้าใหม่ ก็ให้ jQuery ล้าง class ของ li ที่เป็น menu-hi ไป แล้วใส่ใหม่ไปที่ id ที่เราเก็บค่าไว้
อธิบายแบบนี้เข้าใจมั้ยอะ :16:
สงสัยๆ
ว่าเราสามารถรู้ชื่อไฟล์ php นั้นๆ ได้เลยรึเปล่าอะ(แบบเช็คจากโค้ดแล้วรู้ชื่อของตัวเอง)
ถ้าได้ก็ทำให้เช็ค if แล้ว echo ออกมาได้เลยป่ะ
อ้างคำพูดจาก: blackRabbit เมื่อ 26 ก.พ. 2011, 21:47 น.
เขียนให้มันเก็บค่าดิ
แบบแต่ละ li ก็มี id ของมัน แล้วเวลาคลิ๊กที่ li ไหน ให้เก็บค่า id ไป
แล้วพอเข้าหน้าใหม่ ก็ให้ jQuery ล้าง class ของ li ที่เป็น menu-hi ไป แล้วใส่ใหม่ไปที่ id ที่เราเก็บค่าไว้
อธิบายแบบนี้เข้าใจมั้ยอะ :16:
เข้าใจ แต่เขียน js ไม่เป็นครับ :3005:
ไงก็ขอบคุณมากครับ สงสัยต้องไปอ่าน js ก่อน
อ้างคำพูดจาก: I'm Nut เมื่อ 26 ก.พ. 2011, 22:07 น.
สงสัยๆ
ว่าเราสามารถรู้ชื่อไฟล์ php นั้นๆ ได้เลยรึเปล่าอะ(แบบเช็คจากโค้ดแล้วรู้ชื่อของตัวเอง)
ถ้าได้ก็ทำให้เช็ค if แล้ว echo ออกมาได้เลยป่ะ
สงสัยต้องทำแบบนัทว่าไปก่อน :3005:
http://www.webcheatsheet.com/PHP/get_current_page_url.php (http://www.webcheatsheet.com/PHP/get_current_page_url.php)
<ul id="mainnav" class="menu">
<li><a id="menu-1" href="index.php">Home</a></li>
<li class="menu-hl"><a id="menu-2" href="login.php">Login</a></li>
<li><a id="menu-3" href="register.php">Register</a></li>
<li><a id="menu-4" href="gallery.php">Gallery</a></li>
</ul>
jQuery(document).ready(function(){
jQuery("#mainnav li a").click(function(){
var menu-index = jQuery(this).attr("id");
jQuery(#mainnav li").removeClass("menu-hi");
if (menu-index == menu-1){
jQuery(#mainnav li:eq(1)").addClass("menu-hi");
}
if (menu-index == menu-2){
jQuery(#mainnav li:eq(2)").addClass("menu-hi");
}
if (menu-index == menu-3){
jQuery(#mainnav li:eq(3)").addClass("menu-hi");
}
if (menu-index == menu-4){
jQuery(#mainnav li:eq(4)").addClass("menu-hi");
}
});
});
น่าจะประมาณนี้หรือเปล่า
ของผมใช้วิธีนี้ครับ
<ul id="mainnav" class="menu">
<li <?php if($home==1) echo "class='active'"; ?>><a href="index.php">Home</a></li>
<li <?php if($login==1) echo "class='active'"; ?>><a href="login.php">Login</a></li>
<li <?php if($register==1) echo "class='active'"; ?>><a href="register.php">Register</a></li>
<li <?php if($gallery==1) echo "class='active'"; ?>><a href="gallery.php">Gallery</a></li>
</ul>
แล้วในหน้า index.php ก็ใส่ $home=1; ไว้บนหัวเลย
หน้า login.php ก็ใส่ $login=1; ...
:30: ของหนุ่มง่ายกว่าเยอะเลย
จริงด้วย :3005:
กรี๊ด คุยอะไรกัน :3005:
+ค่า :25:
เดี๋ยวรอเสร็จงานจะเริ่มหัดทำเว็บแบบ coding หนักๆแล้ว
ฝากตัวเป็นศิษย์ทุกคนล่วงหน้าเลยนะคะ :07:
อ้างคำพูดจาก: หนุ่ม เมื่อ 26 ก.พ. 2011, 23:44 น.
ของผมใช้วิธีนี้ครับ
<ul id="mainnav" class="menu">
<li <?php if($home==1) echo "class='active'"; ?>><a href="index.php">Home</a></li>
<li <?php if($login==1) echo "class='active'"; ?>><a href="login.php">Login</a></li>
<li <?php if($register==1) echo "class='active'"; ?>><a href="register.php">Register</a></li>
<li <?php if($gallery==1) echo "class='active'"; ?>><a href="gallery.php">Gallery</a></li>
</ul>
แล้วในหน้า index.php ก็ใส่ $home=1; ไว้บนหัวเลย
หน้า login.php ก็ใส่ $login=1; ...
PHP Notice: $xxxxx not defined <--- ระวัง error นี้นะครับ
<ul id="mainnav" class="menu">
<li <?php if(!empty($home)) echo "class='active'"; ?>><a href="index.php">Home</a></li>
<li <?php if(!empty($login)) echo "class='active'"; ?>><a href="login.php">Login</a></li>
<li <?php if(!empty($register)) echo "class='active'"; ?>><a href="register.php">Register</a></li>
<li <?php if(!empty($gallery)) echo "class='active'"; ?>><a href="gallery.php">Gallery</a></li>
</ul>
ใช้แบบนี้ดีกว่า
แล่วๆๆๆ :0705:
PHP Notice: $xxxxx not defined <--- ระวัง error นี้นะครับ
เกิดกรณีเพราะอะไรอะครับไอซ์
:25: ชีวิตง่ายขึ้นแล้ว ไล่บวก :27:
อ้างคำพูดจาก: blackRabbit เมื่อ 27 ก.พ. 2011, 01:38 น.
PHP Notice: $xxxxx not defined <--- ระวัง error นี้นะครับ
เกิดกรณีเพราะอะไรอะครับไอซ์
ไม่เคยประกาศตัวแปร แต่ดันพยายามไปอ่านค่ามัน
ปกติถ้าอยู่บน host มันจะไม่แสดง error บนหน้าเว็บ แต่จะเก็บลง error log ครับ
ขอบคุณครับ :46:
งั้นแบบนี้ถ้าประกาศทุกหน้า สำหรับทุกตัวแปรก็ไม่เป็นไรใช่มั้ย
อ้างคำพูดจาก: icez เมื่อ 27 ก.พ. 2011, 10:38 น.
ไม่เคยประกาศตัวแปร แต่ดันพยายามไปอ่านค่ามัน
ปกติถ้าอยู่บน host มันจะไม่แสดง error บนหน้าเว็บ แต่จะเก็บลง error log ครับ
แสดงว่าตอนนี้ผมทำ log รกไปเยอะแล้ว :30:
อ้างคำพูดจาก: blackRabbit เมื่อ 27 ก.พ. 2011, 11:56 น.
งั้นแบบนี้ถ้าประกาศทุกหน้า สำหรับทุกตัวแปรก็ไม่เป็นไรใช่มั้ย
ประกาศ
$page = 'index';
แล้วไป check
if ($page == 'index')
อย่างนี้ไม่ดีกว่าเหรอครับ :30:
:30: ผมไม่รู้ครับ ถามไว้ก่อน
มีเรื่องมาปรึกษาอีกแล้วครับ :56:
คือว่า รูปมันลอยหมดเลย
(http://img3.f0nt.com/25/a29a1dba8afa64bc73f59b47a260af5d.png)
ที่อยากได้คือ ให้พื้นสีขาว มันคลุมลงมาที่รูปด้วย
อันนี้เป็นโค้ดคร่าวๆครับ
(เฉพาะตรง area ขาวๆ ที่มีคำว่า Test Test Test อยู่น่ะครับ)
<div class="content">
<div class="photoframe">
<span></span>
<img src="1.jpg" />
</div>
<div class="photoframe">
<span></span>
<img src="2.jpg" />
</div>
<div class="photoframe">
<span></span>
<img src="2.jpg" />
</div>
</div>
อันนี้เป็น css ของคลาส content กับ photoframe ครับ
.content {
width:900px;
height:auto;
padding:10px;
background-color:#FFF;
margin-left:auto;
margin-right:auto;
margin-top:10px;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
-webkit-box-shadow:0px 1px 2px #333;
-moz-box-shadow:0px 1px 2px #333;
box-shadow:0px 1px 2px #333;
}
.photoframe {
margin: 30px;
position: relative;
width: 180px;
height: 130px;
float: left;
}
.photoframe a {
text-decoration: none;
}
.photoframe img {
background: #fff;
border: solid 1px #ccc;
padding: 4px;
}
.photoframe span {
width: 20px;
height: 18px;
display: block;
position: absolute;
top: 12px;
left: 12px;
}
คลาส content ผมคงกำหนดความสูงให้ไม่ได้ เพราะใช้หลายหน้า
แก้ไขยังไงได้บ้างครับ
ป.ล. ผมไม่ได้ทำ css เอง มันมากับเทมเพลต เขียน css ไม่เป็นด้วย พออ่าน+เดาได้ :3005:
ถ้าจะให้ดีต้องรอจานบิ๊กมาตอบ :25:
แล้วก็จะถามเรื่องการ clearfix ที่คุยกะพี่เม่นด้วย
ที่ว่าเป็นวิธีใหม่อะไรนั่นน่ะ ทำไงเหรอ :25:
<div class="content">
<div class="photoframe">
<span></span>
<img src="1.jpg" />
</div>
<div class="photoframe">
<span></span>
<img src="2.jpg" />
</div>
<div class="photoframe">
<span></span>
<img src="2.jpg" />
</div>
<div style="clear:both;"></div>
</div>
ขอบคุณครับ
เพิ่มไปบรรทัดเดียว ทุกอย่างเพอร์เฟคทันที :25:
เพิ่ม overflow : hidden ใน .content ก็ได้
อันนี้น่าจะเป็นวิธีที่ใหม่ล่ะแอน
รอจานบิ๊กมาอธิบาย :25:
เปล่า มันไม่ใช่วิธีใหม่อะไร
ก็ให้ใส่ overflow:hidden; ใน class="content" นั่นละ
แต่มันต้องพิจารณาด้วยว่า ในบางครั้งใช้ overflow:hidden; แล้วเกิดเราอยากใช้พวก dropdown ซึ่งมันจะเกินพื้นที่เรากำหนด
มันก็จะกลายเป็นว่า เราจะไม่เห็นตัว dropdown ตัวนั้น เพราะโดน overflow:hidden; ไป
ดังนั้นถ้าเป็นกรณีแบบนี้ ก็แนะนำให้ใช้ clearfix เอาครับ
อ้าว ก็คิดว่ามีอะไร เห็นท่าทางคุยกันลึกลับ :05:
ถ้างี้ตูใช้ hidden อยู่แล้วเพราะไม่ชอบให้มีก้อนอะไรที่เราไม่ได้อยากให้มีใน HTML งอกมาเกินๆ น่ะ
ไม่มีอะไรลึกลับ แต่แค่ยังมีบางคนไม่รู้ว่า overflow:hidden สามารถแก้ปัญหานี้ได้อย่างง่าย ๆ
ไม่ใช่แค่ overflow:hidden; นะ ใช้ overflow:auto; ก็ได้เหมือนกัน
ถามครับ
ถ้าไม่ใช้ php จะโปรแกรมมิ่งแบบดูง่ายๆ ลงใน html ยังไงได้มั่งอะครับ
เช่นอยากสร้าง div หน้าตาเหมือนๆ กันซัก 100 อัน
ทำยังไงให้สร้างอะไรประมาณนี้ได้
for(int i=0;i<100;i++) <img src="Math.floor(Math.random()).gif">
อันนี้สมมติน่ะครับ
jQuery รึเปล่า :09:
:46:
จะเอาไปใช้ทำอะไรอะ จะได้หามาอธิบายถูกอะ
ก็ทำแบบที่ว่าล่ะครับ แต่ทำเป็น bg เป็น grid ที่แรนดอมสี (นึกถึงแนวๆ ดิสโก้)
หรือแบบ อยากแรนดอมรูปขึ้นมาโชว์หน้าแรกซัก 10 รูป อะไรแบบนี้
ลองดูถ้าใช้ javascript ธรรมดามันจะ random ให้แค่ div แรก
<script type="text/javascript">
function rcolor(){
document.getElementById("rcolor").style.backgroundColor = "#" Math.floor(Math.random()*16777215).toString(16);
}
</script>
<div id="rcolor" style="height:10%; width:10%; position:relative; top:0%; float:left;"></div>
<div id="rcolor" style="height:10%; width:10%; position:relative; top:0%; float:left;"></div>
ลองใช้ jQuery คำสั่ง .css({background:XXX}); อะไรแบบนี้อะ แล้วก็ไปเขียน script random background เอา
ส่วนจะสร้าง div ตัวเดียวกันกี่ตัวลอง loop ตัวนี้มั้ยอะ
$('.create-div').append('<p>Test</p>');
สมมติว่าตอนแรกว่ามี
<div class="create-div"></div>
แล้วพอรันแล้วมันจะได้เป็น
<div class="create-div"><p>Test</p></div>
ถ้า loop มันสามรอบ เราก็ได้จะได้
<div class="create-div"><p>Test</p><p>Test</p><p>Test</p></div>
อะไรแบบนี้อะ
ตอบถูกประเด็นปะ :16:
แบบนี้พอจะได้ไหม :40:
อ้างอิง
<!DOCTYPE html>
<head>
<title>Random Color</title>
<style>
body {background:#fff;color:#000;font:9px Tahoma}
p {float:left;display:inline;height:100px;width:40px;margin:5px;text-align:center}
</style>
</head><body>
<div class="outer"></div>
<script type="text/javascript" src="js/jquery-1.6.min.js"></script>
<script>
$(document).ready(function() {
var numDiv = 120, colorBG
for (var i = 0; i < numDiv; i ) {
colorBG = Math.floor(Math.random()*16777215).toString(16);
$('.outer').append('<p style="background:#' colorBG '">' colorBG '</p>');
};
});
</script>
</body></html>
อ้อ ขอบคุณครับ :46:
น่าจะได้แล้วแหละๆ
คือทีแรกจะลองแบบไม่ใช้ jQuery ไง(กลัวว่ามันจะอืดจะช้ารึเปล่าอะไรแบบนี้)
แต่พอใช้แค่ javascript แล้วยากชะมัด :3005:
copy paste :47:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<link rel="stylesheet" href="../Desktop/webasianbox/woothemes-FlexSlider-a9168b8/flexslider.css" type="text/css">
<script src="../Desktop/webasianbox/woothemes-FlexSlider-a9168b8/jquery.flexslider-min.js"></script>
<script src="../Desktop/webasianbox/woothemes-FlexSlider-a9168b8/jquery.flexslider.js"></script>
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.navigation').navigation();
});
</script>
ส่วนใช้งานครับ
</div>
</div>
</div>
<div id="navigation">
<div class="navigation">
<ul class="slides">
<li>
<img src="../Desktop/webasianbox/img/1.png" width="600" height="auto">
</li>
<li>
<img src="../Desktop/webasianbox/img/2.png" width="600" height="auto">
</li>
<li>
<img src="../Desktop/webasianbox/img/3.png" width="600" height="auto">
</li>
<li>
<img src="../Desktop/webasianbox/img/4.png" width="600" height="auto">
</li>
<li>
<img src="../Desktop/webasianbox/img/5.png" width="600" height="auto">
</li>
</ul>
</div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
พอดีจะทำslidesภาพครับแต่ไม่รู้ผิดตรงไหนไม่ยอมขึ้น
ใครพอรู้รบกวนช่วยดูให้หน่อยครับ
อ้างคำพูดจาก: อิคคิว เมื่อ 08 ก.ย. 2012, 19:01 น.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<link rel="stylesheet" href="../Desktop/webasianbox/woothemes-FlexSlider-a9168b8/flexslider.css" type="text/css">
<script src="../Desktop/webasianbox/woothemes-FlexSlider-a9168b8/jquery.flexslider-min.js"></script>
<script src="../Desktop/webasianbox/woothemes-FlexSlider-a9168b8/jquery.flexslider.js"></script>
1.ซ้ำ เลือกเอาซักตัว .min เอาไว้ขึ้น production ถ้าแก้โค๊ดไม่เป็นเลยและกะจะไม่แก้เอา .min เลยก็ได้
2.ไฟล์นี้อยู่ที่ไหน ถ้าอยุ่บน hosting path ผิดชัวร์ๆ ../Desktop/webasianbox/woothemes-FlexSlider-a9168b8/jquery.flexslider-min.js
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.navigation').navigation();
จาก doc ของ http://www.woothemes.com/flexslider/ (http://www.woothemes.com/flexslider/)
มันไม่ได้เรียกยังงี้นะ
ต้องเป็น
$('.navigation').flexslider();
});
</script>
ส่วนใช้งานครับ
</div>
</div>
</div>
<div id="navigation">
<div class="navigation">
<ul class="slides">
<li>
<img src="../Desktop/webasianbox/img/1.png" width="600" height="auto">
</li>
<li>
<img src="../Desktop/webasianbox/img/2.png" width="600" height="auto">
</li>
<li>
<img src="../Desktop/webasianbox/img/3.png" width="600" height="auto">
</li>
<li>
<img src="../Desktop/webasianbox/img/4.png" width="600" height="auto">
</li>
<li>
<img src="../Desktop/webasianbox/img/5.png" width="600" height="auto">
</li>
</ul>
</div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
พอดีจะทำslidesภาพครับแต่ไม่รู้ผิดตรงไหนไม่ยอมขึ้น
ใครพอรู้รบกวนช่วยดูให้หน่อยครับ
ปล. อย่าลืมใส่ jquery ด้วย
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
ไม่ชัวร์ลิงก์ลองเช็คดูอีกที
โอได้แล้วครับขอบคุณมากครับ :46:
ขอถามอีกเรื่องนะครับทำไมอันนี้ผมใส่ลิงค์แต่มันไม่ยอมทำงาน
อ้างอิง.mynavi{
display: block;
width: 130px;
height: 20px;
text-align: center;
text-decoration: none;
background-color: #C2CFDF;
color: #434951;
float: left;
margin: 5px;
font: 12px/20px Georgia, "Times New Roman", Times, serif;
}
.mynavi:hover{
display: block;
width: 130px;
height: 20px;
text-align: center;
text-decoration: none;
margin-right: 3px;
background-color: #434951;
color: #FFFFFF;
float: left;
font-size: 12px;
line-height: 20px;
}
.pgnavi{
display:block;
height:25px;
font-size:12px;
line-height:20px;
float:left;
margin-right:3px;
}
<div id="wrapper">
<div id="content">
<table width="95%" height="47" border="0">
<tr><td width="25%">
<td width="23%"><a href="LayoutGala38.html" target="_parent" class="mynavi">STORY OF BOX</a>
</td>
<td width="23%"><a class="mynavi" href="LayoutGala38 2.html">MENU IN BOX</a>
</td>
<td width="23%"><a class="mynavi" href="#">CONTACT OF BOX</a>
</td>
<td width="6%"> </td>
</tr>
</table>
แต่ลิงค์ปุ่มอื่นทำงานปกตินะครับ
ออะทำได้แล้วครับคอมผมช้ามันเลยไม่ขึ้น :56:
ขอถามต่อนิดนึงนะครับ
อ้างอิงdiv#header h1{
height: 150px;
line-height: 80px;
padding-left: 10px;
background: #FFF;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #C2CFDF;
border-bottom-color: #C2CFDF;
border-top-width: medium;
border-bottom-width: medium;
text-align: center;
}
<center><div id="header"><h1><img src="img/logohead.png" width="411" height="54"></h1>
</div></center>
อยากทำให้รูปใน <div id="header"> อยู่ตรงกลาง บน ล่าง ซ้าย ต้องทำยังไงหรอครับทำไมขยับได้แค่ซ้ายขวาแต่บนล่างขยับไม่ได้เลย
รูปมันชิดบนอย่างเดียวเลยครับ
เพิ่ม margin-top: XXpx; เข้าไปก็น่าจะขยับได้ครับ
แบบนี้หรือเปล่า http://rabbitinblack.com/2011/10/css-middle/ (http://rabbitinblack.com/2011/10/css-middle/) :56:
ของพี่บิ๊กตอนแรกseach ในgoogleแล้ว ลองทำตามแล้วครับไม่ได้ 5555
อันนี้ก็ขยับไม่ได้ครับ
อ้างอิง<div id="header"><h1><img src="img/logohead.png"margin-top:30px;></h1>
</div>
งั้นอธิบายให้ฟังก่อนว่า การที่เราใส่ margin-top ให้ตัว img มันไม่ทำให้ตัว img ขยับขึ้นลงอยู่แล้วครับ ด้วยคุณสมบัติเฉพาะตัวของ img นั้น มันเป็น display:inline ซึ่งเราไปทำอะไรเกี่ยวกับด้านสูงไม่ได้
ถ้าต้องการให้มันขยับขึ้นลง เราต้องไปสั่งที่ตัว h1 ซึ่งคลุมตัว img แทนการสั่งที่ตัว img โดยตรง
สมมติเรารู้ความสูง ความกว้างของ img นะ สมมติให้กว้าง 200px และสูง 100px นะ
code ก็น่าจะประมาณนี้
<div id="header"><h1><img src="img/logohead.png" /></h1></div>
ดังนั้นเราก็เขียน CSS ให้มันแบบนี้ครับ
#header h1 {
width:200px;
height:100px;
position:absolute;
top:50%;
left:50%;
margin-top:-100px;
margin-left:-50px;
}
แบบนี้จะทำให้เราได้ Logo ที่อยู่ตรงกลางจอแล้วครับ แต่ถ้าไม่ได้ต้องการให้อยู่ตรงกลางจอ แต่อยู่ตรงกลางในกรอบ header
สมมติว่า header เราสูง 300px กว้าง 960px นะครับ ก็เพิ่ม CSS ตัวนี้ลงไป
#header {
position:relative;
width:960px;
height:300px;
}
ประมาณนี้ละครับ
ปล. แต่แนะนำว่า ตัว html ของตัวนี้ น่าจะเขียนแบบนี้มากกว่านะครับ
<div id="header"><div id="logo"><img src="img/logohead.png" /></div></div>
(http://img3.f0nt.com/22/d9a0c437e11d00249c09c909ebc8b274.png)
ถ้าผมอยากจะเปลี่ยนสี กับขนาดฟอนต์ ในtdแต่ละอันแต่ในtrเดียวกัน ต้องทำยังไงหรอครับ? เพราะพอทำแบบในรูปมันเปลี่ยนทีทั้งหมดเลยอะครับ
ถ้าจะทำสีเฉพาะ tr นั้นๆ ก็ใส่คลาสกำหนดเฉพาะเจาะจงลงใน tr ก็ได้มั้งครับ
แล้วกำหนดให้ td ที่อยู่ภายใต้ tr นั้นเปลี่ยนสีเอา
tr.classname td {...}
หรือจะให้เปลี่ยนทั้งตาราง
ก็เปลี่ยนคำว่า tr เป็น table
อะขอบคุณครับได้แล้วละผมทำไปทื่อๆเลย สร้าง#td1 #td2 #td3แล้วใส่<td width="21%" id="td1">bra bra bra</td>เอาครับ
ใส่เป็น .td1 ดีกว่าครับ (เป็นคลาส) จะได้ถูกวิธี
โอ้ขอบคุณครับตอนนี้พยายามนั่งไล่อ่านพื้นฐานพวกนี้อยู่ครับ แต่รู้สึกว่ามันเข้าใจยากแฮะเพราะผมไม่มีความรู้ html js อะไรพวกนี้เลย :52:
:44:มีเรื่องสงสัยครับแต่ไม่รู้จะอธิบายยังไงดีขอเอาภาพมาช่วยแล้วกันนะครับ
(http://img3.f0nt.com/01/d1db89b30ccb147ab3073b839140f240.png)
คือผมไปหา แกลอรี่ภาพที่เป็นcssมาในภาพขอแทนว่า source code คือผมสามารถรวมไปโค้ดที่ว่านี่เป็นก้อนไปใส่ในbackgroundของcontantแล้วสามารถย่อขยายไอก้อนsource codeโดยที่ background ไม่ขยับตามได้ไหมครับ? ถ้าได้ต้องทำยังไงหรอครับ
ถ้าใครไม่เข้าใจแล้วพอมีเวลาลองดูข้างล่างก็ได้ครับ ไออันที่เป็นสีแดงคือแกลอรี่ภาพที่ไปลอกมาครับ
ทำได้ละครับ http://www.ninenik.com/content.php?arti_id=426 (http://www.ninenik.com/content.php?arti_id=426) มั่วๆเอาจากอันนี้ :46:
ถามครับ
- เราสามารถกำหนดให้ div ใน เล็กกว่า div นอก ด้านละ 5px ได้รึเปล่าครับ? ยังไง?
จะไปกำหนด padding ด้านนอก หรือ margin ด้วใน แล้วกำหนดด้านใน 100% มันไม่เวิคอะ
- เราสามารถกำหนดสีของ margin ได้ป่ะครับ(นอก border)
:46:
แล้วกำหนด padding: 5px ตัวนอกไม่ได้เหรอ มันไม่เวิร์คยังไงอะ
ไม่ได้นะ margin หรือ padding เรากำหนดสีไม่ได้
มันกินล่างครับ ถ้ามี border อีกจะกินขวาด้วย
https://googledrive.com/host/0B2UpB-fMk7MLSjI0NXI1c2lVNVE
อยากให้พอดีจอ
ที่กินขวานี่น่าจะคำนวณกลับไปเพิ่ม padding-right ได้
แต่ที่ต้อง scroll นี่แก้ยังไงอะครับ
กำหนด padding ตัวนอก ไม่ต้องกำหนด width ตัวในครับ มันจะขยายจนเต็มพื้นที่ padding ด้านในให้เอง
:46: ขอบคุณครับ
งั้นเหลือแต่ด้านสูงละ ยังยาวเกินหน้าอยู่
ตัว #frame ไม่ต้องกำหนดทั้งความกว้างความสูง
ใส่ position: absolute แล้วกำหนด top,bottom,left,right ให้เป็น ค่าตามที่อยากให้เว้นขอบ
ใช่แบบนี้ปะที่อยากได้
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<style>
body{
background-color: #532;
}
#frame{
position: absolute;
top: 10px;
bottom: 10px;
left: 10px;
right: 10px;
background-color: #f00;
border: 3px dashed #ff0;
}
</style>
</head>
<body>
<div id="frame"></div>
</body>
</html>
ใช่ๆ :25: