ยินดีต้อนรับคุณ, บุคคลทั่วไป กรุณา เข้าสู่ระบบ หรือ ลงทะเบียน

เข้าสู่ระบบด้วยชื่อผู้ใช้ รหัสผ่าน และระยะเวลาในเซสชั่น
ThaiSEOBoard.comพัฒนาเว็บไซต์ProgrammingCSS ..ปัญหาหน้าเว็บยืดหดตามขนาดความกว้างจอ.. ////\\\\
« หน้าที่แล้ว ต่อไป »
หน้า: [1]   ลงล่าง
พิมพ์
ผู้เขียน หัวข้อ: CSS ..ปัญหาหน้าเว็บยืดหดตามขนาดความกว้างจอ.. ////\\\\  (อ่าน 12232 ครั้ง)
0 สมาชิก และ 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
Verified Seller
เจ้าพ่อบอร์ดเสียว
*

พลังน้ำใจ: 97
ออฟไลน์ ออฟไลน์

กระทู้: 3,439



ดูรายละเอียด เว็บไซต์
« ตอบ #1 เมื่อ: 03 พฤศจิกายน 2010, 21:28:16 »
ทำไม

#tapmenu .right  {
   background-image: url ( C.gif);
   background-repeat: no-repeat;
   height: 33px;
   width: 54px;
   float: left;
}
 
ไอสีแดงๆอะครับ   Tongue
บันทึกการเข้า
ทำนม - คลินิกเสริมหน้าอก PSC อันดับ 1 ของไทย
รับทำ SEO สายขาว |
รับทำ SEO
ลบรอยสัก - เลเซอร์ลบรอยสัก Pico Laser เห็นผลจริง มีรีวิวการันตี
WordPress Hosting - โฮสติ้งคุณภาพ ที่ออกแบบมาเพื่อเว็บไซต์แบบ 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;
}
 
ไอสีแดงๆอะครับ   Tongue

ไม่ได้คับ มันตก
บันทึกการเข้า
GigBoT
Verified Seller
เจ้าพ่อบอร์ดเสียว
*

พลังน้ำใจ: 97
ออฟไลน์ ออฟไลน์

กระทู้: 3,439



ดูรายละเอียด เว็บไซต์
« ตอบ #3 เมื่อ: 03 พฤศจิกายน 2010, 21:45:48 »
ลองเป็น
float: right;


แล้วยังตกหรอครับ หรือว่ายังไง -*-
บันทึกการเข้า
ทำนม - คลินิกเสริมหน้าอก PSC อันดับ 1 ของไทย
รับทำ SEO สายขาว |
รับทำ SEO
ลบรอยสัก - เลเซอร์ลบรอยสัก Pico Laser เห็นผลจริง มีรีวิวการันตี
WordPress Hosting - โฮสติ้งคุณภาพ ที่ออกแบบมาเพื่อเว็บไซต์แบบ WordPress โดนเฉพาะ
kiraoji
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 226
ออฟไลน์ ออฟไลน์

กระทู้: 1,681



ดูรายละเอียด
« ตอบ #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
เจ้าพ่อบอร์ดเสียว
*

พลังน้ำใจ: 231
ออฟไลน์ ออฟไลน์

กระทู้: 3,244



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

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

ถามความคิดเห็นเรื่อง Error Document
Kobsoft
Verified Seller
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 255
ออฟไลน์ ออฟไลน์

กระทู้: 2,566



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

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

พลังน้ำใจ: 12
ออฟไลน์ ออฟไลน์

กระทู้: 182



ดูรายละเอียด
« ตอบ #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]   ขึ้นบน
พิมพ์
« หน้าที่แล้ว ต่อไป »
กระโดดไป: