ThaiSEOBoard.com

พัฒนาเว็บไซต์ => Programming => ข้อความที่เริ่มโดย: ishay ที่ 13 กุมภาพันธ์ 2013, 12:04:01


หัวข้อ: จะจัดเรียงข้อมูลสไตล์นี้ ต้องเขียนโค๊ดยังไงครับ php
เริ่มหัวข้อโดย: ishay ที่ 13 กุมภาพันธ์ 2013, 12:04:01
พอดีออกแบบไว้แล้ว เห็นหลายๆเว็บใช้กันแต่คิดว่าน่าจะเป็นพวก เว็บแจกฟรี พวก jumla หรือ wordpress
พอดีรับงานมา เห็นว่าสวยดีเอามาใช้บ้าง แต่ยังงงกับกับดึงข้อมูล มาแสดงรูปแบบนี้ คือ div จะเรียงตามแนว column แต่สินค้าจะโชว์ แบบ 1 2 3 4 จากซ้ายไปขวา

พอดีทำดีไซน์เป็นงานหลักครับ Programing มือใหม่มากๆ

เว็บตัวอย่างครับ
http://i-shay.com/naf/product.php

ขอบคุณครับ

หัวข้อ: Re: จะจัดเรียงข้อมูลสไตล์นี้ ต้องเขียนโค๊ดยังไงครับ php
เริ่มหัวข้อโดย: dekmv ที่ 13 กุมภาพันธ์ 2013, 12:10:36
น่าจะอยู่ที่เขียน CSS นะครับ ... ดึงข้อมูลก็ธรรมดาครับ !!!  :wanwan003:

หัวข้อ: Re: จะจัดเรียงข้อมูลสไตล์นี้ ต้องเขียนโคŭ
เริ่มหัวข้อโดย: smapan ที่ 13 กุมภาพันธ์ 2013, 12:12:39
โค๊ด:
<div id="products_box">
		    <div class="colum_pd">
		    		    <div id="prod_box"></div>
		    		    <div id="prod_box"></div>
		    		    <div id="prod_box"></div>
		    		    <div id="prod_box"></div>
		    </div>
		    <div class="colum_pd">
		    		    <div id="prod_box"></div>
		    		    <div id="prod_box"></div>
		    		    <div id="prod_box"></div>
		    		    <div id="prod_box"></div>
		    </div>
		    <div class="colum_pd">
		    		    <div id="prod_box"></div>
		    		    <div id="prod_box"></div>
		    		    <div id="prod_box"></div>
		    		    <div id="prod_box"></div>
		    </div>		
		    <div class="colum_pd">
		    		    <div id="prod_box"></div>
		    		    <div id="prod_box"></div>
		    		    <div id="prod_box"></div>
		    		    <div id="prod_box"></div>
		    </div>	
</div>

เรียง 4 คอลั่ม แต่ละคอลั่มก็กำหนดให้ float left ครับ

หัวข้อ: Re: จะจัดเรียงข้อมูลสไตล์นี้ ต้องเขียนโค๊ดยังไงครับ php
เริ่มหัวข้อโดย: ishay ที่ 13 กุมภาพันธ์ 2013, 12:23:16
เว็บที่โชว์เป็นเว็บที่ผมตัดออกมาแล้วครับ เวลาเรียงเพื่อให้ลูกค้าดูจะเรียงแบบแมนนวลครับ สร้างคอล้มขึ้นมา 4 คอลัมน์ แล้วเรียงสินค้าจาก ที่ต้องการคือจากซ้ายไปขวา คล้ายๆรูปแบบตาราง แต่ด้วยความสูงของแต่ละสินค้าอาจจะไม่เท่ากัน ต้องดึงข้อมูลมายังไงครับ


รูปการเรียงสินค้าจะเป็น
1   2   3   4
5   6   7   8
9  10  11  12


แต่มันติดที่ DIV จะทำงานแบบ บนลงล่างไม่ได้เป็นแบบซ้ายไปขวา เลยงงๆอะครับว่าต้องดึง database มาแสดงยังไงดี  :P


หัวข้อ: Re: จะจัดเรียงข้อมูลสไตล์นี้ ต้องเขียนโค๊ดยังไงครับ php
เริ่มหัวข้อโดย: gubaaball ที่ 13 กุมภาพันธ์ 2013, 13:06:28
อ้างจาก: ishay ที่ 13 กุมภาพันธ์ 2013, 12:23:16
เว็บที่โชว์เป็นเว็บที่ผมตัดออกมาแล้วครับ เวลาเรียงเพื่อให้ลูกค้าดูจะเรียงแบบแมนนวลครับ สร้างคอล้มขึ้นมา 4 คอลัมน์ แล้วเรียงสินค้าจาก ที่ต้องการคือจากซ้ายไปขวา คล้ายๆรูปแบบตาราง แต่ด้วยความสูงของแต่ละสินค้าอาจจะไม่เท่ากัน ต้องดึงข้อมูลมายังไงครับ


รูปการเรียงสินค้าจะเป็น
1   2   3   4
5   6   7   8
9  10  11  12


แต่มันติดที่ DIV จะทำงานแบบ บนลงล่างไม่ได้เป็นแบบซ้ายไปขวา เลยงงๆอะครับว่าต้องดึง database มาแสดงยังไงดี  :P


