ช่วยดู design หน้าสินค้าผมหน่อยครับ ว่าจัดดีแล้วหรือยัง

[kunnarakkup]

ช่วยดู design หน้าสินค้าผมหน่อยครับ ว่าจัดดีแล้วหรือยัง ที่เว็บข้างล่างอะครับ  กำลังมึนๆเลย สินค้ามีลายละเอียดหัวข้อแบ่งตามขนาดอีก พอเอามาใส่แล้วไม่สมดุลเลย จะปรับยังไงดีอะ  ละถามอีกอย่างตรง เมนูด้านบนอะครับ ตอนไม่ลงโฮสมันเป็นแถวเดียวกัน แต่ทำไมพอลงโฮสแล้วมีหัวข้อลิ้งตกมาอันนึงได้ไงอะ
http://kidart-sqi.com/3/coloring.php

[น้องพี่ต้าร์]

ผมว่าไม่ต้องทำภาพเป็นมัวๆไว้หรอกมังครับ มันทำให้ดูจืดๆ

[nong4534]

ภาพจางไม่สวยเลย เว็บไซต์ขายของสินค้าต้องเด่นที่สุดครับ

ถ้าอยากให้จาง เอาเป็นลากผ่านสินค้าแล้วจางน่าจะดีกว่า

หวังว่าคงได้ไอเดียนะครับ

[รุ่งเรืองตลอดกาล]

อันดับแรกภาพต้องชัดเจนก่อน

[i-here-yui]

ภาพไม่ต้องมัวอย่างที่หลายท่านบอก แล้วก็พื้นที่ระหว่างกรอบสินค้าแต่ละอันมันเหลือเยอะครับ
อาจจะขยายกรอบ ขยายรูปใหญ่ขึ้นได้อีก หรืออาจจะเพิ่มเป็นสินค้าแถวละ 4 ชิ้นก็ได้ครับ

ประมาณนี้ครับ สำหรับหน้านี้นะครับ

[seoland]

ดูเรียบง่ายดี ปรับแต่งอีกสักนิด สุดยอดเลยครับ

[BakKheab]

ตรง show item มันดูจืดๆไปนะครับ ผมว่าปรับ opacity เป็น 1
แล้วค่อยทำ Background ให้เข้มขึ้นนิดๆ เวลา hover น่าจะดูดีอีกแบบนะครับ

[kunnarakkup]

ภาพไม่ต้องมัวอย่างที่หลายท่านบอก แล้วก็พื้นที่ระหว่างกรอบสินค้าแต่ละอันมันเหลือเยอะครับ
อาจจะขยายกรอบ ขยายรูปใหญ่ขึ้นได้อีก หรืออาจจะเพิ่มเป็นสินค้าแถวละ 4 ชิ้นก็ได้ครับ

ประมาณนี้ครับ สำหรับหน้านี้นะครับ

ตอนแรกผมก็วางแถวละ 4 ครับ แต่ปัญหาเกิดคือ สินค้ามีแบ่งตาม ขนาดอีกครับ ทำให้วาง รวมกันไม่ได้เลย ตอนนี้กำลัง งงๆ ว่าสินค้ามันมีหัวข้อขนาดด้วยอะผมจะไปวางหรือแต่งยังไงดีอะ ดูมันเยอะเกิน ทั้งขนาดทั้งหัวข้อ บางหัวข้อก็ยาวเกิ๊น

[sys2528]

แน่นอนว่าภาพจางไม่สวยครับ  ลองใส่ BG สีขาวของกรอบข้างในครับ กรอบของรูปสินค้าอ่ะครับ  ลองใส่  4 คอลัมดูครับ ผมว่าน่าจะสวยนะ

[kunnarakkup]

ขอบคุณคำแนะนำนะครับ จะลองปรับดูตามที่บอกนะครับ ขอบคุณมากกก

[nst_nk]

เพิ่มขนาดภาพ ให้ติดๆกันกว่านี้อีกครับ
แล้วก็ยกเลิกภาพมัวครับ

[sangon]

สวยดีครับ แต่ เส้นขอบๆสินค้า ดูเยอะไป นิดนึง
ปล. ความคิดเห็น ส่วนตัวนะครับ ^^

[kunnarakkup]

ตอนนี้กำลังแย่ละครับเขียนไปเขียนมาทำเหมือนจะต้องเขียน css จัดตำแหน่งทุกๆ สินค้าเลย ทั้งตำแหน่งทั้งขนาด มีร้อย ชิ้น ก็ css สินค้า ร้อยตัว ตายๆ   ผมไม่ได้จัดใน ul อะ  ถ้าจัดใน ul จะดีกว่ามั้ยอะครับ ที่จัดแบบนี้เพราะจะต้องมาปรับบนมือถืออีกที ตอนแรกคิดว่าจะใช้ class ร่วมกันได้ ไปๆมาๆต้องมาจัดขนาดรูปอีกรูปไม่เท่ากัน กกลายเป็นโค้ดเยอะเลย

