ThaiSEOBoard.com

พัฒนาเว็บไซต์ => Programming => หัวข้อเริ่มโดย: SG14 ใน 05 พฤศจิกายน 2014, 15:35:55

ชื่อเรื่อง: [CSS] พบปัญหาการเขียน head รูปแบบ responsive ค่ะรบกวนช่วยทีนะคะ
โพสต์โดย: SG14 ใน 05 พฤศจิกายน 2014, 15:35:55
พบปัญหาการเขียน head รูปแบบ responsive ค่ะ
พอเวลายืดหดจอ browser ข้างบนจะเหลือว่างๆไม่ยาวตามข้างล่าง
รบกวนช่วยทีนะคะ
ดังภาพค่ะ
(http://www.uppic.org/image-DB32_5459DF99.jpg)

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>
ชื่อเรื่อง: Re: [CSS] พบปัญหาการเขียน head รูปแบบ responsive ค่ะรบกวนช่วยทีนะคะ
โพสต์โดย: nuningplus ใน 05 พฤศจิกายน 2014, 15:57:23
ผมลองดูใน Chrome กับ IE ก็ปกติดีนะครับ ยาวชิดขอบตลอด
ชื่อเรื่อง: Re: [CSS] พบปัญหาการเขียน head รูปแบบ responsive ค่ะรบกวนช่วยทีนะคะ
โพสต์โดย: SG14 ใน 05 พฤศจิกายน 2014, 16:00:16
อ้างถึงจาก: nuningplus ใน 05 พฤศจิกายน 2014, 15:57:23
ผมลองดูใน Chrome กับ IE ก็ปกติดีนะครับ ยาวชิดขอบตลอด

สอบถามเพิ่มเติมค่ะ ปกติอันนี้ลองแบบ minimize ย่อจอลงมาหรือยังคะ
ชื่อเรื่อง: Re: [CSS] พบปัญหาการเขียน head รูปแบบ responsive ค่ะรบกวนช่วยทีนะคะ
โพสต์โดย: wasantec ใน 05 พฤศจิกายน 2014, 16:03:57
ทำไมไม่ใช้ div ครับ table มันเก่าแล้วครับ
ชื่อเรื่อง: Re: [CSS] พบปัญหาการเขียน head รูปแบบ responsive ค่ะรบกวนช่วยทีนะคะ
โพสต์โดย: nuningplus ใน 05 พฤศจิกายน 2014, 16:15:19
(http://image.ohozaa.com/i/f95/4zy3aC.png) (http://image.ohozaa.com/view2/xWYAhMHx1N1bezSh)

ก็ minimize แล้วนะ หมายถึงตัว header tab ข้างบนใช่ปะครับ
ชื่อเรื่อง: Re: [CSS] พบปัญหาการเขียน head รูปแบบ responsive ค่ะรบกวนช่วยทีนะคะ
โพสต์โดย: SG14 ใน 05 พฤศจิกายน 2014, 16:16:45
อ้างถึงจาก: wasantec ใน 05 พฤศจิกายน 2014, 16:03:57
ทำไมไม่ใช้ div ครับ table มันเก่าแล้วครับ

ตรงๆค่ะเพิ่งหัดเขียน เลยเขียนไม่เป็น  :wanwan012:
ชื่อเรื่อง: Re: [CSS] พบปัญหาการเขียน head รูปแบบ responsive ค่ะรบกวนช่วยทีนะคะ
โพสต์โดย: SG14 ใน 05 พฤศจิกายน 2014, 16:19:34
อ้างถึงจาก: nuningplus ใน 05 พฤศจิกายน 2014, 16:15:19
(http://image.ohozaa.com/i/f95/4zy3aC.png) (http://image.ohozaa.com/view2/xWYAhMHx1N1bezSh)

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

:-X มาแบบนี้งงเลย ทำไมรันออกมาคนละแบบ :wanwan031: :wanwan031:
ชื่อเรื่อง: Re: [CSS] พบปัญหาการเขียน head รูปแบบ responsive ค่ะรบกวนช่วยทีนะคะ
โพสต์โดย: chanarit ใน 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; ออก
}
ชื่อเรื่อง: Re: [CSS] พบปัญหาการเขียน head รูปแบบ responsive ค่ะรบกวนช่ว
โพสต์โดย: SG14 ใน 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;
    }
(http://www.uppic.org/image-212C_545B34E3.jpg)