ThaiSEOBoard.com

ตามหัวข้อเลยครับ

ไม่รู็ว่ามันคืออะไรพีๆมีคนรู็ไหมครับ
ขอบคุณครับ

คนรู ไม่มี อ่ะ  ;D

อ้างถึงจาก: test ใน 19 พฤศจิกายน 2009, 15:40:16
คนรู ไม่มี อ่ะ  ;D

นั้นสิผมก็งง อะครับ

div
ul
li

น่าจะช่วยได้นะครับ

ขอมั้ง............ ผมก็อยากรู้เหมือนกันอะคับ...ช่วยที่! :wanwan005:

เข้ามารอคำตอบด้วยคน

ใช้ div พอจะทราบ แต่ ul กะ li นี่ใช้ยังไงครับ

ui li ol ส่วนใหญ่ผมใช้กับพวกเมนูมากกว่า ส่วนถ้าเป็นตารางยังคงใช้ table + css เหมือนเดิม

ลองดูครับ table + css generate เผื่อมีประโยชน์
http://www.somacon.com/p141.php

อ้างถึงจาก: backpacker ใน 19 พฤศจิกายน 2009, 21:49:01
เข้ามารอคำตอบด้วยคน

ใช้ div พอจะทราบ แต่ ul กะ li นี่ใช้ยังไงครับ

ตอบยังไงดี Example แบบนี้ละกัน

               <ul>
                  <li><a href="#">Menu 1</a></li>
                  <li><a href="#">Menu 2</a></li>
                  <li><a href="#">Menu 3</a></li>
               </ul>

ที่เหลือก็ทำ Css ปรับแต่งตัว ul li

 :P
จะอธิบายยังไงดีให้ไม่งงกันแฮ่ะ

ตามที่คุณ mixture แบบนั้นเลยครับการใช้การพื้นฐาน

<div>
   <ul>
      <li><a href="#">Menu 1</a></li>
      <li><a href="#">Menu 2</a></li>
      <li><a href="#">Menu 3</a></li>
   </ul>
</div>

ส่วนมากเค้าจะสร้าง div เป็นกรอบเอาไว้ก่อน แล้วค่อยเอา li ไล่เป็น list ไปครับผม
มีอะไรถามได้เลยครับ ผมก็งู ๆ ปลา ๆ อันไหนรู้ก็จะบอกครับผม

ถ้าไม่อยากใช้ Table ก็มีอีกวิธีคือใข้ CSS layout แทนได้ครับ
โดยกำหนด ตามตัวอย่างข้างล่างครับ รูปแบบจะเหมือนกับโครงสร้างของ Themes หรือ Template ที่เราคุ้นกันดีครับ
   1. <div id="wrap">
   2. <div id="header"></div>
   3. <div id="nav"></div>
   4. <div id="main"></div>
   5. <div id="sidebar"></div>
   6. <div id="footer"></div>

   1.  #header {
   2. padding:5px 10px;
   3. background:#ddd;
   4. }
   5. h1 {
   6. margin:0;
   7. }
   8. #nav {
   9. padding:5px 10px;
  10. background:#c99;
  11. }
  12. #main {
  13. float:left;
  14. width:480px;
  15. padding:10px;
  16. background:#9c9;
  17. }
  18. h2 {
  19. margin:0 0 1em;
  20. }
  21. #sidebar {
  22. float:right;
  23. width:230px;
  24. padding:10px;
  25. background:#99c;
  26. }
  27. #footer {
  28. clear:both;
  29. padding:5px 10px;
  30. background:#cc9;
  31. }
  32. #footer p {
  33. margin:0;
  34. }

ตัวอย่างก็คร่าวๆนะครับไม่ได้ลงในรายละเอียดครับ คุณสามารถหาข้อมูลรายละเอียดได้จากอินเตอร์เน็ต นะครับ

ขอบคุณมากเลยครับกำลังหัดทำแบบไม่ใช้ตาราง น่าจะแสดงผลเร็วว่า
น่าจะเป็นประโยชน์ครับ

http://www.1stwebdesigner.com/tutorials/43-psd-to-xhtml-css-tutorials-creating-web-layouts-and-navigation/

http://net.tutsplus.com/tutorials/site-builds/from-psd-to-html-building-a-set-of-website-designs-step-by-step/

div  ยาว ๆ เลย ครับ

<style type="text/css">
ul.showColumn{
   display:block;float:left;
   list-style:none;
   padding:0;margin:0;
   width:495px;
/*   background-color:#FFCCCC;*/
   border:1px solid #333333;  /* กำหนด  ของ table  */   
   padding:2px 0 2px 2px;
}
ul.showColumn li{
   list-style:none;
   display:block;float:left;
   background-color:#99CC99;
   margin:2px;  /* กำหนด  cellspacing"  ของ table  */
   margin-left:3px;
   padding:0px; /* กำหนด  cellpadding  ของ table  */
   border:1px solid #333333;  /* กำหนด border ใน td ของ table  */
   width:116px; /*  กำหนดความกว้างของแต่ละคอลัมน์  */
}
</style>

การเรียกใช้งานนะรู
<ul class="showColumn">
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>