|
 |
| |
คำสั่ง CSS จัดตำแหน่ง อยากไห้ช่วยดูไห้หน่อยครับว่าใช้คำสั่งอะไร มีรูปไห้ดูด้านไหนครับ |
| |
 |
|
|
 |
 |
|
เอา css เดิมมาดูหน่อยนะครับ ^_^
|
 |
 |
 |
 |
| Date :
2013-04-12 15:17:33 |
By :
pokultra |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
ใน css ใช้พวก padding-left ครับ ถ้าใน div ก็ใช้ง่าย ๆ
<div style="padding-left:300px">My String</div>
|
| |
|
|
| |
| Date :
2013-04-12 15:18:52 |
By :
mr.win |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ถ้าเมนูด้านบนอยู่ใน DIV1
และเน้อหา ที่อยู่ตรงกลางอยู่ DIV2
ก็ให้กำหนด css ของ DIV1 ให้กว้างเท่ากับ DIV2 และกำหนดระยะขอบทั้งซ้ายขวาแบบ auto ครับ
สมมติว่า DIV2 กว้าง 960px
ก็กำหนดให้ DIV1 ดังนี้
<div id="div1" style="width:960px;margin:auto">
..........
</div>
ผลลัพธ์ที่ได้ DIV เมนูจะอยู่เยื้องขวาเท่ากับ เนื้อหาครับ
|
| |
|
|
| |
| Date :
2013-04-12 15:34:34 |
By :
Naizan |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
Code (PHP)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TEST CSS HORIZONTAL MENU</title>
<style type="text/css">
#navcontainer {
background:#060;
overflow:hidden;
padding:5px;
}
#navcontainer ul {
margin: 0 auto;
margin-left:30px; /* เพิ่มลดตรงนี้จะให้ใกล้ ไกลแค่ไหน*/
padding: 0;
list-style-type: none;
text-align: center;
background:#CCC;
}
#navcontainer ul li {
float:left;
display: inline;
}
#navcontainer ul li a {
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #036;
}
#navcontainer ul li a:hover {
color: #fff;
background-color: #369;
}
</style>
</head>
<body>
<div id="navcontainer">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</body>
</html>
|
| |
|
|
| |
| Date :
2013-04-12 16:29:07 |
By :
pokultra |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
|
| |
|
|
| |
| Date :
2013-04-12 16:56:55 |
By :
mr.win |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
เป็นแบบนี้ละครับ
Code ครับ
.menu{
display:block;
width:auto;
height:31px;
list-style:inside none;
padding:0; margin:0;
border:1px solid;
margin-left:290px;
}
.menu li{list-style:inside none; padding:0; margin:0; display:block; position:relative;}
.menu li a{
outline:none;
display:block;
margin:0;
padding:9px 15px;
font:bold 11px Tahoma, sans-serif;
text-decoration:none;
border-left:1px solid transparent;
border-right:1px solid transparent;
}
.drop{position:relative; z-index:2;}
.menu li:hover a.drop{
color:#000;
background:#fff;
border:1px solid #000;
border-bottom:0 none;
margin-top:1px;
padding-bottom:10px;
height:12px;
}
.menu ul{
display:none;
position:absolute;
min-width:180px;
list-style:inside none;
margin:0;
margin-top:31px;
padding:10px 0px;
background:#fff;
border:1px solid #000;
z-index:1;
}
.menu ul li{margin:0; padding:0; list-style:inside none; border:0 none; float:none;}
.menu ul li a{
float:none; padding:5px;
font-weight:normal; color:#777;
border:0 none;
border-bottom:1px solid #eee;
border-top:1px solid transparent;
}
.menu ul li:last-child a{border-bottom:1px solid transparent;}
.menu ul li a:hover{
border:0 none;
border-top:1px solid;
border-bottom:1px solid ;
}
.menu ul a{white-space:nowrap;}
.menu li ul{display:none;}
.menu li:hover > ul{display:block; }
.dropdown-box{
display:none;
position:absolute; width:auto;
margin:0; margin-top:31px; padding:10px;
background:#fff;
border:1px solid #000;
z-index:1;
}
.dropdown-box p{font:11px/140% Tahoma, sans-serif; color:#777; text-align:justify; margin:0;}
.menu li:hover > .dropdown-box{display:block;}
/* Align styles */
.left li{float:left;}
.left li a{float:left;}
.left li:hover a.drop{margin-left:-1px; padding-left:16px;}
.left ul, .left .dropdown-box{left:-1px;}
.right li{float:right;}
.right li a{float:right;}
.right li:hover a.drop{margin-right:-1px; padding-right:16px;}
.right ul, .right .dropdown-box{right:-1px;}
/* Color styles */
.blue{
background-color:#006699;
background-repeat: repeat-x;
border-bottom:#99CCFF solid 1px;
box-shadow: 0 0 2px rgba(0, 0, 0, 1);
position:fixed;
table-layout:auto;
left:0;
width:100%;
top:0px;
}
.blue li a{color:#fff;}
.blue li a:hover{background-color: #003366; color:#99CCFF; border-color:#FFF; height:12px;}
.blue ul li a:hover{background-color:#006699; border-top-color:#006699; border-bottom-color:#006699; height:15px;}
|
| |
|
|
| |
| Date :
2013-04-12 17:14:55 |
By :
JindaCpe8 |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
เอา code html ที่อยู่มาดูด้วยนะครับ
|
| |
|
|
| |
| Date :
2013-04-12 17:16:33 |
By :
pokultra |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
Code (HTML)
<meta http-equiv="Content-Type" content="text/html; charset=windows-874">
<ul id="menu" class="menu blue left">
<li><a href="index.php" >หน้าแรก</a></li>
<li><a href="#" class="drop">ห้องสมาร์ทโฟน </a>
<ul>
<?
$sqlCatShow="select * from category where cat_id < 8 order by cat_id asc ";
$queryCatShow=mysql_query($sqlCatShow);
while($resutCatShow=mysql_fetch_array($queryCatShow))
{
?>
<li><a href="index.php?home=from&CatID=<?=$resutCatShow["cat_id"];?>"><?=$resutCatShow["name"];?></a></li>
<? } ?>
</ul>
</li>
<li><a href="#" class="drop">ระบบปฏิบัติการ</a>
<ul>
<?
$sql="select * from category where cat_id > 7 and cat_id < 11 order by cat_id asc ";
$query=mysql_query($sql);
while($resut=mysql_fetch_array($query))
{
?>
<li><a href="index.php?home=from&CatID=<?=$resut["cat_id"];?>"><?=$resut["name"];?></a></li>
<? } ?>
</ul>
</li>
<li><a href="#" class="drop">รีวิวสมาร์ทโฟน</a>
<ul>
<?
$sql1="select * from category where cat_id > 10 and cat_id < 18 order by cat_id asc ";
$query1=mysql_query($sql1);
while($resut1=mysql_fetch_array($query1))
{
?>
<li><a href="index.php?home=from&CatID=<?=$resut1["cat_id"];?>"><?=$resut1["name"];?></a></li>
<? } ?>
</ul>
</li>
<? if($_SESSION['mem_id']==""){ ?>
<li><a href="#" class="drop">เข้าใช้งาน</a>
<ul>
<li><a href="index.php?home=login">เข้าสู่ระบบ</a></li>
<li><a href="index.php?home=register">สมัครสมาชิก</a></li>
</ul>
</li>
<? } ?>
</ul>
|
| |
|
|
| |
| Date :
2013-04-12 17:18:51 |
By :
JindaCpe8 |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
แต่มันปรับไป ซ้าย กับ ขวาได้ ไม่มีใครพอจะรู้บ้างหรอครับ
|
| |
|
|
| |
| Date :
2013-04-12 18:17:11 |
By :
JindaCpe8 |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ส่วนที่แก้ไข
.menu{
display:block;
width:auto;
height:31px;
list-style:inside none;
padding:0; margin:0;
border:1px solid;
margin-left:290px;
}
และ
.blue{
background-color:#006699;
background-repeat: repeat-x;
border-bottom:#99CCFF solid 1px;
box-shadow: 0 0 2px rgba(0, 0, 0, 1);
position:fixed;
table-layout:auto;
left:0;
width:100%;
top:0px;
}
จะได้โค๊ดตามนี้
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TEST CSS HORIZONTAL MENU</title>
<style type="text/css">
.menu{
display:block;
width:960px;
height:31px;
list-style:inside none;
padding:0; margin:0;
border:1px solid;
margin:auto;
}
.menu li{list-style:inside none; padding:0; margin:0; display:block; position:relative;}
.menu li a{
outline:none;
display:block;
margin:0;
padding:9px 15px;
font:bold 11px Tahoma, sans-serif;
text-decoration:none;
border-left:1px solid transparent;
border-right:1px solid transparent;
}
.drop{position:relative; z-index:2;}
.menu li:hover a.drop{
color:#000;
background:#fff;
border:1px solid #000;
border-bottom:0 none;
margin-top:1px;
padding-bottom:10px;
height:12px;
}
.menu ul{
display:none;
position:absolute;
min-width:180px;
list-style:inside none;
margin:0;
margin-top:31px;
padding:10px 0px;
background:#fff;
border:1px solid #000;
z-index:1;
}
.menu ul li{margin:0; padding:0; list-style:inside none; border:0 none; float:none;}
.menu ul li a{
float:none; padding:5px;
font-weight:normal; color:#777;
border:0 none;
border-bottom:1px solid #eee;
border-top:1px solid transparent;
}
.menu ul li:last-child a{border-bottom:1px solid transparent;}
.menu ul li a:hover{
border:0 none;
border-top:1px solid;
border-bottom:1px solid ;
}
.menu ul a{white-space:nowrap;}
.menu li ul{display:none;}
.menu li:hover > ul{display:block; }
.dropdown-box{
display:none;
position:absolute; width:auto;
margin:0; margin-top:31px; padding:10px;
background:#fff;
border:1px solid #000;
z-index:1;
}
.dropdown-box p{font:11px/140% Tahoma, sans-serif; color:#777; text-align:justify; margin:0;}
.menu li:hover > .dropdown-box{display:block;}
/* Align styles */
.left li{float:left;}
.left li a{float:left;}
.left li:hover a.drop{margin-left:-1px; padding-left:16px;}
.left ul, .left .dropdown-box{left:-1px;}
.right li{float:right;}
.right li a{float:right;}
.right li:hover a.drop{margin-right:-1px; padding-right:16px;}
.right ul, .right .dropdown-box{right:-1px;}
/* Color styles */
.blue{
background-color:#006699;
background-repeat: repeat-x;
border-bottom:#99CCFF solid 1px;
box-shadow: 0 0 2px rgba(0, 0, 0, 1);
table-layout:auto;
}
.blue li a{color:#fff;}
.blue li a:hover{background-color: #003366; color:#99CCFF; border-color:#FFF; height:12px;}
.blue ul li a:hover{background-color:#006699; border-top-color:#006699; border-bottom-color:#006699; height:15px;}
</style>
</head>
<body>
<ul id="menu" class="menu blue left">
<li><a href="index.php" >หน้าแรก</a></li>
<li><a href="#" class="drop">ห้องสมาร์ทโฟน </a>
</li>
<li><a href="#" class="drop">ระบบปฏิบัติการ</a>
</li>
<li><a href="#" class="drop">รีวิวสมาร์ทโฟน</a>
</li>
</ul>
</body>
</html>
|
| |
|
|
| |
| Date :
2013-04-17 16:46:24 |
By :
Naizan |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
| |
|
 Load balance : Server 05
|