html

<div class="main_content"><!--content-->
<article class="text1">
<h1  class="name_head" >
<article class="t_color">Coloring</article></h1>

               <ul id="menu">
                  <li class='active'><a href='index.html'><span>Crayons</span></a></li>
                  <li><a href="about us.html"><span>Oil Pastels</span></a></li>
                  <li><a href="news.html"><span>Colorred Pencils</span></a></li>
                  <li><a href="contact_us.html"><span>Colorred Markers</span></a></li>
                  <li class='last'><a href="career.html"><span>Fancy</span></a></li>
               </ul>
                                 
<h6 class="head_size"><font color="#FF0000">Jumbo size :</font> Bigger in diameter make the jumbo size crayon practical and last longer.</h6>

<section class="Item_10"><!--Product10-->
<img  src="pic/mainproduct/1coloring/Crayons/J008(p).jpg">
<article class="Item_id">J008
</article>
<article class="Item_content">
8 Ct. Jumbo Crayons<br>
Packing :12/144<br>
Barcode : 8851934740089

</article>
</section><!--Product10-->


<section class="Item_11"><!--Product11-->
<img src="pic/mainproduct/1coloring/Crayons/R012(p).jpg">
<article class="Item_id">J012
</article>
<article class="Item_content">
8 Ct. Jumbo Crayons<br>
Packing :12/144<br>
Barcode : 8851934740089

</article>
</section><!--Product11-->


<section class="Item_12"><!--Product12-->
<img src="pic/mainproduct/1coloring/Crayons/XJ012.jpg">
<article class="Item_id">XJ012
</article>
<article class="Item_content">
8 Ct. Jumbo Crayons<br>
Packing :12/144<br>
Barcode : 8851934740089

</article>
</section><!--Product12-->
<h6 class="head_size_2"><font color="#FF0000">Supur jumbo size : </font>These crayons are easier for young children less than 5 yaers old to hold.</h6>

<section class="Item_13"><!--Product13-->
<img src="pic/mainproduct/1coloring/Crayons/SJ008(P).jpg">
<article class="Item_id">SJ008
</article>
<article class="Item_content">
8 Ct. Super Jumbo Crayons<br>
Packing : 12/72<br>
Barcode : 8851934760087

</article>
</section><!--Product13-->


<section class="Item_14"><!--Product14-->
<img  src="pic/mainproduct/1coloring/Crayons/SJO12(p).jpg">
<article class="Item_id">SJ012
</article>
<article class="Item_content">
12 Ct. Super Jumbo Crayons
Packing : 0/48
Barcode : 8851934715001

</article>
</section><!--Product14-->


<h6  class="head_size_3" >     
<font color="#FF0000">Crayons Classpack Assortment : </font>This bulk packaging not only provide a clear and vivid display, but also is convenient for a group of students to use and to keep. Ideal for group activities.
</h6>


<section class="Item_15"><!--Product15-->
<img  src="pic/mainproduct/1coloring/Crayons/J400_8(p).jpg">
<article class="Item_id">J400/8
</article>
<article class="Item_content">
400 Jumbo size crayons with 8 different colors 50 of each color
Packing : 0/6
Barcode :8851934500027

</article>
</section><!--Product15-->



<section class="Item_16"><!--Product16-->
<img  src="pic/mainproduct/1coloring/Crayons/R800_8(p).jpg">
<article class="Item_id">R800/8
</article>
<article class="Item_content">
800 Regular size crayons with 8 different color 100 of each color
Packing :0/6
Barcode : 8851934500010
</article>
</section><!--Product16-->

<section class="Item_17"><!--Product17-->
<img  src="pic/mainproduct/1coloring/Crayons/SJ200_8(p).jpg">
<article class="Item_id">SJ200/8
</article>
<article class="Item_content">
200 Super Jumbo size crayons with 8 different colors 25 of each color
Packing : 0/6
Barcode : 8851934500034
</article>
</section><!--Product17-->
<h1  class="name_head" ></h1>

<article class="page">หน้า :</article>
<ul class="list_number">
<li><a href="coloring.php">1</a></li>
<li><strong><a href="coloring2.php">[2]</a></strong></li>
</ul>
</article>
</div><!--content-->
</section><!--เนื้อหาหลัก-->


