<![CDATA[Share to the world - อยากให้เมนู (dropdown menu) อยู่ตรงกลางเวบค่ะ (CSS)]]> http://meewebfree.com/talk/viewtopic.php?id=7809 Wed, 28 Jul 2010 14:58:44 +0000 PunBB <![CDATA[Re: อยากให้เมนู (dropdown menu) อยู่ตรงกลางเวบค่ะ (CSS)]]> http://meewebfree.com/talk/viewtopic.php?pid=15256#p15256 ต้องฝึกเยอะๆ ผมจำได้ว่าช่วงแรกเป็นอะไรที่มึนมาก หลังๆค่อยๆหายมึนเพราะว่าอ่าน ebook เพื่อให้เข้าใจ propety แต่ละตัวมากขึ้นครับ และลองทำเยอะๆ (เยอะจริงๆ)

]]> Wed, 28 Jul 2010 14:58:44 +0000 http://meewebfree.com/talk/viewtopic.php?pid=15256#p15256 <![CDATA[Re: อยากให้เมนู (dropdown menu) อยู่ตรงกลางเวบค่ะ (CSS)]]> http://meewebfree.com/talk/viewtopic.php?pid=15255#p15255 ขอบคุณมากนะคะ เดี๋ยวจะลองทำดูค่ะ แต่ไม่แน่ใจว่าจะทำได้ไหม เพราะเพิ่งเขียน CSS อ่ะค่ะ แต่พอมองออกแล้วค่ะ ว่าจะกำหนดยังไง

ขอบคุณค่ะ

]]> Wed, 28 Jul 2010 11:28:20 +0000 http://meewebfree.com/talk/viewtopic.php?pid=15255#p15255 <![CDATA[Re: อยากให้เมนู (dropdown menu) อยู่ตรงกลางเวบค่ะ (CSS)]]> http://meewebfree.com/talk/viewtopic.php?pid=15252#p15252 แนะนำว่า ให้เพิ่ม class ในบางจุดที่เราต้องการ  config เป็นพิเศษเช่น

class="aaa bbb" แปลว่า จุดนั้นใช้ทั้ง class aaa และ bbb โดย bbb จะ override ทับ aaa ครับ โดยที่หากมี aaa ใช้ที่ตำแหน่งอื่นก็จะไม่กระทบกัน

สำหรับเรื่องเมนู css ปกติผมจะใช้ tab menu designer ช่วยครับ

]]> Wed, 28 Jul 2010 05:54:32 +0000 http://meewebfree.com/talk/viewtopic.php?pid=15252#p15252 <![CDATA[อยากให้เมนู (dropdown menu) อยู่ตรงกลางเวบค่ะ (CSS)]]> http://meewebfree.com/talk/viewtopic.php?pid=15240#p15240 เพิ่งหัดเขียน 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);

]]> Tue, 27 Jul 2010 12:09:44 +0000 http://meewebfree.com/talk/viewtopic.php?pid=15240#p15240