[CSS] พบปัญหาการเขียน head รูปแบบ responsive ค่ะรบกวนช่วยทีนะคะ

[SG14]

พบปัญหาการเขียน 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>

[nuningplus]

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

[SG14]

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

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

[wasantec]

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

[nuningplus]

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

[SG14]

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

ตรงๆค่ะเพิ่งหัดเขียน เลยเขียนไม่เป็น 

[SG14]

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

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

[chanarit]

รันดูครับ

http://jsfiddle.net/jt7qwehs/


#top{
   background-color:#444444;
   border-bottom: 3px solid #669fba;
   width: 100%;
   min-height: 50px;   
ลองเอา float:left; ออก
}

[SG14]

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

cssของ footerค่ะ

#footer {
    clear:both;
    background:#444444;
   width: 100%;
   color:#faf7f2;
   position:fixed;
    bottom:0;
   font-size: 100%;
    display: block;
    }