<?
$numRow=0;
while($arr=mysql_fetch_assoc($res)){
$numRow++;
?>
<div style="float: left; width: 200px;">
  <div style=""><?=$arr['รูปภาพ'];?></div>
  <div style=""><?=$arr['รายละเอียด'];?></div>
</div>
<?
if($numRow==4){
$numRow=0;
echo <div style="clear: both;"></div>
}
}
?>

ใช้ float left เข้ามาช่วยให้วัตถุลอยด้านข้างได้ครับ หากวนลูปถึง 4 คอลัมภ์ก็ใช้ clear both เพื่อเริ่มบรรทัดใหม่ ผมเขียนรีบๆ น่ะครับไม่รู้ใช้ได้ไหม แนวทางประมาณนี้ลองแก้ดู

หัวข้อ: Re: จะจัดเรียงข้อมูลสไตล์นี้ ต้องเขียนโค๊ดยังไงครับ php
เริ่มหัวข้อโดย: ishay ที่ 13 กุมภาพันธ์ 2013, 13:21:15
ขอบคุณ คุณ gubaaball เด๋วจะกลับไปลองทำดูก่อนนะครับ

หัวข้อ: Re: จะจัดเรียงข้อมูลสไตล์นี้ ต้องเขียนโค๊ดยังไงครับ php
เริ่มหัวข้อโดย: xvlnw.com ที่ 13 กุมภาพันธ์ 2013, 13:29:51
ตามคุณ gubaaball บอกเลยครับ
ใช้ CSS เข้ามาช่วยครับ หากจะใช้เป็น Table ก็จะใช้หลักการคล้ายๆกันนี่แหละครับ

หัวข้อ: Re: จะจัดเรียงข้อมูลสไตล์นี้ ต้องเขียนโค๊ดยังไงครับ php
เริ่มหัวข้อโดย: Pink.in.th ที่ 13 กุมภาพันธ์ 2013, 13:35:08
อ้างจาก: gubaaball ที่ 13 กุมภาพันธ์ 2013, 13:06:28
อ้างจาก: ishay ที่ 13 กุมภาพันธ์ 2013, 12:23:16
เว็บที่โชว์เป็นเว็บที่ผมตัดออกมาแล้วครับ เวลาเรียงเพื่อให้ลูกค้าดูจะเรียงแบบแมนนวลครับ สร้างคอล้มขึ้นมา 4 คอลัมน์ แล้วเรียงสินค้าจาก ที่ต้องการคือจากซ้ายไปขวา คล้ายๆรูปแบบตาราง แต่ด้วยความสูงของแต่ละสินค้าอาจจะไม่เท่ากัน ต้องดึงข้อมูลมายังไงครับ


รูปการเรียงสินค้าจะเป็น
1   2   3   4
5   6   7   8
9  10  11  12


แต่มันติดที่ DIV จะทำงานแบบ บนลงล่างไม่ได้เป็นแบบซ้ายไปขวา เลยงงๆอะครับว่าต้องดึง database มาแสดงยังไงดี  :P


<?
$numRow=0;
while($arr=mysql_fetch_assoc($res)){
$numRow++;
?>
<div style="float: left; width: 200px;">
  <div style=""><?=$arr['รูปภาพ'];?></div>
  <div style=""><?=$arr['รายละเอียด'];?></div>
</div>
<?
if($numRow==4){
$numRow=0;
echo <div style="clear: both;"></div>
}
}
?>

ใช้ float left เข้ามาช่วยให้วัตถุลอยด้านข้างได้ครับ หากวนลูปถึง 4 คอลัมภ์ก็ใช้ clear both เพื่อเริ่มบรรทัดใหม่ ผมเขียนรีบๆ น่ะครับไม่รู้ใช้ได้ไหม แนวทางประมาณนี้ลองแก้ดู
อ้างจาก: xvlnw.com ที่ 13 กุมภาพันธ์ 2013, 13:29:51
ตามคุณ gubaaball บอกเลยครับ
ใช้ CSS เข้ามาช่วยครับ หากจะใช้เป็น Table ก็จะใช้หลักการคล้ายๆกันนี่แหละครับ

ครับผม ตามที่ท่านสองคนครับผม

แต่ดูจากเว็บที่ให้มา คิดว่าต้องใช้ jquery ในการจัดเรียงด้วยนะครับ  หรือถ้าท่านไหนคล่อง Css ก็สามารถทำได้ครับ (ไม่แน่ใจเหมือนกัน ^^) แต่คิดว่าใช้ Jquery จะง่ายกว่าครับ สังเกตุว่าความสูงของแต่ล่ะ Box จะไม่เท่ากันนะครับ  :wanwan017:

หัวข้อ: Re: จะจัดเรียงข้อมูลสไตล์นี้ ต้องเขียนโค๊ดยังไงครับ php
เริ่มหัวข้อโดย: gubaaball ที่ 13 กุมภาพันธ์ 2013, 13:45:37
Css น่ะแหละครับ หากมีเวลาก็ลองแกะ css เขาดูก็ได้ครับ view source ดูแล้วหา id หรือ class ที่อยู่ใน css  :P

http://i-shay.com/naf/css/web.css


SMF 1.1.21 | Simple Machines | ThaiSEOBoard.com