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

เข้าสู่ระบบด้วยชื่อผู้ใช้ รหัสผ่าน และระยะเวลาในเซสชั่น

ThaiSEOBoard.comพัฒนาเว็บไซต์Programming[CSS] พบปัญหาการเขียน head รูปแบบ responsive ค่ะรบกวนช่วยทีนะคะ
หน้า: [1]   ลงล่าง
พิมพ์
ผู้เขียน หัวข้อ: [CSS] พบปัญหาการเขียน head รูปแบบ responsive ค่ะรบกวนช่วยทีนะคะ  (อ่าน 1081 ครั้ง)
0 สมาชิก และ 1 บุคคลทั่วไป กำลังดูหัวข้อนี้
SG14
หัวหน้าแก๊งเสียว
*

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

กระทู้: 1,398



ดูรายละเอียด เว็บไซต์
« เมื่อ: 05 พฤศจิกายน 2014, 15:35:55 »

พบปัญหาการเขียน head รูปแบบ responsive ค่ะ
พอเวลายืดหดจอ browser ข้างบนจะเหลือว่างๆไม่ยาวตามข้างล่าง
รบกวนช่วยทีนะคะ
ดังภาพค่ะ


css
โค๊ด:
#top{
background-color:#444444;
border-bottom: 3px solid #669fba;
width: 100%;
min-height: 50px;
float:left;

}
#welcome{
background-color:#e7e7e7;
width: 100%;
min-height: 40px;
float:left;

}
.menutop{
float:right;
margin: 2px 30px 0 0;

}
#logo {
float: left;
margin: 10px 0 5px 10px;
}

HTML
พอดีเขียนรูปแบบ tableค่ะ
โค๊ด:
<div id="top">
     <div id="logo"><img src="images/logo.png" border = "0" /></div>
   </div>
   <div id="welcome">   </div>
   <div class="menutop">
   </div>

<div id="container">
       <div id="breadcumb">User Control Panel</div>
    <div class="container_c">
              
           <table  border="0">
          <tr>
            <th colspan="3">Services</th>
          </tr>
          <tbody>
          <tr>
            <td><img src="images/order.jpg" width="85" height="85" /></td>
            <td><img src="images/chk_order.jpg" width="85" height="85"  /></td>
            <td><img src="images/backorder.jpg" width="85" height="85"  /></td>
          </tr>
          <tr>
            <td><img src="images/profile.jpg"  width="85" height="85" /></td>
            <td><img src="images/chg_pass.jpg"  width="85" height="85" /></td>
            <td><img src="images/logout.jpg"  width="85" height="85" /></td>
          </tr>
          </tbody>
        </table>
</div>
</div>
« แก้ไขครั้งสุดท้าย: 05 พฤศจิกายน 2014, 15:37:32 โดย SG14 » บันทึกการเข้า

nuningplus
สมุนแก๊งเสียว
*

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

กระทู้: 624



ดูรายละเอียด
« ตอบ #1 เมื่อ: 05 พฤศจิกายน 2014, 15:57:23 »

ผมลองดูใน Chrome กับ IE ก็ปกติดีนะครับ ยาวชิดขอบตลอด
บันทึกการเข้า
SG14
หัวหน้าแก๊งเสียว
*

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

กระทู้: 1,398



ดูรายละเอียด เว็บไซต์
« ตอบ #2 เมื่อ: 05 พฤศจิกายน 2014, 16:00:16 »

ผมลองดูใน Chrome กับ IE ก็ปกติดีนะครับ ยาวชิดขอบตลอด

สอบถามเพิ่มเติมค่ะ ปกติอันนี้ลองแบบ minimize ย่อจอลงมาหรือยังคะ
บันทึกการเข้า

wasantec
หัวหน้าแก๊งเสียว
*

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

กระทู้: 2,613



ดูรายละเอียด
« ตอบ #3 เมื่อ: 05 พฤศจิกายน 2014, 16:03:57 »

ทำไมไม่ใช้ div ครับ table มันเก่าแล้วครับ
บันทึกการเข้า
nuningplus
สมุนแก๊งเสียว
*

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

กระทู้: 624



ดูรายละเอียด
« ตอบ #4 เมื่อ: 05 พฤศจิกายน 2014, 16:15:19 »



ก็ minimize แล้วนะ หมายถึงตัว header tab ข้างบนใช่ปะครับ
บันทึกการเข้า
SG14
หัวหน้าแก๊งเสียว
*

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

กระทู้: 1,398



ดูรายละเอียด เว็บไซต์
« ตอบ #5 เมื่อ: 05 พฤศจิกายน 2014, 16:16:45 »

ทำไมไม่ใช้ div ครับ table มันเก่าแล้วครับ

ตรงๆค่ะเพิ่งหัดเขียน เลยเขียนไม่เป็น  wanwan012
บันทึกการเข้า

SG14
หัวหน้าแก๊งเสียว
*

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

กระทู้: 1,398



ดูรายละเอียด เว็บไซต์
« ตอบ #6 เมื่อ: 05 พฤศจิกายน 2014, 16:19:34 »



ก็ minimize แล้วนะ หมายถึงตัว header tab ข้างบนใช่ปะครับ


 Lips Sealed มาแบบนี้งงเลย ทำไมรันออกมาคนละแบบ wanwan031 wanwan031
บันทึกการเข้า

chanarit
Verified Seller
สมุนแก๊งเสียว
*

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

กระทู้: 649



ดูรายละเอียด
« ตอบ #7 เมื่อ: 05 พฤศจิกายน 2014, 16:58:02 »

รันดูครับ

http://jsfiddle.net/jt7qwehs/


#top{
   background-color:#444444;
   border-bottom: 3px solid #669fba;
   width: 100%;
   min-height: 50px;   
ลองเอา float:left; ออก
}
บันทึกการเข้า

SG14
หัวหน้าแก๊งเสียว
*

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

กระทู้: 1,398



ดูรายละเอียด เว็บไซต์
« ตอบ #8 เมื่อ: 06 พฤศจิกายน 2014, 14:15:50 »

แก้ไขจาก table เป็น ul li แล้วค่ะ
เจอปัญหาใหม่คือตอนย่อจอ footer บังรูปเมนู สี่เหลี่ยมอันสุดท้าย

cssของ footerค่ะ
อ้างถึง
#footer {
    clear:both;
    background:#444444;
   width: 100%;
   color:#faf7f2;
   position:fixed;
    bottom:0;
   font-size: 100%;
    display: block;
    }

« แก้ไขครั้งสุดท้าย: 06 พฤศจิกายน 2014, 15:45:15 โดย SG14 » บันทึกการเข้า

หน้า: [1]   ขึ้นบน
พิมพ์