กระทู้: อยากให้เมนู (dropdown menu) อยู่ตรงกลางเวบค่ะ (CSS)
เพิ่งหัดเขียน CSS ค่ะ วันนี้มีปัญหารบกวนผู้รู้ด้วยนะ เพราะพยายามทำตามวิธีที่ค้นหาทางอินเตอร์เน็ตแล้ว แต่ก็ยังแก้ปัญหาไม่ได้ค่ะ คือพอแก้ตรงนี้ได้ มันกลับไปกระทบอีกที่นึงอ่ะค่ะ ทั้งตัวเมนูหลัก และตัวเมนูย่อยอ่ะค่ะ เลยแก้ไม่ได้สักที
1. ต้องการให้เมนูหลักแต่ละเมนู อยู่ตรงกลางเวบค่ะ
2. ต้องการกำหนดความกว้างของแต่อันให้เท่า ๆ กัน (ลองกำหนด width ที่ 73px แล้ว แต่ก็ยังไม่สมบูรณ์ค่ะ เพราะความห่างของแต่ละเมนู กลับไม่เท่ากันอีก)
3. อยากให้ sub menu ห้อยอยู่ตรงกลางของเมนเมนู แบบเวบนี้ค่ะ http://www.taylorgill.net/?page_id=2 ลองเอาเม้าส์ชี้ที่ portfolio นะคะ อยากได้แบบนั้นค่ะ ต้องทำยังไงค่ะ
แก้เองมาหลายวันแล้ว มึนมาก รบกวนด้วยนะคะ ขอบคุณมากค่ะ
นี่เป็นโค้ด html ค่ะ
<!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" />
<link rel="stylesheet" href="CSS/indexstyle.css" type="text/css" />
<script src="DropDownMenu.js" type="text/javascript"></script>
<style type="text/css">
<!--
body,td,th {
font-family: Arial, Helvetica, sans-serif;
color: #CCCCCC;
}
a:link {
color: #CCCCCC;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #CCCCCC;
}
a:hover {
text-decoration: none;
color: #FFFFFF;
}
a:active {
text-decoration: none;
color: #FFFFFF;
}
-->
</style></head><body>
<div id = "catskillfilms">
<div id = "header"></div>
<div ul id = "nav-top">
<li><a href ="index.html">home</a></li>
<li><a href ="about.html">about</a></li>
<li><a href ="services.html">services</a>
<ul>
<li><a href="#">services 1</a></li>
<li><a href="#">services 2</a></li>
<li><a href="#">services 3</a></li>
<li><a href="#">services 4</a></li>
</ul></li>
<li><a href ="showreel.html">showreel</a></li>
<li><a href ="gallery.html">gallery</a>
<ul>
<li><a href="#">gallery 1</a></li>
<li><a href="#">gallery 2</a></li>
</ul></li>
<li><a href ="workshops.html">workshops</a></li>
<li><a href ="store.html">store</a></li>
<li><a href ="award.html">awards</a></li>
<li><a href ="news.html">news</a></li>
<li><a href ="links.html">links</a></li>
<li><a href ="contacts.html">contact</a></li>
</ul>
</div>
นี่เป็นไฟล์ CSS ค่ะ
html, body {
margin:0;
padding:0;
height:100%;
background-color:#333333;
}#catskillfilms {
margin:0 auto;
width: 900px;
}#header {
background-color: #646768;
margin: 0px;
width: 900px;
height: 100%;
}#nav-top {
width: 900px;
margin: auto;
padding: 0;
background-image: url(../images/Menu2.png);
background-repeat:repeat-x;
background-position: center;
height: 2em;
line-height: 1.5em;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color:#CCCCCC;
text-decoration: none;
text-align: left;
}#nav-top li {
display: block;
float:left;
text-align:center;
margin: auto;
list-style: none;}
#nav-top li li {
width: 130px;
text-align:left;
}#nav-top ul {
list-style:none;
text-align: left;
}#nav-top li a {
display: block;
padding: 2.5px 2px 0px 5px;
text-indent:8px;
text-decoration: none;
}#nav-top li ul li a {
display: block;
padding: 1.5px 0px 1.5px 0px;}
#nav-top li ul {
display: none;
width: 10em; /* Width to help Opera out */
}#nav-top li:hover ul, #nav-top li.hover ul{
display: block;
position:absolute;
margin: 0;
padding: 7px 0px 7px 0px;
background-color: #333333;
border: 1px solid #CCCCCC;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-bottom-left-radius:10px;
-webkit-border-bottom-right-radius:10px;
}#nav-top li:hover li, #nav-top li.hover li {
float: none;
}#nav-top li:hover li, #nav-top li.hover li a {
color: #CCCCCC; }#nav-top li li a:hover {
color:#333333;
background-color:#999999;
}#content-text {
float:left;
width:500px;
height: 100%;
}#content-img {
float:right;
width:300px;
height: 100%;
background-color: #CCCCCC;
}#footer {
clear: both;
height: 40px;
background-color: #646768;
}#footer .nav-footer p {
font-family: Arial, Helvetica, sans-serif;
font-size: 12.5px;
color: #FFFFFF;
text-decoration: none;
text-align: center;
padding: 12px 0px 0px 0px;
}#footer .nav-footer {
font-family: Arial, Helvetica, sans-serif;
font-size: 12.5px;
color: #FFFFFF;
text-decoration: none;
text-align: center;
}#footer .nav-footer ul {
list-style:none;}
#footer .nav-footer li {
display:inline;
}#footer .nav-footer a {
text-decoration:none;
}#footer .nav-footer a:link {
font-size: 12.5px;
font-style: normal;
color: #FFFFFF;
}#footer .nav-footer a:visited {
color: #FFFFFF;
}#footer .nav-footer a:hover {
font-size: 12.5px;
color: #333333;
}
ไฟล์ js ค่ะ
sfHover = function() {
var sfEls = document.getElementById("nav-top").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls.onmouseover=function() {
this.className+=" hover";
}
sfEls.onmouseout=function() {
this.className=this.className.replace(new RegExp(" hover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);