ขยาย content หรือครับ

ต้องขยายทั้งบล็อกเลยครับงานนี้ เพราะรูปท่านใหญ่กว่า content

ต้องขยายไปถึง 980px

ลองแก้แบบนี้ กรณีไม่ได้สร้างแบคกราวด์

หาบรรทัดต่อไปนี้แล้ว แทรกโค้ดเอานะครับ

#page{
    margin:auto;
    padding-top:15px;
    text-align:left;
    width:980px;
}

#header, #neck, #belly, #leg, #footer{
    float:left;
    width:980px;
}

....

/* Header */

#header{
    background:#fff;
    padding-left:32px;
}

#header h1 a{
    color:#666;
    font-size:24px;
    padding-left:15px;    
}

#header h1 a:hover{
    color:#999;    
}

#header h2{
    font-size:12px;
    margin:5px 0px 5px 0px;
    padding-left:15px;
}

#coverimage{
    background:url(http://lordmitsunari.exteen.com/images/theme/love1%20copy_2.jpg) no-repeat;
    height:180px;
    width:730px;
    margin-bottom:5px;
    margin-left:15px;
}

...

#neck{
    background:#fff;
}

#neck .module{
    background:#535252;
    display:inline;
    float:left;
    margin:0px 0px 0px 15px;
    padding:2px 0px 5px 0px;
    width:950px;
    font-size:12px;
}

#belly{
    background:#fff;
}

#content{
    display:inline;
    float:left;
    margin:10px 15px 0px 15px;
    width:710px;
    /*Fix too large image makes content drop problem in IE*/
    overflow:visible !important;
    overflow:hidden;
}

...

/* Sidebars */

#sidebar, #sidebar2{
    background:#080707;
    display:inline;
    float:right;
    margin:5px 15px 0px 0px;
    width:210px;   
}

....

/* Leg Menu */
#leg{
    background:#fff;

} 

#leg .module{
    background:#535252;
    display:inline;
    float:left;
    margin:0px 0px 0px 15px;
    padding:2px 0px 5px 0px;
    width:950px;
}

 ...

#footer{
    background:#fff;
    height:60px;
}

#footer p{
    background:#EEE;
    border-top:1px solid #CCC;
    border-bottom:1px solid #CCC;
    font-size:10px;
    text-align:center;
    margin:5px 15px 0px 15px;
    padding:5px;    
}

สีเข้มๆ คือจุดที่ต้องแก้ เพื่อขยายบล็อก แล้วต้องทำโลโก้ใหม่ให้มีขนาดกว้าง 950px จะได้สวยๆ

หรือง่ายกว่านั้นท่านก็ย่อรูปที่แปะบนบล็อกให้กว้างน้อยกว่า 450px

palermos on 04 Jan 2008 (20:46)

#1

แก้

/* Header */

#header{
    background:#fff;
    padding-left:32px;
}

เป็น

/* Header */

#header{
    background:#fff;
    padding-top:32px;
}

palermos on 04 Jan 2008 (21:19)

#2

หนูไอว่าแปะรูปให้เล็กลงดีกว่านะคะ

แล้วค่อยทำลิ้งค์เป็นรูปขนาดเดิม 

[ i ]Rin★サテコ on 04 Jan 2008 (22:25)

#3

อีกวิธีก็คือเอา overflow ใน content ออก

#content{
    display:inline;
    float:left;
    margin:10px 15px 0px 15px;
    width:710px;
    /*Fix too large image makes content drop problem in IE*/
    overflow:visible !important;
    overflow:hidden;
}

แต่ขอแนะนำให้ย่อรูปดีกว่า(เหมือนสองท่านข้างบน)  เพราะยังมีคนใช้จอเล็กอยู่

ถ้าไม่อยากย่อที่ตััวรูป(เปลืองโควต้า ต้องอัพ 2 รูป) ก็ย่อตรงโค้ด html แทน คือเวลาใส่รูปให้เขียนโค้ดแบบนี้ <a href="..."><img src="..." width="ความกว้างที่ต้องการ"></a>

スニーカース on 07 Jan 2008 (00:48)

#4