ปกติผมเขียนโค้ดแบบนี้ในไฟล์ index.php  เลย  พอจะมีทางไหมที่ไม่ต้องออกแบบใหม่และไม่ต้องไปยุ่งกับพวก css ละ


<style>
A:link { color: #000000; text-decoration:none}
A:visited {color: #000000; text-decoration: none}
A:hover {color: #CC0000}
.style1 {color: #000000}
.cols_container{
width: 750px;
overflow:hidden;
}
.item{
width:240px;
margin:5 5px 5 5;
float:left;
}
.end_col{
margin:5;
}
</style>


<div style="width:750px; border:solid 0px #CCC; list-style:none; margin:0px 0px 0px 5px;">

<?php query_posts('cat=30&showposts=3'); ?>

<?php
$di = 1;
$ditem = 1;
$cols = 3; // columns.
while( have_posts() )
{     
    the_post();
    if( $di == 1 )
    {
        echo '<div class="cols_container">';
    }
    if( $di == $cols )
    {
        $col_right =  'end_col';
    }   
    ?>

<div class="item <?php echo $col_right; ?>">
<div class="cols_thumbnail"><BR>
<div style="float:left; width:240px; padding:2px; border:solid 0px #09F; margin:0px 5px 5px 0px;">
<center><a href="<?php the_permalink() ?>"><?php the_post_thumbnail( array(290,170) ); ?>
</a>

<div style="width:127px; background-color:#FF0000; color:#FFFFFF; padding:2px; list-style:none; margin:7px 0px 0px 0px; border-radius:5px;">
<li style="float:center; margin:0px 0px 0px 0px;">
<h3><?php the_field('status'); ?></h3></li>
<li style="float:right;"></li>
<div style="clear:both;"></div>
</div>

</center>
</div>
<div align="left" style="float:left; width:240px; padding:2px; border: solid 0px #9C0; font-weight:bold; margin:0px 5px 5px 15px;">
<b>รหัสสินค้า :<font color="#CC0000">&nbsp;&nbsp;<?php $value = simple_fields_value('code');
echo $value;?></font></b>
<br>
<font size="3" color="#000000"><?php the_title(); ?></font>

<br>
<font color="#000000"><?php $value = simple_fields_value('Details_Home');
echo $value;?></font>

<br>
<b>ราคา :<font color="#CC0000">&nbsp;&nbsp;<?php $value = simple_fields_value('Cost');
echo $value;?>&nbsp;&nbsp;บาท</font></b>
</div>
</div>
       
    </div>
    <?php
    if( $di == $cols )
    {
        echo '</div>'; // <div class="cols_container">
        $di = 0;
    }
    $di++;
    $ditem++;
}
if( ( $ditem - 1 ) % $cols != 0 )
{
    echo "</div>"; // <div class="cols_container">
}
?>
</div>

ถ้ากำหนดใน Css จะไม่ง่ายกว่าหรอครับ >__<"

@media only screen and (max-width: 320px) {
    .clear { clear: both; }
}

<div class="clear ">.....</div>

ครอบอีกทีนึง 

ทำไมไม่เขียนแยกเป็นไฟล์ css ออกมาแล้ว แล้วก็ใช้ class ในการกำหนด style แทนครับ
จากนั้นก็มาดูเรื่องนี้ http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

ตามนี้ครับ 

อ้างถึงจาก: romance69 ใน 30 มีนาคม 2015, 12:31:05
ถ้ากำหนดใน Css จะไม่ง่ายกว่าหรอครับ >__<"

@media only screen and (max-width: 320px) {
    .clear { clear: both; }
}

<div class="clear ">.....</div>

ครอบอีกทีนึง 

ขอบคุณครับ

คือแบบนี้ครับ   พอดีผมไม่เก่งเรื่องโค้ดเลย  ที่ทำได้ก็พอถูก ๆ ไถ ๆ และสังเกตุการแสดงผลของโค้ดเอา 

และหลัก ๆ  ผมใช้โปรแกรม  artisteer ในการออกแบบ theme  มันสร้างไฟล์  css  มาให้ยาวยืด  เลยไม่รู้ตำแหน่งในการแก้ การแทรก ว่าจะแทรกลงไปยัง ณ ตำแหน่งไหน   

ก็เลยจำเป็นต้องใช้โค้ด div งู ๆ ปลา ๆ  ในการแสดงผลรูปแบบต่าง ๆ ในไฟล์ index.php  ไปเลย 

พอจะเครื่องมือไหนที่จะสร้าง theme แบบ responive ได้บ้าง นอกจาก artisteer  บ้างเหรอเปล่าครับ 

เครื่องมือสร้าง responive ผมไม่ทราบเหมือนกันครับ ส่วนมากใช้ bootstrap กับเขียนเองมากกว่าครับ
จริงๆ อยากแนะนำให้กำหนด Css ในไฟล์เลยจะง่ายต่อการแก้ไขครับผม

เขียนเป็นไฟล์ CSS ดีกว่าครับ เป็นระเบียบ กลับมาแก้ไขทีหลังก็ง่าย + คนมาโมทีหลังเราก็สะดวกกว่า

อ้างถึงจาก: bonkbonk ใน 30 มีนาคม 2015, 13:10:14
เขียนเป็นไฟล์ CSS ดีกว่าครับ เป็นระเบียบ กลับมาแก้ไขทีหลังก็ง่าย + คนมาโมทีหลังเราก็สะดวกกว่า

theme ตามลายเซ็นต์ของท่าน  เขียนเองเหรอครับ 

คือถ้าจะเขียนใช้เองก็ต้องโมเองเอาครับ ลองศึกษาที่นี่ดู http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

ลองศึกษา bootstrap  ดูครับ แล้วก็ Incute js ที่เป็นไฟล์ min.js (ประมาณนี้  <script src="js/bootstrap.min.js"></script>) แล้วใช้ class col-xx
ลองเข้าไปศึกษาดูคับ http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/

มีครับ จากที่ผมดูคราวๆ อย่ากำหนดเป็นค่า px
ความจริงควรจะแยกเป็น mobile รับค่าแล้วหาดูมันมีวิธี redirect case มือถือเท่านั้นครับ

ลองหาพวก simple responsive template แล้วเอา html css  js มาศึกษาดูครับ จะเข้าใจได้ง่ายขึ้น

ใช้ css bootstrap เลยครับ เดี๋ยวนี้ผมใช้จนขี้เกียจเขียน css เองเลยทีเดียว

ขอบคุณทุกท่านนะครับที่แนะนำ 

ว่าแต่  bootstrap  ตัวนี้เป็นที่นิยมในปัจจุบันเหรอเปล่าครับ  กับการทำเว็บแบบ responsive

น่าจะเป็นตัวที่ฮิต ที่สุดตอนนี้นะคับ ใช้งานง่าย พัฒนาต่อเนื่อง มีครบครั้นการใช้งาน 

bootstrap ปัจจุบันเป็น version 3.3.4 และใกล้จะเปิด version 4 แล้วครับ

เป็น framework ที่นิยมใช้งานที่สุดแล้วมั้งครับ อันนี้ไม่แน่ใจ
แต่มันตัดปัญหาการออกแบบหน้าจอหมดไปเลย หันไปสนใจด้าน coding อย่างเดียวอ่ะครับ ไม่งั้นงานออกแบบเสียเวลาเยอะเกินไปไม่ทันกินครับผม

และที่สำคัญ ถ้าอยากได้สวยหรูก็มี theme add-on ให้เลือกใช้เยอะเลยครับ ทั้งฟรีและเสียเงิน
ส่วนวิธีใช้ก็ ดูได้ในเว็บเอาเลยครับ ที่ http://getbootstrap.com/
แรกๆ อาจสับสนนิดหน่อย อ่านฟังก์ชั่นให้ครบ ทีนี้ก็ง่ายหล่ะครับ ถ้าลืมก็ไปหาดูวิธีใช้ในเว็บนั่นแหล่ะครับ

ที่สำคัญมัน mobile frienly ครับ ***

bootstrap ครับแนะนำเลย ดูแล้วสำหรับท่านไม่น่าจะยากครับ

ไม่ bootstrap (http://getbootstrap.com/) ก็ foundation (http://foundation.zurb.com/) ครับ
ใช้ framework งานเสร็จไวครับ เขียนเองเหนื่อยครับ

อ้างถึงจาก: ptteppawong ใน 30 มีนาคม 2015, 12:25:29


ปกติผมเขียนโค้ดแบบนี้ในไฟล์ index.php  เลย  พอจะมีทางไหมที่ไม่ต้องออกแบบใหม่และไม่ต้องไปยุ่งกับพวก css ละ


<style>
A:link { color: #000000; text-decoration:none}
A:visited {color: #000000; text-decoration: none}
A:hover {color: #CC0000}
.style1 {color: #000000}
.cols_container{
width: 750px;
overflow:hidden;
}
.item{
width:240px;
margin:5 5px 5 5;
float:left;
}
.end_col{
margin:5;
}
</style>


<div style="width:750px; border:solid 0px #CCC; list-style:none; margin:0px 0px 0px 5px;">

<?php query_posts('cat=30&showposts=3'); ?>

<?php
$di = 1;
$ditem = 1;
$cols = 3; // columns.
while( have_posts() )
{     
    the_post();
    if( $di == 1 )
    {
        echo '<div class="cols_container">';
    }
    if( $di == $cols )
    {
        $col_right =  'end_col';
    }   
    ?>

<div class="item <?php echo $col_right; ?>">
<div class="cols_thumbnail"><BR>
<div style="float:left; width:240px; padding:2px; border:solid 0px #09F; margin:0px 5px 5px 0px;">
<center><a href="<?php the_permalink() ?>"><?php the_post_thumbnail( array(290,170) ); ?>
</a>

<div style="width:127px; background-color:#FF0000; color:#FFFFFF; padding:2px; list-style:none; margin:7px 0px 0px 0px; border-radius:5px;">
<li style="float:center; margin:0px 0px 0px 0px;">
<h3><?php the_field('status'); ?></h3></li>
<li style="float:right;"></li>
<div style="clear:both;"></div>
</div>

</center>
</div>
<div align="left" style="float:left; width:240px; padding:2px; border: solid 0px #9C0; font-weight:bold; margin:0px 5px 5px 15px;">
<b>รหัสสินค้า :<font color="#CC0000">&nbsp;&nbsp;<?php $value = simple_fields_value('code');
echo $value;?></font></b>
<br>
<font size="3" color="#000000"><?php the_title(); ?></font>

<br>
<font color="#000000"><?php $value = simple_fields_value('Details_Home');
echo $value;?></font>

<br>
<b>ราคา :<font color="#CC0000">&nbsp;&nbsp;<?php $value = simple_fields_value('Cost');
echo $value;?>&nbsp;&nbsp;บาท</font></b>
</div>
</div>
       
    </div>
    <?php
    if( $di == $cols )
    {
        echo '</div>'; // <div class="cols_container">
        $di = 0;
    }
    $di++;
    $ditem++;
}
if( ( $ditem - 1 ) % $cols != 0 )
{
    echo "</div>"; // <div class="cols_container">
}
?>
</div>

จริงๆเขียนเว็บสำหรับบนมือถือแยกกออกจากไฟล์ dextop ก็ดีนะครับ โค้ดจะลดความยุ่งยากได้เยอะอยู่อย่าง เว็บ mthai ก็เขียนแยก

ลอง ศึกษาเรื่อง media query ดูครับ

ถ้าไม่อยากยุ่งยากก็ใช้ Bootstrap คับ ถ้าอยากเขียนเองจริงก็ใช้ media query เอา เช่น

@media (min-width:320px) {
  .item{
    width:100%;
  }
}
@media (min-width: 768px) {
  .item{
    width:240px;
  }
}
@media (min-width: 992px) {
  .item{
    width:240px;
  }
}
@media (min-width: 1200px) {
  .item{
    width:240px;
  }
}