ถามxxxรู ทั้งหลายเกี่ยวกับ css
ช่วยวิจารณ์หน่อยครับ ว่าเป็นไงมั่งผมมีการใช้อะไรผิด ใช้มากเกินไป ขอบคุณครับ
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.view {
border: 1px solid #073447;
left: 0px;
padding: 1px;
width: 300px;
display:table;
}
.view .head{
background-color:#073447;
height:25px;
color:#ffffff;
font-weight:bold;
font-family: Georgia, "Times New Roman", serif;
font-size: 14px;
}
.view .head div{
padding:4px;
text-align:center;
}
.view .head .no ,.view .head .edit{
width:40px;
float:left;
border-right: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
}
.view .head .name{
width:140px;
float:left;
border-right: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
}
.view .head .del{
width:40px;
float:left;
border-bottom: 1px solid #ffffff;
}
div .list{
}
.view .list .no,.view .list .edit{
text-align:center;
background-color:#6666FF;
float:left;
width:48px;
border-right: 1px solid #ffffff;
}
.view .list .name{
padding-left:7px;
background-color:#6666FF;
float:left;
width:141px;
border-right: 1px solid #ffffff;
}
.view .list .del{
width:53px;
float:left;
border-bottom: 1px solid #ffffff;
text-align:center;
background-color:#6666FF;
}
</style>
</head>
<body>
<div class="view">
<div class="head">
<div class="no">No.</div>
<div class="name">Name</div>
<div class="edit">Edit</div>
<div class="del">Del</div>
</div>
<div class="list">
<div class="no">1.</div>
<div class="name">Name</div>
<div class="edit">Edit</div>
<div class="del">Del</div>
</div>
<div class="list">
<div class="no">2.</div>
<div class="name">Name</div>
<div class="edit">Edit</div>
<div class="del">Del</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.view {
border: 1px solid #073447;
left: 0px;
padding: 1px;
width: 300px;
display:table;
}
.view .head{
background-color:#073447;
height:25px;
color:#ffffff;
font-weight:bold;
font-family: Georgia, "Times New Roman", serif;
font-size: 14px;
}
.view .head div{
padding:4px;
text-align:center;
}
.view .head .no ,.view .head .edit{
width:40px;
float:left;
border-right: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
}
.view .head .name{
width:140px;
float:left;
border-right: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
}
.view .head .del{
width:40px;
float:left;
border-bottom: 1px solid #ffffff;
}
div .list{
}
.view .list .no,.view .list .edit{
text-align:center;
background-color:#6666FF;
float:left;
width:48px;
border-right: 1px solid #ffffff;
}
.view .list .name{
padding-left:7px;
background-color:#6666FF;
float:left;
width:141px;
border-right: 1px solid #ffffff;
}
.view .list .del{
width:53px;
float:left;
border-bottom: 1px solid #ffffff;
text-align:center;
background-color:#6666FF;
}
</style>
</head>
<body>
<div class="view">
<div class="head">
<div class="no">No.</div>
<div class="name">Name</div>
<div class="edit">Edit</div>
<div class="del">Del</div>
</div>
<div class="list">
<div class="no">1.</div>
<div class="name">Name</div>
<div class="edit">Edit</div>
<div class="del">Del</div>
</div>
<div class="list">
<div class="no">2.</div>
<div class="name">Name</div>
<div class="edit">Edit</div>
<div class="del">Del</div>
</div>
</div>
</body>
</html>
left จะ ใช้ร่วมกับ position ครับ
นอกนั้นก็ดูเหมือนจะไม่มีอะไร ถ้ามันทำงานได้
ส่วนมันจะเกินความจำเป็นหรือไม่ แนะนนำให้ทดสอบบน Firefox ที่ติดตั้ง Firebug ครับ มันจะบอกเราได้ว่ามีอะไรเกินความจำเป็นหรือไม่
เออ คือว่า อ.มี ตย dl dt dd ป่าวครับ เหอๆ
<dl>
<dt>Caption</dt>
<dd>Data</dd>
</dl>
ประมาณนี้
หลักๆ คือบันจะมีโครงสร้างคล้ายๆ list (li) แหละครับ และก็ยังจำเป็นต้องกำหนด CSS เหมือนเดิม แต่ที่ผมแนะนำ ก็เพื่อให้ใช้ tag ได้ถูกความหมามากกว่า
ปล. tag ทุกตัว สามารถใช้แทนกันได้ โดยการกำหนด CSS ให้เป็นไปตามค่าพื้นฐานของ tag ที่ต้องการ เพียงแต่โดยหลักการนั้น เราควรใช้ tag ให้ถูกต้องตามหน้าที่ของมัน ตามข้อกำหนด (Web Standard)