css


.Item_10 img{ padding-left:7%; border:3px   #FF99FF   double; padding-right:7%; margin-left:6%; margin-top:3%; width:70%; height:150px;  background-color:#FFF;}
.Item_10{ margin-top:-1%; border:3px #FF99FF solid; width:17%;padding-left:1%; padding-right:1%; padding-top:1%; padding-bottom:1%;opacity:1;
filter:alpha(opacity=40); -webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px; margin-left:8%;}

.Item_10:hover{opacity:100;
filter:alpha(opacity=100); border-color:#F39; background-color:#FCF;}


.Item_11 img{ padding-left:0%; border:3px   #FF99FF   double; padding-right:0%; margin-left:6%; margin-top:3%; width:85%; height:150px;  background-color:#FFF;}
.Item_11 { border:3px #FF99FF solid; width:17%;padding-left:1%; padding-right:1%; padding-top:1%; padding-bottom:1%; opacity:1;
filter:alpha(opacity=40);  margin-left:40%; margin-top:-31.1%; -webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;}

.Item_11:hover{opacity:100;
filter:alpha(opacity=100); border-color:#F39; background-color:#FCF;}


.Item_12 img{ padding-left:0%; padding-right:0%; border:3px   #FF99FF   double;   margin-left:6%; margin-top:3%; width:120px; height:150px; background-color:#FFF;}
.Item_12{ border:3px #FF99FF solid; width:18%;padding-left:1%; padding-right:1%; padding-top:1%; padding-bottom:1%; opacity:1;
filter:alpha(opacity=40); margin-left:70%; margin-top:-31.1%; -webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;}

.Item_12:hover{opacity:100;
filter:alpha(opacity=100); border-color:#F39; background-color:#FCF;}

.Item_13 img{ padding-left:0%; padding-right:0%; border:3px   #FF99FF   double;   margin-left:6%; margin-top:3%; width:120px; height:150px;  background-color:#FFF;}
.Item_13{ border:3px #FF99FF solid; width:18%;padding-left:1%; padding-right:1%; padding-top:1%; padding-bottom:1%; opacity:1;
filter:alpha(opacity=40); margin-left:8%; margin-top:-1%; -webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;}

.Item_13:hover{opacity:100;
filter:alpha(opacity=100); border-color:#F39; background-color:#FCF;}



.Item_14 img{ padding-left:0%; border:3px   #FF99FF   double; padding-right:0%; margin-left:6%; margin-top:3%; width:85%; height:150px;  background-color:#FFF;}
.Item_14 { border:3px #FF99FF solid; width:17%;padding-left:1%; padding-right:1%; padding-top:1%; padding-bottom:1%; opacity:1;
filter:alpha(opacity=40);  margin-left:40%; margin-top:-31.1%; -webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;}

.Item_14:hover{opacity:100;
filter:alpha(opacity=100); border-color:#F39; background-color:#FCF;}


.Item_15 img{ padding-left:0%; padding-right:0%; border:3px   #FF99FF   double;   margin-left:6%; margin-top:3%; width:120px; height:150px  }
.Item_15{ border:3px #FF99FF solid; width:18%;padding-left:1%; padding-right:1%; padding-top:1%; padding-bottom:1%; opacity:1;
filter:alpha(opacity=40); margin-left:8%; margin-top:-1%; -webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;}

.Item_15:hover{opacity:100;
filter:alpha(opacity=100); border-color:#F39; background-color:#FCF;}


.Item_16 img{ padding-left:0%; padding-right:0%; border:3px   #FF99FF   double;   margin-left:6%; margin-top:3%; width:120px; height:150px;  background-color:#FFF;}
.Item_16{ border:3px #FF99FF solid; width:18%;padding-left:1%; padding-right:1%; padding-top:1%; padding-bottom:1%; opacity:1;
filter:alpha(opacity=40); margin-left:40%; margin-top:-33%; -webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;}

.Item_16:hover{opacity:100;
filter:alpha(opacity=100); border-color:#F39; background-color:#FCF;}

.Item_17 img{ padding-left:0%; padding-right:0%; border:3px   #FF99FF   double;   margin-left:6%; margin-top:3%; width:120px; height:150px; background-color:#FFF;}
.Item_17{ border:3px #FF99FF solid; width:18%;padding-left:1%; padding-right:1%; padding-top:1%; padding-bottom:1%; opacity:1;
filter:alpha(opacity=40); margin-left:70%; margin-top:-33%; -webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;}

.Item_17:hover{opacity:100;
filter:alpha(opacity=100); border-color:#F39; background-color:#FCF;}