ช่วยแก้ css เมนูให้ความกว้างพอดีกับพื้นหลังหน่อยครับ

เริ่มโดย OZD!, 08 พฤษภาคม 2011, 18:35:06

หัวข้อก่อนหน้า - หัวข้อถัดไป

0 สมาชิก และ 1 ผู้มาเยือน กำลังดูหัวข้อนี้

พิมพ์
ลง หน้า1
การกระทำของผู้ใช้

OZD!

08 พฤษภาคม 2011, 18:35:06
ช่วยแก้ css ตรงMenuให้ความกว้างพอดีกับพื้นหลังและอยู่กึ่งกลาง หน่อยครับ
อันนี้ ส่วนของ css
โค้ด เลือก


<style type="text/css">
body { background:url(http://image.ohozaa.com/i/56d/q2zbg.png); background-position:center top; background-repeat:repeat-y;}

.menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font-family:verdana,geneva,arial,helvetica,sans-serif;
font-size:14px;
font-weight:bold;
color:8e8e8e;
}
.menu ul{
background:url(images/menu-bg.gif) top left repeat-x;
height:43px;
list-style:none;
margin:0;
padding:0;
}
.menu li{
float:left;
}
.menu li a{
color:#666666;
display:block;
font-weight:bold;
line-height:43px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.menu li a:hover{
color:#000000;
text-decoration:none;
}
.menu li ul{
background:#e0e0e0;
border-left:2px solid #0079b2;
border-right:2px solid #0079b2;
border-bottom:2px solid #0079b2;
display:none;
height:auto;
filter:alpha(opacity=95);
opacity:0.95;
position:absolute;
width:225px;
z-index:200;
/*top:1em;
/*left:0;*/
}
.menu li:hover ul{
display:block;
}
.menu li li {
display:block;
float:none;
width:225px;
}
.menu li ul a{
display:block;
font-size:12px;
font-style:normal;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover{
background:#949494;
color:#000000;
opacity:1.0;
filter:alpha(opacity=100);
}
.menu p{
clear:left;
}
.menu #current{
background:url(images/current-bg.gif) top left repeat-x;
color:#ffffff;
}

</style>

อันนี้ html
โค้ด เลือก
<div class="menu">
<ul>
<li><a href="#" >Home</a></li>
<li><a href="#" id="current">Products</a>
<ul>
<li><a href="#">Drop Down CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Vertical CSS Menus</a></li>
<li><a href="#">Dreamweaver Menus</a></li>
   </ul>
  </li>
<li><a href="/faq.php">FAQ</a>
                <ul>
                <li><a href="#">Drop Down CSS Menus</a></li>
                <li><a href="#">Horizontal CSS Menus</a></li>
                <li><a href="#">Vertical CSS Menus</a></li>
                <li><a href="#">Dreamweaver Menus</a></li>
                </ul>
          </li>
<li><a href="/contact/contact.php">Contact</a></li>
</ul>
</div>

OZD!

#1
08 พฤษภาคม 2011, 20:01:52
ดันครับ

ช่วยหน่อยครับบ  :P

พีพีเค

#2
08 พฤษภาคม 2011, 20:32:31
เว็บไหนล่ะตัว  :wanwan004:
==========================================
'Payment Issued' is the most beautiful words I've ever seen.

OZD!

#3
08 พฤษภาคม 2011, 21:05:59
โค้ด เลือก
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
body { background:url(http://image.ohozaa.com/i/56d/q2zbg.png); background-position:center top; background-repeat:repeat-y;}

.menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font-family:verdana,geneva,arial,helvetica,sans-serif;
font-size:14px;
font-weight:bold;
color:8e8e8e;
}
.menu ul{
background:url(images/menu-bg.gif) top left repeat-x;
height:43px;
list-style:none;
margin:0;
padding:0;
}
.menu li{
float:left;
}
.menu li a{
color:#666666;
display:block;
font-weight:bold;
line-height:43px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.menu li a:hover{
color:#000000;
text-decoration:none;
}
.menu li ul{
background:#e0e0e0;
border-left:2px solid #0079b2;
border-right:2px solid #0079b2;
border-bottom:2px solid #0079b2;
display:none;
height:auto;
filter:alpha(opacity=95);
opacity:0.95;
position:absolute;
width:225px;
z-index:200;
/*top:1em;
/*left:0;*/
}
.menu li:hover ul{
display:block;
}
.menu li li {
display:block;
float:none;
width:225px;
}
.menu li ul a{
display:block;
font-size:12px;
font-style:normal;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover{
background:#949494;
color:#000000;
opacity:1.0;
filter:alpha(opacity=100);
}
.menu p{
clear:left;
}
.menu #current{
background:url(images/current-bg.gif) top left repeat-x;
color:#ffffff;
}

</style>
</head>

<body>
<div class="menu">
<ul>
<li><a href="#" >Home</a></li>
<li><a href="#" id="current">Products</a>
<ul>
<li><a href="#">Drop Down CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Vertical CSS Menus</a></li>
<li><a href="#">Dreamweaver Menus</a></li>
   </ul>
  </li>
<li><a href="/faq.php">FAQ</a>
                <ul>
                <li><a href="#">Drop Down CSS Menus</a></li>
                <li><a href="#">Horizontal CSS Menus</a></li>
                <li><a href="#">Vertical CSS Menus</a></li>
                <li><a href="#">Dreamweaver Menus</a></li>
                </ul>
          </li>
<li><a href="/contact/contact.php">Contact</a></li>
</ul>
</div>
</body>
</html>

ก็อปโค้ดใส่ notepad เซฟ .html เปิด ดูได้เลยครับ
พิมพ์
ขึ้น หน้า1
การกระทำของผู้ใช้