ดูให้หน่อยครับ เขียน css ยังไง ให้เมนูอยู่ติดขอบ ซ้ายขวา นอกจากจะขยายข้อความอะครับ ที่จะปรับซิดซ้ายขวาเป็นวิวบนแท็บเล็ตนะครับ
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
ลองดูครับ
พัฒนาเว็บไซต์
