CSS ..ปัญหาหน้าเว็บยืดหดตามขนาดความกว้างจอ.. ////\\\\

เริ่มโดย นิติพงษ์, 03 พฤศจิกายน 2010, 21:25:00

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

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

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

นิติพงษ์

03 พฤศจิกายน 2010, 21:25:00


เว็บเลย์เอาเป็นเเบบ 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;
}

GigBoT

#1
03 พฤศจิกายน 2010, 21:28:16
ทำไม

#tapmenu .right  {
   background-image: url ( C.gif);
   background-repeat: no-repeat;
   height: 33px;
   width: 54px;
   float: left;
}

ไอสีแดงๆอะครับ   :P
[direct=https://pscclinic.com/breast-surgery/]ทำนม[/direct] - คลินิกเสริมหน้าอก PSC อันดับ 1 ของไทย
[direct=https://www.moveonmarketing.com/seo]รับทำ SEO สายขาว[/direct] |
[direct=https://www.cz.co.th/seo]รับทำ SEO[/direct]
[direct=https://www.nitithamclinic.com/laser-tattoo-removal-nitithamclinic/]ลบรอยสัก[/direct] - เลเซอร์ลบรอยสัก Pico Laser เห็นผลจริง มีรีวิวการันตี
[direct=https://www.ssdhosting.in.th/]WordPress Hosting[/direct] - โฮสติ้งคุณภาพ ที่ออกแบบมาเพื่อเว็บไซต์แบบ WordPress โดนเฉพาะ

นิติพงษ์

#2
03 พฤศจิกายน 2010, 21:42:48
อ้างถึงจาก: GigBoT ใน 03 พฤศจิกายน 2010, 21:28:16
ทำไม

#tapmenu .right  {
   background-image: url ( C.gif);
   background-repeat: no-repeat;
   height: 33px;
   width: 54px;
   float: left;
}

ไอสีแดงๆอะครับ   :P

ไม่ได้คับ มันตก

GigBoT

#3
03 พฤศจิกายน 2010, 21:45:48
ลองเป็น
float: right;


แล้วยังตกหรอครับ หรือว่ายังไง -*-
[direct=https://pscclinic.com/breast-surgery/]ทำนม[/direct] - คลินิกเสริมหน้าอก PSC อันดับ 1 ของไทย
[direct=https://www.moveonmarketing.com/seo]รับทำ SEO สายขาว[/direct] |
[direct=https://www.cz.co.th/seo]รับทำ SEO[/direct]
[direct=https://www.nitithamclinic.com/laser-tattoo-removal-nitithamclinic/]ลบรอยสัก[/direct] - เลเซอร์ลบรอยสัก Pico Laser เห็นผลจริง มีรีวิวการันตี
[direct=https://www.ssdhosting.in.th/]WordPress Hosting[/direct] - โฮสติ้งคุณภาพ ที่ออกแบบมาเพื่อเว็บไซต์แบบ WordPress โดนเฉพาะ

kiraoji

#4
03 พฤศจิกายน 2010, 22:00:15
อ้างถึงจาก: 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:


นิติพงษ์

#5
03 พฤศจิกายน 2010, 22:11:36


ขอบคุงคับ
ได้นํา  width: 100%;  เป็น   width: auto;
ไปทดลองอย่างรีบด่วน
มันไม่ตกอะคับ แต่ตรงกลางมันหด ไม่ยืด ตายด้านไปเลยอะคับ



---------

ภาพตัวอย่าง ที่ว่ามันตก เเค็ปมาให้ดูคับ
bgกลาง และ bgขวา 

g-ji

#6
03 พฤศจิกายน 2010, 22:39:05
ตรงกลางมัน 100% = เต็มหน้าจอพอดี พอมันเจอ element แบบ fix width (อันซ้าย-ขวา) มันก็จะเบียดกันอะสิ

ลองลดขนาด width ตรงกลางดู เอาสัก 90% แล้วดูว่าขนาดมันพอดีหรือยัง ถ้ายังก็ ปรับ + หรือ - ไปอีก

Kobsoft

#7
03 พฤศจิกายน 2010, 22:51:10
 :wanwan003: ลองใส่ float:left; ลงไป 3 อันเลยคับ แต่ว่า อันซ้ายกับขวาที่เปนขอบ กำหนดความกว้างเปน px ส่วนตรงกลางไม่ต้องกำหนดคับ แล้วก็จบด้วยการ clear:both;

ถ้าจะป้องกันปัญหามาตรฐานของบราวเซอร์อื่น ก็ให้กำหนด margin กับ padding ให้กับ element ด้วยคับ ก็จะมองเห็นเหมือนกันทุกบราวเซอร์ ... ลองๆ ดูคับ

oamman

#8
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

นิติพงษ์

#9
29 พฤศจิกายน 2010, 10:36:38
อ้างถึงจาก: 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

สุดยอด
ขอบคุงคับ
พิมพ์
ขึ้น หน้า1
การกระทำของผู้ใช้