เว็บเลย์เอาเป็นเเบบ liquid
------
ปัญหา bg เเท๊บเมนู จะเป็นเเบบขอบมน
ผมจึงสไลด์ออกมา ขอบมนด้านซ้ายและขวา และตรงกลาง
ได้ภาพ bg มา 3ภาพ
ผมได้ทดลองโค็ดข้างล่างเเล้ว ตัว #tapmenu .right มันจะตกลงมาอะคับ
ไม่ทราบต้องจัดยังไง เเนะนําทีคับผม
นํามาใส่ html
<div id="tapmenu">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
css
<!--ห่อเมนู-->
#tapmenu {
font-size:15px;
margin: 0;
line-height:normal;
height: 30px;
width: 100%;
clear: both;
}
<!--ใส่ภาพbg ขอบเมนูซ้าย-->
#tapmenu .left {
background-image: url ( A.gif);
background-repeat: no-repeat;
height: 33px;
width: 53px;
float: left;
}
<!--ใส่ภาพbg เมนูตรงกลาง โดยกําหนดให้มัน 100% เพื่อให้มันยืดหดตามขนาดหน้าจอได้-->
#tapmenu .middle {
background-image: url (B.gif);
background-repeat: repeat-x;
width: 100%;
height: 33px;
}
<!--ใส่ภาพbg ขอบเมนูขวา-->
#tapmenu .right {
background-image: url ( C.gif);
background-repeat: no-repeat;
height: 33px;
width: 54px;
float: left;
}
ทำไม
#tapmenu .right {
background-image: url ( C.gif);
background-repeat: no-repeat;
height: 33px;
width: 54px;
float: left;
}
ไอสีแดงๆอะครับ :P
อ้างถึงจาก: GigBoT ใน 03 พฤศจิกายน 2010, 21:28:16
ทำไม
#tapmenu .right {
background-image: url ( C.gif);
background-repeat: no-repeat;
height: 33px;
width: 54px;
float: left;
}
ไอสีแดงๆอะครับ :P
ไม่ได้คับ มันตก
ลองเป็น
float: right;
แล้วยังตกหรอครับ หรือว่ายังไง -*-
อ้างถึงจาก: GigBoT ใน 03 พฤศจิกายน 2010, 21:45:48
ลองเป็น
float: right;
แล้วยังตกหรอครับ หรือว่ายังไง -*-
แบบนี่แหละครับ ลองยัง
หรือ<!--ใส่ภาพbg เมนูตรงกลาง โดยกําหนดให้มัน 100% เพื่อให้มันยืดหดตามขนาดหน้าจอได้-->
#tapmenu .middle {
background-image: url (B.gif);
background-repeat: repeat-x;
width: 100%; height: 33px;
}
ผมว่าใส่แบบความกว้างเป็น 100% แสดงว่าขอบอันขวามันก็ไม่มีที่อยู่มั้งครั้งมันถึงต้องดันตกขอบ
แต่ืี่เห็นใช้โค็ดคำสั่ง float มันน่าจะลอยอยู่ได้ :wanwan044: งงเหมือนกัน
ลองเปลี่ยน
width: 100%; เป็น
width: auto; ดูครับ เผื่อมันได้ :wanwan019: :wanwan019: :wanwan019:
(http://img64.imageshack.us/img64/8386/59470280.jpg)
ขอบคุงคับ
ได้นํา width: 100%; เป็น width: auto;
ไปทดลองอย่างรีบด่วน
มันไม่ตกอะคับ แต่ตรงกลางมันหด ไม่ยืด ตายด้านไปเลยอะคับ
---------
ภาพตัวอย่าง ที่ว่ามันตก เเค็ปมาให้ดูคับ
bgกลาง และ bgขวา
ตรงกลางมัน 100% = เต็มหน้าจอพอดี พอมันเจอ element แบบ fix width (อันซ้าย-ขวา) มันก็จะเบียดกันอะสิ
ลองลดขนาด width ตรงกลางดู เอาสัก 90% แล้วดูว่าขนาดมันพอดีหรือยัง ถ้ายังก็ ปรับ + หรือ - ไปอีก
:wanwan003: ลองใส่ float:left; ลงไป 3 อันเลยคับ แต่ว่า อันซ้ายกับขวาที่เปนขอบ กำหนดความกว้างเปน px ส่วนตรงกลางไม่ต้องกำหนดคับ แล้วก็จบด้วยการ clear:both;
ถ้าจะป้องกันปัญหามาตรฐานของบราวเซอร์อื่น ก็ให้กำหนด margin กับ padding ให้กับ element ด้วยคับ ก็จะมองเห็นเหมือนกันทุกบราวเซอร์ ... ลองๆ ดูคับ
เสนอโซลูชั่นแบบอื่นนะครับ
<html>
<head>
<title>Untitled-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
* {
margin:0;
padding:0;
}
#container {
width:90%;
margin:0 auto;
}
h1 {
font-size:24px;
font-weight:normal;
}
#menu {
margin-top:20px;
}
#menu ul {
background:#0090f8 url(images/bg_03.gif) no-repeat top right;
height:30px;
}
#menu ul li {
display:inline;
}
#menu ul li a{
height:30px;
display:block;
float:left;
padding:0 30px;
}
#menu ul li:first-child a{
background:url(images/bg_01.gif) no-repeat top left;
height:30px;
display:block;
padding:0 30px;
float:left;
}
#menu ul li a:hover{
background-color:#5fbbfd;
height:30px;
}
</style>
</head>
<body>
<div id="container">
<h1>Liquid Menu</h1>
<div id="menu">
<ul>
<li><a href="#">item 1</a></li>
<li><a href="#">item 2</a></li>
<li><a href="#">item 3</a></li>
</ul>
</div>
</div>
</body>
</html>
ตัวอย่างครับ
http://www.idea360media.com/test/menu.html
อ้างถึงจาก: oamman ใน 03 พฤศจิกายน 2010, 23:05:48
เสนอโซลูชั่นแบบอื่นนะครับ
<html>
<head>
<title>Untitled-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
* {
margin:0;
padding:0;
}
#container {
width:90%;
margin:0 auto;
}
h1 {
font-size:24px;
font-weight:normal;
}
#menu {
margin-top:20px;
}
#menu ul {
background:#0090f8 url(images/bg_03.gif) no-repeat top right;
height:30px;
}
#menu ul li {
display:inline;
}
#menu ul li a{
height:30px;
display:block;
float:left;
padding:0 30px;
}
#menu ul li:first-child a{
background:url(images/bg_01.gif) no-repeat top left;
height:30px;
display:block;
padding:0 30px;
float:left;
}
#menu ul li a:hover{
background-color:#5fbbfd;
height:30px;
}
</style>
</head>
<body>
<div id="container">
<h1>Liquid Menu</h1>
<div id="menu">
<ul>
<li><a href="#">item 1</a></li>
<li><a href="#">item 2</a></li>
<li><a href="#">item 3</a></li>
</ul>
</div>
</div>
</body>
</html>
ตัวอย่างครับ
http://www.idea360media.com/test/menu.html
สุดยอด
ขอบคุงคับ