ทำเมนู แบบนี้ยังไงหรอครับ(น่าจะเป็น CSS)

[whitecross]

ขอบโค้งมันเป็น CSS3 หรือถ้าไม่อยากใช้ CSS3 ก็ให้หาภาพมาทำ 3 ภาพ มีภาพขอบบน ตรงกลางเพื่อ repeat y หรือ height:auto และขอบล่าง แค่นี้ก็ได้แล้วครับ

[t_doyoumv]

ขอบโค้งมันเป็น CSS3 หรือถ้าไม่อยากใช้ CSS3 ก็ให้หาภาพมาทำ 3 ภาพ มีภาพขอบบน ตรงกลางเพื่อ repeat y และขอบล่าง แค่นี้ก็ได้แล้วครับ

แล้วผมจะทำภาพยังไงครับให้มันตรงๆกันอะครับ

[whitecross]

เอาภาพไปดูเป็นแนวแล้วกันครับ ถ้าสอนจนเป็นหมดคงไม่จบแน่ๆ   ผมกว่าจะเป็นทั้งหมดหัดเืกือบเดือน  







เอาไปใส่ใน css แล้วเรียกใช้งานมันก็ตรงกันแล้ว เนื้อหาก็เอาไปใส่ในภาพอันกลาง กำหนดให้มันซ้ำภาพลงมาข้างล่างได้ก็เสร็จแล้ว

[t_doyoumv]

เอาภาพไปดูเป็นแนวแล้วกันครับ ถ้าสอนจนเป็นหมดคงไม่จบแน่ๆ  ผมกว่าจะเป็นหัดเืกือบเดือน 







เอาไปใส่ใน css แล้วเรียกใช้งานมันก็ตรงกันแล้ว เนื้อหาก็เอาไปใส่ในภาพอันกลาง กำหนดให้มันซ้ำภาพลงมาข้างล่างได้ก็เสร็จแล้ว

คุงครับแต่ผมทำตอนไหน ไม่ตรงสะที

[t_doyoumv]

มีคนมาตอบแล้ว ดีใจด้วยครับ

งั้นผมแนะนำอีกแบบแล้วกันนะครับ เป็นแบบใช้ภาพ สามารถประยุกต์ใช้ได้หลายแบบเลย

http://www.projectplay.in.th/tabhover/

กด view source ดูนะครับ ผมใส่ css ไว้ในส่วนของตัว code เลย ถ้าดูไม่ได้ก็ลง plug-in เสริมถึงจะดูได้

คุงครับ แต่ว่า มันไม่มี .... ขั้น อะครับ แล้ว ผมดึงมาใช้ มันไม่มีสีเลยครับ --*

ใส่ border-botom: ..... ; ครับ

พี่ครับถ้าจะใส่ icon ด้านหน้าของแต่ละลิงค์ เพิ่มเข้า ตรงไหน หรอครับ

[whitecross]

กำหนดใน css...กำหนดให้กับ tag นั้นๆครับ อยากให้ขึ้นตรงไหนใส่ใน css ส่วนนั้น

list-style-image: url(ที่อยู่ไฟล์ภาพ.นามสกุล);

[iamnotkorr]

ตัวอย่าง

มีตัวอย่างมาให้ดูึครับ จาก thaicss.com

[t_doyoumv]

กำหนดใน css...กำหนดให้กับ tag นั้นๆครับ อยากให้ขึ้นตรงไหนใส่ใน css ส่วนนั้น

list-style-image: url(ที่อยู่ไฟล์ภาพ.นามสกุล);

ผมใส่แล้ว รูปมันไปโชว์อยู่ข้างนอกอะครับต้องเพิ่มคำสั่งอะไรอีกไหมครับ

[whitecross]

สั่งให้มัน padding เข้ามาข้างในสิครับ

padding-left:20px; เป็นต้น

[t_doyoumv]

สั่งให้มัน padding เข้ามาข้างในสิครับ

padding-left:20px; เป็นต้น

อ๋อครับจะลองดูครับ

[DragonB]

สอนทำแบบนี้ด้วยก็ดีครับ แฮ่ๆ  ผมทำได้ แต่ว่า หัวมันไม่มลๆอะครับ

น่าจะประมาณนี้ครับ โค้ด 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>&nbsp;</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>&nbsp;</p></td>
      </tr>
    </table></td>
  </tr>
</table>


ถ้าจะใส่พื้นหลังเป็นภาพแทนก็ลบ bgcolor="xxxxx" แล้วใส่เป็น background="ลิ้งภาพ"

พอดีว่างๆกำลังจะไปนอน เลยลองเขียนให้ดูครับ ผิดพลาดยังไง บอกได้ครับ 

[whitecross]

ผมว่าใช้ tag อื่นแทน table ก็ดีนะครับ เพราะดูแล้วไม่น่าจะถึงขั้นใช้ table เพราะไม่ต้องสร้างตารางที่ซับซ้อน

ใช้ div แล้วสั่ง float ก็ได้ครับสะดวกกว่าด้วย table ใช้เวลาทำอะไรที่ซับซ้อนเพื่อลดการใช้ div จะดีกว่าครับ

[DragonB]

อยากถามท่านด้านบนว่าใช้ <div>  จะใส่เส้นขอบให้มันทำไงครับ

[whitecross]

อยากถามท่านด้านบนว่าใช้ <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

[onlyones]

-moz-border-radius-topright: 5px;
-webkit-border-top-right-radius: 5px; 
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;

สำหรับขอบโค้งของ Firefox

[whitecross]

-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 กันเยอะแล้ว ไม่งั้นเว็บเน่าแน่ครับ

[Motayaki]

ตอนนี้ใช้ css ไปธรรมดาก่อนผมว่ายังโออยู่นะ 

คุณ whitecross ครับ ได้ลองใช้ CS5 ยังครับ โหลดเสร็จแล้วแต่ยังไม่ได้ลงเลยครับ

[mama2008]

เมนู css สวยๆทั้งนั้นครับ

โค้ด เลือก ขยาย

http://www.styledmenus.com/