ยินดีต้อนรับคุณ, บุคคลทั่วไป กรุณา เข้าสู่ระบบ หรือ ลงทะเบียน

เข้าสู่ระบบด้วยชื่อผู้ใช้ รหัสผ่าน และระยะเวลาในเซสชั่น

ThaiSEOBoard.comพัฒนาเว็บไซต์Programmingจะจัดเรียงข้อมูลสไตล์นี้ ต้องเขียนโค๊ดยังไงครับ php
หน้า: [1]   ลงล่าง
พิมพ์
ผู้เขียน หัวข้อ: จะจัดเรียงข้อมูลสไตล์นี้ ต้องเขียนโค๊ดยังไงครับ php  (อ่าน 1893 ครั้ง)
0 สมาชิก และ 1 บุคคลทั่วไป กำลังดูหัวข้อนี้
ishay
Newbie
*

พลังน้ำใจ: 1
ออฟไลน์ ออฟไลน์

กระทู้: 16



ดูรายละเอียด
« เมื่อ: 13 กุมภาพันธ์ 2013, 12:04:01 »

พอดีออกแบบไว้แล้ว เห็นหลายๆเว็บใช้กันแต่คิดว่าน่าจะเป็นพวก เว็บแจกฟรี พวก jumla หรือ wordpress
พอดีรับงานมา เห็นว่าสวยดีเอามาใช้บ้าง แต่ยังงงกับกับดึงข้อมูล มาแสดงรูปแบบนี้ คือ div จะเรียงตามแนว column แต่สินค้าจะโชว์ แบบ 1 2 3 4 จากซ้ายไปขวา

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

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

ขอบคุณครับ
บันทึกการเข้า
dekmv
เจ้าพ่อบอร์ดเสียว
*

พลังน้ำใจ: 222
ออฟไลน์ ออฟไลน์

กระทู้: 3,264



ดูรายละเอียด เว็บไซต์
« ตอบ #1 เมื่อ: 13 กุมภาพันธ์ 2013, 12:10:36 »

น่าจะอยู่ที่เขียน CSS นะครับ ... ดึงข้อมูลก็ธรรมดาครับ !!!  wanwan003
บันทึกการเข้า
smapan
Global Moderator
เจ้าพ่อบอร์ดเสียว
*****

พลังน้ำใจ: 643
ออฟไลน์ ออฟไลน์

กระทู้: 8,272



ดูรายละเอียด เว็บไซต์
« ตอบ #2 เมื่อ: 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 ครับ
« แก้ไขครั้งสุดท้าย: 13 กุมภาพันธ์ 2013, 13:11:14 โดย smapan » บันทึกการเข้า

จูมล่าโฮส สยามโฮสเว็บ modty.com
รวมที่พัก เช่ารายวัน ที่พักเช่ารายเดือนมากที่สุดแจ่มจริง
***Tel 083-757-1515 ติดปัญหา Joomla ตรงไหนรับปรึกษาฟรี โทรมาเถอะครับ ถ้าตอบได้ช่วยแน่นอน ไม่มีกั้ก. ***
ishay
Newbie
*

พลังน้ำใจ: 1
ออฟไลน์ ออฟไลน์

กระทู้: 16



ดูรายละเอียด
« ตอบ #3 เมื่อ: 13 กุมภาพันธ์ 2013, 12:23:16 »

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


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


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

บันทึกการเข้า
gubaaball
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 182
ออฟไลน์ ออฟไลน์

กระทู้: 1,639



ดูรายละเอียด เว็บไซต์
« ตอบ #4 เมื่อ: 13 กุมภาพันธ์ 2013, 13:06:28 »

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


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


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


<?
$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 เพื่อเริ่มบรรทัดใหม่ ผมเขียนรีบๆ น่ะครับไม่รู้ใช้ได้ไหม แนวทางประมาณนี้ลองแก้ดู
« แก้ไขครั้งสุดท้าย: 13 กุมภาพันธ์ 2013, 13:08:16 โดย gubaaball » บันทึกการเข้า

ishay
Newbie
*

พลังน้ำใจ: 1
ออฟไลน์ ออฟไลน์

กระทู้: 16



ดูรายละเอียด
« ตอบ #5 เมื่อ: 13 กุมภาพันธ์ 2013, 13:21:15 »

ขอบคุณ คุณ gubaaball เด๋วจะกลับไปลองทำดูก่อนนะครับ
บันทึกการเข้า
xvlnw.com
Verified Seller
เจ้าพ่อบอร์ดเสียว
*

พลังน้ำใจ: 493
ออฟไลน์ ออฟไลน์

กระทู้: 5,905



ดูรายละเอียด เว็บไซต์
« ตอบ #6 เมื่อ: 13 กุมภาพันธ์ 2013, 13:29:51 »

ตามคุณ gubaaball บอกเลยครับ
ใช้ CSS เข้ามาช่วยครับ หากจะใช้เป็น Table ก็จะใช้หลักการคล้ายๆกันนี่แหละครับ
บันทึกการเข้า

Pink.in.th
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 288
ออฟไลน์ ออฟไลน์

กระทู้: 2,449



ดูรายละเอียด เว็บไซต์
« ตอบ #7 เมื่อ: 13 กุมภาพันธ์ 2013, 13:35:08 »

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


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


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


<?
$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 เพื่อเริ่มบรรทัดใหม่ ผมเขียนรีบๆ น่ะครับไม่รู้ใช้ได้ไหม แนวทางประมาณนี้ลองแก้ดู
ตามคุณ gubaaball บอกเลยครับ
ใช้ CSS เข้ามาช่วยครับ หากจะใช้เป็น Table ก็จะใช้หลักการคล้ายๆกันนี่แหละครับ

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

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

ผู้หญิง   บริการออกแบบเว็บไซต์  
ขายสคริปเกมส์เพียว ๆ ราคา 300 บาท, มีเกมส์ด้วยราคา 500 บาท ติดตั้งฟรี เลือก Theme ได้ครับ >> Theme 1   Theme 2
gubaaball
หัวหน้าแก๊งเสียว
*

พลังน้ำใจ: 182
ออฟไลน์ ออฟไลน์

กระทู้: 1,639



ดูรายละเอียด เว็บไซต์
« ตอบ #8 เมื่อ: 13 กุมภาพันธ์ 2013, 13:45:37 »

Css น่ะแหละครับ หากมีเวลาก็ลองแกะ css เขาดูก็ได้ครับ view source ดูแล้วหา id หรือ class ที่อยู่ใน css  Tongue

http://i-shay.com/naf/css/web.css
บันทึกการเข้า

หน้า: [1]   ขึ้นบน
พิมพ์