ThaiSEOBoard.com

ดูให้หน่อยครับ เขียน css ยังไง ให้เมนูอยู่ติดขอบ ซ้ายขวา นอกจากจะขยายข้อความอะครับ   ที่จะปรับซิดซ้ายขวาเป็นวิวบนแท็บเล็ตนะครับ


([url]http://upload.siamza.com/file_upload/modify/290914/1500275.png[/url])


HTML

<div class="centers" align="center"> <!-- CSS จัดกรอบให้อยู่ตรงกลาง-->
   
           <div class="main" > <!-- CSS กรอบหลัก-->
                        
                  
                                                  <div class="mainmenu"><!-- CSS ลิ้งเมนูหลัก-->
                                                <ul >
                               <a href="index.php"><li><b>HOME</b></li></a>
                                   <a href="about us.php"><li><b>ABOUT US</b></li></a>
                                  <a href="application.php"><li><b>APPLICATION</b></li></a>
                                  <a href="exhibitions.php"> <li><b>EXHIBITIONS</b></li></a>
                                      <a href="globalconnections.php"><li><b>GLOBAL CONNECTIONS</b></li></a>
                                       <a href="contactus.php"><li><b>CONTACT US</b></li></a>
                                 </ul>
                               </div><!-- CSS ลิ้งเมนูหลัก-->
</div>


CSS

.mainmenu  ul{ margin-left:45.5px;list-style:none;
margin-top:5px;}

.mainmenu ul li{border:0px #000 solid;
         float:left;
       color:#FFF;
       padding-top: 10px;
       padding-bottom:10px;
        padding-left:10px;
        padding-right:10px;
             background-color:#CEECF5; font-size:17.8px;
      
      }
.mainmenu ul li:hover{ background-color:#FFF; color:#CEECF5;}

อ่านยาก ชิบไม่เจอเลยครับ ทีหลังใส่ code tag ครอบดีกว่านะ

HTML

- อย่างแรก html ขาด div ปิดไปตัวนึงจาก code ที่ให้มา
- class ชื่อ centers ยังไม่ได้ระบุ
- tag a ควรอยู่ใน li ไม่ใช่ li อยู่ใน a
- เปลี่ยน tag b => strong

CSS

- .mainmenu ul => width: 100%, text-align: center,
- padding: 10px; เขียนแบบนี้จะดีกว่า
- padding ควรกำหนดให้ a, margin ควรกำหนดให้ li
- ถ้าใช้ float อย่าลืม clear, ถ้าไม่อยาก clear ให้ใช้ inline-block

ลองดูครับ