(http://image.ohozaa.com/i2/559untitled.jpg) (http://image.ohozaa.com/show.php?id=62328d559c2133e08e7617ce4ac2b7dc)
ครับเวลาชี้จะมีเงาอยู๋ด้านหลัง ครับ แล้วแต่ละ เมนู จะมี ...... ขั้น อยู่ครับ ไม่รู็ทำยังไง ไม่เกง่ CSS ด้วยสิครับ
สอบทำแบบนี้ด้วยก็ดีครับ แฮ่ๆ
(http://image.ohozaa.com/i1/546untitled.jpg) (http://image.ohozaa.com/show.php?id=fdf58d89dccbf2aaf23ae0d696aa1e18)
จากเว็บไหนเนี่ย ขอเข้าไปดูการทำงานของมันหน่อย พอดีอ่านแล้ว งง :wanwan035:
อ้างถึงจาก: whitecross ใน 14 เมษายน 2010, 10:28:51
เดี๋ยวมาช่วยตอบครับ ไปถูบ้านก่อนเดี๋ยวมาตอบ :wanwan003:
ครับ ผม
ผมใช้ style sheet เข้าช่วยครับ
อันนี้ใน style sheet
.dvleftmenu {
text-decoration: none;
}
.dvleftmenu ul {
margin: 0px;
width: 187px;
padding-left: 0px;
background-color: #F8F8F8;
}
.dvleftmenu li {
background-color: #F8F8F8;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #CCCCCC;
list-style-type: none;
}
.dvleftmenu li a {
color: #333333;
height: 19px;
padding-left: 10px;
padding-top: 2px;
text-decoration: none;
display: block;
}
.dvleftmenu li a:hover {
color: #006699;
background-color: #CCCCCC;
}
อันนี้ในหน้าเว็บ
<div class="dvleftmenu">
<ul>
<li><a href="xxx">xxx</a></li>
<li><a href="xxx">xxx</a></li>
<li><a href="xxx">xxx</a></li>
</ul>
</div>
ลองดูนะครับ
มีคนมาตอบแล้ว ดีใจด้วยครับ
งั้นผมแนะนำอีกแบบแล้วกันนะครับ เป็นแบบใช้ภาพ สามารถประยุกต์ใช้ได้หลายแบบเลย
http://www.projectplay.in.th/tabhover/
กด view source ดูนะครับ ผมใส่ css ไว้ในส่วนของตัว code เลย ถ้าดูไม่ได้ก็ลง plug-in เสริมถึงจะดูได้
อ้างถึงจาก: whitecross ใน 14 เมษายน 2010, 12:02:30
มีคนมาตอบแล้ว ดีใจด้วยครับ
งั้นผมแนะนำอีกแบบแล้วกันนะครับ เป็นแบบใช้ภาพ สามารถประยุกต์ใช้ได้หลายแบบเลย
http://www.projectplay.in.th/tabhover/
กด view source ดูนะครับ ผมใส่ css ไว้ในส่วนของตัว code เลย ถ้าดูไม่ได้ก็ลง plug-in เสริมถึงจะดูได้
คุงครับ แต่ว่า มันไม่มี .... ขั้น อะครับ แล้ว ผมดึงมาใช้ มันไม่มีสีเลยครับ --*
หน้าเว็บมันเป็นไงหว่า ไม่เห็นก็บอกไม่ถูกเน้อ
อ้างถึงจาก: t_doyoumv ใน 14 เมษายน 2010, 12:22:31
อ้างถึงจาก: whitecross ใน 14 เมษายน 2010, 12:02:30
มีคนมาตอบแล้ว ดีใจด้วยครับ
งั้นผมแนะนำอีกแบบแล้วกันนะครับ เป็นแบบใช้ภาพ สามารถประยุกต์ใช้ได้หลายแบบเลย
http://www.projectplay.in.th/tabhover/
กด view source ดูนะครับ ผมใส่ css ไว้ในส่วนของตัว code เลย ถ้าดูไม่ได้ก็ลง plug-in เสริมถึงจะดูได้
คุงครับ แต่ว่า มันไม่มี .... ขั้น อะครับ แล้ว ผมดึงมาใช้ มันไม่มีสีเลยครับ --*
มันใช้ภาพด้วยครับ ของผมใช้วิธีทำแบบ image hover ครับ
http://www.projectplay.in.th/tabhover/nav.png
เซฟภาพไป แล้วเอาไปไว้ที่เดียวกับไฟล์ index.php หรือไว้ที่ไหนก็ browse หาเอาก็ได้ครับ
ปล. วิธีนี้ใช้ทำเป็น nav แบบอนิเมชั่นได้ด้วยขอบอก แจ่มสุดๆ ลองประยุกต์เอานะครับ
อ้างถึงจาก: t_doyoumv ใน 14 เมษายน 2010, 12:22:31
อ้างถึงจาก: whitecross ใน 14 เมษายน 2010, 12:02:30
มีคนมาตอบแล้ว ดีใจด้วยครับ
งั้นผมแนะนำอีกแบบแล้วกันนะครับ เป็นแบบใช้ภาพ สามารถประยุกต์ใช้ได้หลายแบบเลย
http://www.projectplay.in.th/tabhover/
กด view source ดูนะครับ ผมใส่ css ไว้ในส่วนของตัว code เลย ถ้าดูไม่ได้ก็ลง plug-in เสริมถึงจะดูได้
คุงครับ แต่ว่า มันไม่มี .... ขั้น อะครับ แล้ว ผมดึงมาใช้ มันไม่มีสีเลยครับ --*
ใส่ border-botom: ..... ; ครับ
อ้างถึงจาก: aCustiCz ใน 14 เมษายน 2010, 12:55:33
อ้างถึงจาก: t_doyoumv ใน 14 เมษายน 2010, 12:22:31
อ้างถึงจาก: whitecross ใน 14 เมษายน 2010, 12:02:30
มีคนมาตอบแล้ว ดีใจด้วยครับ
งั้นผมแนะนำอีกแบบแล้วกันนะครับ เป็นแบบใช้ภาพ สามารถประยุกต์ใช้ได้หลายแบบเลย
http://www.projectplay.in.th/tabhover/
กด view source ดูนะครับ ผมใส่ css ไว้ในส่วนของตัว code เลย ถ้าดูไม่ได้ก็ลง plug-in เสริมถึงจะดูได้
คุงครับ แต่ว่า มันไม่มี .... ขั้น อะครับ แล้ว ผมดึงมาใช้ มันไม่มีสีเลยครับ --*
ใส่ border-botom: ..... ; ครับ
ถ้าจะใส่ ... ในโค๊ดของผม ต้องแก้กันนิดนึงนะครับ เพราะผมใช้แบบดึงภาพ จุดมันจะไม่ซ้อนกับภาพ ลองประยุกต์ดูนะครับ
ปล. CSS ทำได้ทุกอย่าง ยกเว้นเขียนโปรแกรม T-T
อ๋อ ผมงงกับคำว่า "เมนู จะมี ...... ขั้น อยู่ครับ" ต้องใช้คำว่า คั่น นะครับจึงจะถูกต้อง
จาก style sheet ที่ผมใส่ลงไป
border-top-width: 1px;
border-top-style: solid;
border-top-color: #CCCCCC;
ตรงนี้ล่ะครับ ที่จะกำหนดว่าจะให้เป็น จุด เส้น ใหญ่ เล็ก สีอะไรยังไง
ลองทำดูครับ แล้วจะเห็นเอง :laugh:
↑ออ
border-bottom:1px dotted #ccc;
คำสั่งนี้ก็พอแล้ว
อ้างถึงจาก: itportal ใน 14 เมษายน 2010, 11:31:53
ผมใช้ style sheet เข้าช่วยครับ
อันนี้ใน style sheet
.dvleftmenu {
text-decoration: none;
}
.dvleftmenu ul {
margin: 0px;
width: 187px;
padding-left: 0px;
background-color: #F8F8F8;
}
.dvleftmenu li {
background-color: #F8F8F8;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #CCCCCC;
list-style-type: none;
}
.dvleftmenu li a {
color: #333333;
height: 19px;
padding-left: 10px;
padding-top: 2px;
text-decoration: none;
display: block;
}
.dvleftmenu li a:hover {
color: #006699;
background-color: #CCCCCC;
}
อันนี้ในหน้าเว็บ
<div class="dvleftmenu">
<ul>
<li><a href="xxx">xxx</a></li>
<li><a href="xxx">xxx</a></li>
<li><a href="xxx">xxx</a></li>
</ul>
</div>
ลองดูนะครับ
น่าสนดีครับ แต่ ว่า ถ้าจะเปลี่ยน สีพื้นหลังแต่ละช่องยังไงหรอครับ
สอนทำแบบนี้ด้วยก็ดีครับ แฮ่ๆ
(http://image.ohozaa.com/i1/546untitled.jpg) (http://image.ohozaa.com/show.php?id=fdf58d89dccbf2aaf23ae0d696aa1e18)
อ้างถึงจาก: g-ji ใน 14 เมษายน 2010, 13:57:39
↑ออ
border-bottom:1px dotted #ccc;
คำสั่งนี้ก็พอแล้ว
ได้แล้วครับๆ มั่วๆ เอา
ลองเอาไปใส่ดูมั่วๆก่อนครับ จะได้รู้ว่าถ้าใส่อันไหนแล้วเกิดอะไรขึ้น
ท่านเล่นถามหมดอย่างนี้ ก็เหมือนให้คนอื่นทำให้ จะไม่ได้อะไรเอาครับ
ลองเอาไปใส่ดู แล้วคิดดูว่าทำไมถึงเกิดตรงนั้น แล้วตรงนั้นใส่แล้วเป้นยังไง
อ้างถึงจาก: whitecross ใน 14 เมษายน 2010, 14:20:28
ลองเอาไปใส่ดูมั่วๆก่อนครับ จะได้รู้ว่าถ้าใส่อันไหนแล้วเกิดอะไรขึ้น
ท่านเล่นถามหมดอย่างนี้ ก็เหมือนให้คนอื่นทำให้ จะไม่ได้อะไรเอาครับ
ลองเอาไปใส่ดู แล้วคิดดูว่าทำไมถึงเกิดตรงนั้น แล้วตรงนั้นใส่แล้วเป้นยังไง
ครับได้แล้วๆ ครับ อิอิ เหลือ แต่ ถ้าจะเอาช่องไหนช่องหนึ่ง ใส่ พื้นหลังคนละสีทำยังไงครับ ...
อ้างถึงจาก: t_doyoumv ใน 14 เมษายน 2010, 14:21:37
อ้างถึงจาก: whitecross ใน 14 เมษายน 2010, 14:20:28
ลองเอาไปใส่ดูมั่วๆก่อนครับ จะได้รู้ว่าถ้าใส่อันไหนแล้วเกิดอะไรขึ้น
ท่านเล่นถามหมดอย่างนี้ ก็เหมือนให้คนอื่นทำให้ จะไม่ได้อะไรเอาครับ
ลองเอาไปใส่ดู แล้วคิดดูว่าทำไมถึงเกิดตรงนั้น แล้วตรงนั้นใส่แล้วเป้นยังไง
ครับได้แล้วๆ ครับ อิอิ เหลือ แต่ ถ้าจะเอาช่องไหนช่องหนึ่ง ใส่ พื้นหลังคนละสีทำยังไงครับ ...
code สี จะนำหน้าด้วย # ลองแก้เลขเอาครับ คิดว่าท่านน่าจะผสมสีแบบ RGB เป็นนะครับ :wanwan003:
อ้างถึงจาก: whitecross ใน 14 เมษายน 2010, 14:24:29
อ้างถึงจาก: t_doyoumv ใน 14 เมษายน 2010, 14:21:37
อ้างถึงจาก: whitecross ใน 14 เมษายน 2010, 14:20:28
ลองเอาไปใส่ดูมั่วๆก่อนครับ จะได้รู้ว่าถ้าใส่อันไหนแล้วเกิดอะไรขึ้น
ท่านเล่นถามหมดอย่างนี้ ก็เหมือนให้คนอื่นทำให้ จะไม่ได้อะไรเอาครับ
ลองเอาไปใส่ดู แล้วคิดดูว่าทำไมถึงเกิดตรงนั้น แล้วตรงนั้นใส่แล้วเป้นยังไง
ครับได้แล้วๆ ครับ อิอิ เหลือ แต่ ถ้าจะเอาช่องไหนช่องหนึ่ง ใส่ พื้นหลังคนละสีทำยังไงครับ ...
code สี จะนำหน้าด้วย # ลองแก้เลขเอาครับ คิดว่าท่านน่าจะผสมสีแบบ RGB เป็นนะครับ :wanwan003:
ครับ เปลี่ยนแล้วครับแต่ว่ามันดันไปทุกช่องเลยอะครับผมอยากให้โชว์แค่ช่องใดช่องหนึ่งครับ
สอนทำแบบนี้ด้วยก็ดีครับ แฮ่ๆ ผมทำได้ แต่ว่า หัวมันไม่มลๆอะครับ
(http://image.ohozaa.com/i1/546untitled.jpg) (http://image.ohozaa.com/show.php?id=fdf58d89dccbf2aaf23ae0d696aa1e18)
ขอบโค้งมันเป็น CSS3 หรือถ้าไม่อยากใช้ CSS3 ก็ให้หาภาพมาทำ 3 ภาพ มีภาพขอบบน ตรงกลางเพื่อ repeat y หรือ height:auto และขอบล่าง แค่นี้ก็ได้แล้วครับ
อ้างถึงจาก: whitecross ใน 14 เมษายน 2010, 14:49:19
ขอบโค้งมันเป็น CSS3 หรือถ้าไม่อยากใช้ CSS3 ก็ให้หาภาพมาทำ 3 ภาพ มีภาพขอบบน ตรงกลางเพื่อ repeat y และขอบล่าง แค่นี้ก็ได้แล้วครับ
แล้วผมจะทำภาพยังไงครับให้มันตรงๆกันอะครับ
เอาภาพไปดูเป็นแนวแล้วกันครับ ถ้าสอนจนเป็นหมดคงไม่จบแน่ๆ :wanwan035: ผมกว่าจะเป็นทั้งหมดหัดเืกือบเดือน :wanwan007:
(http://www.projectplay.in.th/tabhover/image/bg-top.png)
(http://www.projectplay.in.th/tabhover/image/bg-center.png)
(http://www.projectplay.in.th/tabhover/image/bg-bottom.png)
เอาไปใส่ใน css แล้วเรียกใช้งานมันก็ตรงกันแล้ว เนื้อหาก็เอาไปใส่ในภาพอันกลาง กำหนดให้มันซ้ำภาพลงมาข้างล่างได้ก็เสร็จแล้ว
อ้างถึงจาก: whitecross ใน 14 เมษายน 2010, 15:03:00
เอาภาพไปดูเป็นแนวแล้วกันครับ ถ้าสอนจนเป็นหมดคงไม่จบแน่ๆ :wanwan035: ผมกว่าจะเป็นหัดเืกือบเดือน :wanwan007:
(http://www.projectplay.in.th/tabhover/image/bg-top.png)
(http://www.projectplay.in.th/tabhover/image/bg-center.png)
(http://www.projectplay.in.th/tabhover/image/bg-bottom.png)
เอาไปใส่ใน css แล้วเรียกใช้งานมันก็ตรงกันแล้ว เนื้อหาก็เอาไปใส่ในภาพอันกลาง กำหนดให้มันซ้ำภาพลงมาข้างล่างได้ก็เสร็จแล้ว
คุงครับแต่ผมทำตอนไหน ไม่ตรงสะที
อ้างถึงจาก: aCustiCz ใน 14 เมษายน 2010, 12:55:33
อ้างถึงจาก: t_doyoumv ใน 14 เมษายน 2010, 12:22:31
อ้างถึงจาก: whitecross ใน 14 เมษายน 2010, 12:02:30
มีคนมาตอบแล้ว ดีใจด้วยครับ
งั้นผมแนะนำอีกแบบแล้วกันนะครับ เป็นแบบใช้ภาพ สามารถประยุกต์ใช้ได้หลายแบบเลย
http://www.projectplay.in.th/tabhover/
กด view source ดูนะครับ ผมใส่ css ไว้ในส่วนของตัว code เลย ถ้าดูไม่ได้ก็ลง plug-in เสริมถึงจะดูได้
คุงครับ แต่ว่า มันไม่มี .... ขั้น อะครับ แล้ว ผมดึงมาใช้ มันไม่มีสีเลยครับ --*
ใส่ border-botom: ..... ; ครับ
พี่ครับถ้าจะใส่ icon ด้านหน้าของแต่ละลิงค์ เพิ่มเข้า ตรงไหน หรอครับ
กำหนดใน css...กำหนดให้กับ tag นั้นๆครับ อยากให้ขึ้นตรงไหนใส่ใน css ส่วนนั้น
list-style-image: url(ที่อยู่ไฟล์ภาพ.นามสกุล);
ตัวอย่าง (http://www.thaicss.com/CSS-Horizontal-Navigation-%E0%B8%AB%E0%B8%A3%E0%B8%B7%E0%B8%AD--%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B8%97%E0%B8%B3-CSS-menu-%E0%B9%81%E0%B8%9A%E0%B8%9A-Dropdown/)
มีตัวอย่างมาให้ดูึครับ จาก thaicss.com
อ้างถึงจาก: whitecross ใน 14 เมษายน 2010, 16:10:27
กำหนดใน css...กำหนดให้กับ tag นั้นๆครับ อยากให้ขึ้นตรงไหนใส่ใน css ส่วนนั้น
list-style-image: url(ที่อยู่ไฟล์ภาพ.นามสกุล);
(http://image.ohozaa.com/iw/579untitled.jpg) (http://image.ohozaa.com/show.php?id=dbbff89043746b4acb880e655f5c61ce)
ผมใส่แล้ว รูปมันไปโชว์อยู่ข้างนอกอะครับต้องเพิ่มคำสั่งอะไรอีกไหมครับ
สั่งให้มัน padding เข้ามาข้างในสิครับ
padding-left:20px; เป็นต้น
อ้างถึงจาก: whitecross ใน 14 เมษายน 2010, 18:23:52
สั่งให้มัน padding เข้ามาข้างในสิครับ
padding-left:20px; เป็นต้น
อ๋อครับจะลองดูครับ
อ้างถึงจาก: t_doyoumv ใน 14 เมษายน 2010, 14:45:05
สอนทำแบบนี้ด้วยก็ดีครับ แฮ่ๆ ผมทำได้ แต่ว่า หัวมันไม่มลๆอะครับ
(http://image.ohozaa.com/i1/546untitled.jpg) (http://image.ohozaa.com/show.php?id=fdf58d89dccbf2aaf23ae0d696aa1e18)
น่าจะประมาณนี้ครับ โค้ด html ครับ
<table width="150" height="328" border="1">
<tr>
<td height="300"><table width="140" height="291" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="291" bgcolor="#CCCCCC"><p align="center">ผู้สนับสนุน</p>
<table width="110" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="110" bgcolor="#0099FF"><p align="center">พื้นที่โฆษณา</p>
<p align="center">เดือนละ 8 บาท</p></td>
</tr>
</table>
<p> </p>
<table width="110" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="110" bgcolor="#0099FF"><p align="center">พื้นที่โฆษณา</p>
<p align="center">เดือนละ 8 บาท</p></td>
</tr>
</table>
<p> </p></td>
</tr>
</table></td>
</tr>
</table>ถ้าจะใส่พื้นหลังเป็นภาพแทนก็ลบ bgcolor="xxxxx" แล้วใส่เป็น background="ลิ้งภาพ"
พอดีว่างๆกำลังจะไปนอน เลยลองเขียนให้ดูครับ ผิดพลาดยังไง บอกได้ครับ :wanwan012:
ผมว่าใช้ tag อื่นแทน table ก็ดีนะครับ เพราะดูแล้วไม่น่าจะถึงขั้นใช้ table เพราะไม่ต้องสร้างตารางที่ซับซ้อน
ใช้ div แล้วสั่ง float ก็ได้ครับสะดวกกว่าด้วย table ใช้เวลาทำอะไรที่ซับซ้อนเพื่อลดการใช้ div จะดีกว่าครับ
อยากถามท่านด้านบนว่าใช้ <div> จะใส่เส้นขอบให้มันทำไงครับ
อ้างถึงจาก: DragonB ใน 15 เมษายน 2010, 01:34:30
อยากถามท่านด้านบนว่าใช้ <div> จะใส่เส้นขอบให้มันทำไงครับ
HTML...
<div class="top"></div>
<div class="center"></div>
<div class="bottom"></div>
CSS...
.top {
width:135px;
height:17px;
background-image:url(bg-top.png);
}
.center {
width:135px;
height:auto;
background-image:url(bg-center.png);
background-repeat:repeat-y;
}
.bottom {
width:135px;
height:14px;
background-image:url(bg-bottom.png);
}
คร่าวๆก็ประมาณนี้ครับ ลองประยุกต๊ดูนะครับ พอดีทำผ่านๆให้เข้าใจกันเฉยๆ ไม่ได้ทำแบบ W3C
-moz-border-radius-topright: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
สำหรับขอบโค้งของ Firefox
อ้างถึงจาก: onlyones ใน 15 เมษายน 2010, 02:06:16
-moz-border-radius-topright: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
สำหรับขอบโค้งของ Firefox
นี่มัน code CSS3 ครับ ตอนนี้ยังไม่ค่อยรองรับ 100% แนะนำว่าให้ใช้ CSS เดิมไปก่อนจะดีกว่าครับ หรือเขียนฟังชั่นให้สลับได้ก็ดีครับ
เช่นถ้าผู้ใช้เปิดเว็บด้วย ie6 7 8 หรืออะไรก้ตามที่ไม่รองรับให้ใช้ CSS ส่วนผู้ใช้ที่เปิดเว็บด้วย ff3.6 หรือ ie9 ให้ใช้ CSS3
ปล. ส่วนตัวแล้วแนะนำให้ใช้ CSS ไปก่อนจนกว่าจะมีข้อยืนยัน 100% ว่าผู้ใช้ส่วนมากใช้ browser ที่รองรับ CSS3 กันเยอะแล้ว ไม่งั้นเว็บเน่าแน่ครับ
ตอนนี้ใช้ css ไปธรรมดาก่อนผมว่ายังโออยู่นะ :wanwan016:
คุณ whitecross ครับ ได้ลองใช้ CS5 ยังครับ โหลดเสร็จแล้วแต่ยังไม่ได้ลงเลยครับ
เมนู css สวยๆทั้งนั้นครับ
http://www.styledmenus.com/