ThaiSEOBoard.com

ขออภัยอย่างแรงที่เปลี่ยนชื่อหัวข้อเนื่องจากไม่ค่อยมีคนสนใจ :P

ใครพอทำกรอบแบบนี้ได้บ้างครับ

(http://upic.me/i/ts/0123456.jpg)
ใครพอทำได้บ้าง

มาบอกว่า อยากรู้เหมือนกันจ๊ะ  :-[

น่าจะทำ table สี แล้ว เอา image  ทำ head กะ foot   ???  แทรกไว้อีกชั้นนึง 

หรือไม่ก็ทำกรอบนอกเป็น สีขาว ที่เหมือนตัวเข้ามุม  4 มุม

เป็นผมจะใช้ table ที่กำหนดเส้นสีกรอบด้วย css แล้วทำ header เป็นรูปที่มีเส้นกรอบตามสีขอบของ table และก็ทำ footer โดยใช้หลักการเีดียวกับ header

ยิ่งอธิบายยิ่ง งง  :wanwan035:

รอ ด้วยคน อยากรู้อยากเห็น

แบ็คกราว แล้วก็จัด รูปแบบ จะไหวไหม   :wanwan011:

ใช้ div แล้ว border เอาก็ได้ที่มุมก็ใช้รูปทำ

css มังครับ

ใช้รูปครับ ไม่มี CSS เลย  :P

ตรงส่วนหัวแบ่งรูปเป็นสามส่วนครับ ส่วนขอบซ้าย ส่วนหน้าคำ แล้วก็ขอบขวา
แบบเนี้ย:
คอลัมน์แรก http://goo.gl/p08P
คอลัมน์สอง http://goo.gl/TtBi
คอลัมน์สาม เขียนหัวข้อ
คอลัมน์สี่ ใส่รูปปิดด้านขวา

ประมาณนี้แหละครับ

คุณ woratana ได้อธิบายคร่าว ๆ แล้วนะครับ   เดี๋ยวผมแสดง code ให้ได้ชมกันแบบ ๆ คร่าวนะครับ


สิ่งที่ต้องใช้คือรูปดังต่อไปนี้ครับ


(http://image.ohozaa.com/ig/application_edit.png) (http://image.ohozaa.com/show.php?id=64f70ccff6ce7e673843fc36e604c129)(http://image.ohozaa.com/ie/tab_brnews_01.gif) (http://image.ohozaa.com/show.php?id=97dc32092b2eb45fb24c59319bb15701)(http://image.ohozaa.com/il/tab_brnews_02.gif) (http://image.ohozaa.com/show.php?id=c9c8a5a18b74b49b6a42d3eee92b45a9)(http://image.ohozaa.com/i1/tab_brnews_04.gif) (http://image.ohozaa.com/show.php?id=911b3a269c8beea3199cb7a46cc5d774)(http://image.ohozaa.com/ik/tab_brnews_06.gif) (http://image.ohozaa.com/show.php?id=f2375eb92514cd0daf1ebe02f5b5781a)



เฉพาะกรอบด้านบน

<table width="752" border="0" cellspacing="0" cellpadding="0">
                          <tr>
                            <td width="466" nowrap="nowrap"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                                <tr>
                                  <td width="5"><img src="tab_brnews_01.gif" width="5" height="22" /></td>
                                  <td width="46" background="tab_brnews_04.gif"><img src="tab_brnews_02.gif" width="46" height="22" /></td>
                                  <td width="100%" background="tab_brnews_04.gif"><a href="http://www.gimyong.com/">ข่าวสารบ้านเรา</a></td>
                                  <td width="52" background="tab_brnews_04.gif"><div align="right"><a href="http://www.gimyong.com/"><img src="application_edit.png" alt="เพิ่มข่าว สำหรับนักข่าว" width="16" height="16" border="0" /></a></div></td>
                                  <td width="5"><img src="tab_brnews_06.gif" width="5" height="22" /></td>
                                </tr>
</table>



กรอบด้านนขวา ซ้าย และด้านล่าง

<table width="752" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="border-bottom-style:dotted; border-left-style:dotted; border-right-style:dotted; border-color:#0066FF;">
www.thaiseoboard.com (http://www.thaiseoboard.com)<br />
ที่ ๆ มีการแบ่งปันสำหรับ webmaster<br />
</td>
</tr>
</table>















สำหรับบางท่านที่มีปัญหา กรอบบนกับล่างไม่รวมเป็นอันเดียวกัน ก็ให้ใช้ตารางอีกตัวหนึ่งมาคลุมอีกทีหนึ่ง ก็ออกมาเป็นตารางที่สวยงามสมบูรณ์แล้วครับ ตัวอย่างโค๊ดที่สมบูรณ์




<table width="753" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table width="752" border="0" cellspacing="0" cellpadding="0">
                          <tr>
                            <td width="466" nowrap="nowrap"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                                <tr>
                                  <td width="5"><img src="tab_brnews_01.gif" width="5" height="22" /></td>
                                  <td width="46" background="tab_brnews_04.gif"><img src="tab_brnews_02.gif" width="46" height="22" /></td>
                                  <td width="100%" background="tab_brnews_04.gif"><a href="http://www.gimyong.com/">ข่าวสารบ้านเรา</a></td>
                                  <td width="52" background="tab_brnews_04.gif"><div align="right"><a href="http://www.gimyong.com/"><img src="application_edit.png" alt="เพิ่มข่าว สำหรับนักข่าว" width="16" height="16" border="0" /></a></div></td>
                                  <td width="5"><img src="tab_brnews_06.gif" width="5" height="22" /></td>
                                </tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="752" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="border-bottom-style:dotted; border-left-style:dotted; border-right-style:dotted; border-color:#0066FF;">
www.thaiseoboard.com (http://www.thaiseoboard.com)<br />
ที่ ๆ มีการแบ่งปันสำหรับ webmaster<br />
</td>
</tr>
</table>
</td>
</tr>
</table>





เข้าใจกันไหมเอ่ย.....     เอาศึกษากันเป็นตัวอย่างนะครับ   อย่าก๊อบของเขามาใช้นะครับ  เดี๋ยวเป็นเรื่องอะครับ

ตอนนี้ HTML5 ไม่ต้องใช้รูปแล้วครับ css ล้วนๆเลย  :wanwan017:

HTML 5 มันแบบนี้หรือเปล่าครับ ...

http://test.projectplay.in.th/test_css_tab_header/

ลองเข้าไปดูเป็นตัวอย่างได้ครับ พอดีว่าเห็นท่าน woratana บอกว่าใช้ IMG ล้วนๆ ผมเลยทำแบบ CSS มาให้ดูครับ

ถ้าผิดพลาดประการใด ต้องขออภัยด้วยนะครับ พอดีว่ารีบ มันดึกแล้ว เดี๋ยวพรุ่งนี้ตื่นมาดูหนังรอบเช้าไม่ทัน  :wanwan004:

จากลิ้งค์ด้านบน ผมจะเอา Code มาแปะให้ดูนะครับ ...

HTML

<div class="tabheader">
<div id="lefttabbg"></div>
<div id="centertabbg"></div>
<div id="righttabbg"></div>
</div>
<div class="clear"></div>
<div class="contentbg">
<div id="contentdetail"><br />
<br />
<br />
ทดสอบครับผม</div>
</div>
-------------------------------------------------------------------------------------------------------------------------
CSS

body {
   font-family:tahoma, sans-serif, "ms sans Serif";
   font-size:12px;
   color:#F0F;
}
.tabheader {
   width:320px;
   height:33px;
}
#lefttabbg {
   background:url(../images/tab_left.jpg);
   width:20px;
   height:33px;
   float:left;
}
#centertabbg {
   background:url(../images/tab_center.jpg);
   width:100px;
   height:33px;
   float:left;
}
#righttabbg {
   background:url(../images/tab_right.jpg);
   width:200px;
   height:33px;
   float:left;
}
.contentbg {
   width:318px;
   height:150px;
   border-style:solid;
   border-width:thin;
   border-color:#ffcaf0;
   border-top-color:#FFF;
   margin:-1px 0 0 0;
}
#contentdetail {
   width:320px;
   height:150px;
   margin:0 0 0 0;
}
.clear {
   clear:both;
}


ทำแบบรีบๆ + ลวกๆ ต้องขออภัยด้วยครับ อาจจะไม่ค่อยสวยสักเท่าไหร่

ปล. อาจจะเห็นว่าผมใช้พื้นที่เขียน Code CSS เปลืองไปนิดหน่อย แบบว่า Pure Code เลยไม่ได้เอาเข้าไป Generate CSS ให้มันเบา

ไม่ยากเลยครับ บนล่างให้ทำเป็น div ประมาณนี้

<div style=width:d;height:xxx;c>
    <table width=100% border=xxx cellpadding=xxxpx cellspacing=xxxpx>
      <tr>
        <td width=apx;><img src=images/title_left.png border=0 /></td>
        <td width=bpx; style=background:url(images/title.png);text-align:left;><h2>เทคโนโลยี</h2></td>
        <td width=cpx;><img src=images/title_right.png border=0 /></td>
      </tr>
    </table>
  </div>

ตามนี้ครับ  title_left ให้ทำรูปเล็กๆ ขอบด้านซ้าย title_left ให้ทำรูปเล็กๆ ขอบด้านขว่า title ก็ทำรูปเล็กๆ เป็น pattern ครับ a + b + c = d นะครับ
ส่วนวิธีทำรูปให้โค้งแบบง่ายๆ ในกรณีทีไม่เก่ง photoshop ดูที่นี้ครับ

->

เจ๋งไปเลย นี่ ขนาด ลวกน่ะเว้ย เดี่ยวรอดูแบบ เทพ ดู มาโพสเร็วๆน่ะ

กระทู้ดีมีสาระๆ ชอบๆ :wanwan011:

ลองศึกษา CSS ดูครับ ไม่ยากเท่าไหร่

ถ้าอยากให้ง่ายเอา template มาแก้ครับ หาที่เป็น css template นะครับ

ลองถามเทพกู ดูมีตรึม!  :wanwan021:

ขอบคุณครับที่สนใจ และหวังว่าเพื่อนๆคงจะเอาไปศึกษาและดัดแปลงไปต่อยอดงานอื่นๆได้ครับ  :wanwan003:

ถ้ารอดูอันที่ตั้งใจทำกว่านี้ สงสัยไว้รอดูงานผมเลยแล้วกัน  :wanwan004: กำลังคุยกับลูกค้าอยู่เลย   :wanwan009:

เผื่อว่าจะมีอะไรหลายอย่างให้เอาไปศึกษากันครับ ภาวนาให้ลูกค้าชอบงานอยู่   :wanwan011:

เยี่ยมครับ แต่ผมว่า div เยอะไปนิดนึงนะ  :P
ถ้าจะทำ fixed width ก็แปะเป็นรูปเดียวไปเลยน่าจะดีกว่าครับ  :wanwan020:

ที่บอกมา ไม่ ค่อย เข้าใจครับ อธิบาย หน่อยครับ

ผมอ่อนมากๆ :P

อ่านไปก็ งง เพราะ ทำไม่ค่อนยเป็น ฮ้า ๆ ๆ

คือส่วนตัวคิดว่าแท็ก div ของ HTML นี่ไม่ควรใช้เยอะไปครับ  :P
ต่างประเทศเค้าเรียก Divitist (ไม่แน่ใจว่าสะกดถูกมั้ย) สำหรับคนที่ชอบใช้ div เยอะ ๆ กับ Span Mania สำหรับคนที่ชอบใช้แท็ก span เยอะ ๆ น่ะครับ  :wanwan003:

โอ้ว เทพๆมาตอบกันทั้งนั้น

ผมคิดว่าคุณ woratana เค้าอาจจะหมายถึงให้ผมกำหนดความกว้างไปเลยครับ เพราะในตัวอย่างที่ผมทำให้ดูนั้น ผมใช้ Div Tag
แต่ตรง CSS ผมกำหนดขนาดให้ class centertabbg มันยาวเท่านั้นๆ พอดีว่าในใจผมตั้งใจจะกำหนดให้มันเป็น auto
จะได้ยาวตามเนื้อหาด้านในได้ แต่ว่าบอกแล้วว่าผมทำมาลวกๆ+รีบๆ ให้ดูกันคร่าวๆ และให้เอาไปดัดแปลงกันเองครับ

ถ้าเป็นงานส่งลูกค้าผมทำอย่างนี้ ผมคงโดนด่าแน่ๆ  :wanwan031:

ส่วนเรื่อง Div เยอะไปนั้น ปกติผมก็ใช้ทั้ง Div, Span และ Table ควบคู่กันไป แต่กรณีนี้เห็นว่ามันไม่ได้มีอะไรมาก เลยขอใช้ Div
ผมจะได้ตอบกระทู้ให้ได้อ่านกันไวๆ (วัยรุึ่่นสมัยนี้มันใจร้อน)

สุดท้ายของการใช้ Div ที่ผมนำมาใช้นี้ก็เพื่อให้คนที่มองลึกๆได้เข้าใจถึงการใช้ Div Tag ด้วยครับ เพราะบางคนอาจจะไม่เข้าใจว่า
จะทำอย่างไรให้ Div แต่ละอันมันมาต่อกันในบรรทัดเดียวกันได้ เพราะปกติ Div Tag  มันจะอยู่ Tag ละบรรทัด ทำให้มอใหม่อาจจะ งงได้

.Main_Content {
   width: กว้างpx;
   height: ยาวpx;
   background-image: url(ภาพพื้นหลัง.gif);
   padding-left: ห่างจากทางซ้ายpx;  // หัวข้อจะได้สวยงาม
   background-repeat: no-repeat;   // สั่งไม่ให้แบ็คกราวทำซ้ำ
   background-color:#สีพื้นหลัง; // ไม่มีก็ได้ ถ้าต้องการ ให้สีตามพื้นเดิม
   color:#สีตัวอักษร; // จะได้ตั้งค่าให้มันตัดกับพื้นหลังจะได้ชัดๆ
   border-color#สีกรอบ;
   border:ขนาดเส้นpx;
}

เวลาใช้ก็

<DIV class="Main_Content">เนื้อหาหรือ ส่วนอื่นๆ</DIV>



ประมาณนี้แหละมั้งครับไม่รู้ใช่ที่ต้องการไหม

เจ้าของเค้าอยากได้วิธีทำ Tab Header ของ Content ครับผม  :wanwan017:

ถ้าที่คุณบอกมามันเหมือนจะเป็นส่วนของตัวเนื้อหา (Content) ครับ  :wanwan031:

ว่าแต่เจ้าของกระทู้จะทำไปเพื่ออะไรหรอครับ... :wanwan044:


ปล. ทำมัน 2 อย่างก็ได้นะ อย่างแรกก็ รูป Tab Header ยาวๆ อันนึง แล้วก็พื้นหลังส่วนเนื้อหาอันนึง (กำหนด css ให้ขอบเป็นสีเอาก็ได้)

อ๋อๆๆๆๆๆ

โทษทีนะ

พอดีเราไม่ค่อยรู้เรื่อง CSS เท่าไหร่อ่ะนะ

งูๆปลาๆ ไม่ค่อยเข้าใจ

ช่วยแนะนำด้วยนะ  :wanwan012:

ไม่เป็นไรครับ เว็บบอร์ดนี้มีไว้แบ่งปันความรู้อยู่ล่ะ  :wanwan019:

ใช่แล้วครับ มีอะไรก็ช่วยๆกันไปครับ ถามได้...แต่จะรู้ไหม อีกเรื่องหนึ่ง  :wanwan004:

ผมจะทำเหมือนเว็บกิมยง นั้นแหละครับทำไว้ใส่ข้อมูล และผมอาจจะดัดแปลง ไว้ทำอย่างอื่นอีกเยอะ เพราะ ปกติ ผมไม่ค่อย เก่งเรื่องแบบนี้ อิอิ ยังไง ก็ ขอบคุณ whitecross ตอนนี้ยัง + ไม่ได้เพราะไม่ถึง 72 ชั่วโมง งั้นเดี่ยว บวก ย้อนหลัง น่ะครับ thx มากๆ ทุกคนในบอร์ดด้วยครับ

ชอบคุณมากเลยครับ ได้ความรู้มาก
 :wanwan020: