การปรับขนาดของความกว้าง aStore

แอบ Trace กันง่ายๆ ด้วย IE8 ครับ ให้กด F12 แล้วค่อยๆ ไล่ CSS ดู

จะเห็นว่า wrap คือขนาดของ aStore โดยมีค่าดังนี้

ขนาดของ wrap = ขนาดส่วนของ main + ขนาดส่วนของ sidebar

ดังนั้นหากเราต้องการปรับขนาด aStore ก็หมายถึงการปรับค่า width ของ wrap นั่นเองครับ

เช่นต้องการ ให้ aStore กว้าง 900 px
ดังนั้น Width อาจ set ได้ดังนี้
wrap = 900 px
sidebar = 200 px (ใช้ค่า Default สวยดีอยู่แล้ว)
ได้ค่า main = 700 px แต่ให้ Set main = 690 px แทน
เนื่องจากเว้นระยะห่างระหว่าง main และ sidebar ขนาด 10 px เพื่อความสวยงาม


และจะมีหลายส่วนที่ต้องแก้ขนาดตาม จึงขอตั้งขนาดเป็น 90 % ของ main ครับ ทั้งนี้ปรับได้ตามความเหมาะสม
จากนั้นให้แก้ไขตามจุดต่างๆ โดยเพิ่มโค้ดต่อไปนี้ครับ

1. แก้ไขที่ Global >>
#wrap
{
width:900px;
margin:0 auto;
text-align:left;
}

#main
{
width:690px;
}

2. แก้ไขที่ Category Page >>
table.products
{
width:90%; // หมายถึง width = 90% ของ Main ครับ
}

3. แก้ไขที่ Detail Page >>
table#detailheader
{
width:90%;
}
div#editorialReviews
{
width:90%;
}

4. แก้ไขที่ listmania >>
table#listmania
{
width:90%
}

5. แก้ไขที่ searchResults >>
table#searchResults
{
width:90%
}

การแทรกรูปภาพหรือ Banner ที่ส่วนหัวของ aStore

ไปแอบ View source ของคนอื่นเค้ามาครับ

ก็ให้เข้าไป Edit CSS ในส่วนของ Global เพิ่มข้อความตามนี้

body
{
margin-top: ความสูงของ Banner px;
background:url('ที่อยู่ของรูปภาพ ') no-repeat center top;
}

เช่น

body

{

margin-top:230px;

background:url('http://imgup.astoredir.com/images/20.jpg') no-repeat center top;

}

ตามรูปเลยครับ

Today Deals

New aStore

Today Deals for electronic consumer.

http://astore.amazon.com/today-deals02-20