ThaiSEOBoard.com

พัฒนาเว็บไซต์ => Programming => ข้อความที่เริ่มโดย: aitim ที่ 01 มกราคม 2013, 10:42:58


หัวข้อ: ดูโค้ดCSSให้ทีครับ มันแสดงผลไม่เหมือนที่อยากให้เป็น
เริ่มหัวข้อโดย: aitim ที่ 01 มกราคม 2013, 10:42:58
โค๊ด:
http://pokpik.com/2013/test_gossip.php?id_gossip=2161

จริงๆจะให้เนื้อหาข่าวเข้าไปอยู่ในกรอบสีขาว แต่มันหลุดกรอบครับ หาสาเหตุไม่เจอเลยจริงๆ
เพิ่งจับCSSได้ไม่นานครับ แก้ยังไง ขอความเมตตาแบ่งปันความรู้หน่อยครับ
 :wanwan008:

โค้ดหน้าแสดงผล
โค๊ด:
<div id="table">
  <p>
    <hd>:<? print"$title"; ?></hd>
    <br>
    <sd>โพสเมื่อ <? include("date.php");?> เปิดอ่าน <? print"$view"; ?></sd>
    <br><? print"$content"; ?>
  </p>
</div>

โค้ดCSS
โค๊ด:
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
#table {
      width:980px;padding-top:10px;margin-left:auto;margin-right:auto;background-color:#133a59;}
  #table p {
      width:92%;background-color:#FFF;margin-left:auto;margin-right:auto;padding: 10px 10px;}
  #table span {
      width:92%;}
  #table span.colp {
      width:60px;float:left;
  }
    #table span.colt {
      width:151px;height:65px;letter-spacing:0.5px;
  }
#table hd {color:#343434;margin-top:0%;margin-bottom:0%;font-size:60px;font-family:Fontcraft;}
#table sd {color:#666;margin-top:0%;margin-bottom:0%;font-size:30px;font-family:Fontcraft;}

หัวข้อ: Re: ดูโค้ดCSSให้ทีครับ มันแสดงผลไม่เหมือนที่อยากให้เป็น
เริ่มหัวข้อโดย: killer777 ที่ 01 มกราคม 2013, 11:40:50
<p>
    <hd>:<? print"$title"; ?></hd>
    <br>
    <sd>โพสเมื่อ <? include("date.php");?> เปิดอ่าน <? print"$view"; ?></sd>
    <br><? print"$content"; ?>
  </p>

ลองเปลี่ยน p เป็น div ตามข้างล่างดูครับ

<div>
    <hd>:<? print"$title"; ?></hd>
    <br>
    <sd>โพสเมื่อ <? include("date.php");?> เปิดอ่าน <? print"$view"; ?></sd>
    <br><? print"$content"; ?>
  </div>

หัวข้อ: Re: ดูโค้ดCSSให้ทีครับ มันแสดงผลไม่เหมือนที่อยากให้เป็น
เริ่มหัวข้อโดย: dekmv ที่ 01 มกราคม 2013, 13:03:42
ขอความรู้ด้วยคนนะครับ ^^  :wanwan031:

หัวข้อ: Re: ดูโค้ดCSSให้ทีครับ มันแสดงผลไม่เหมือนที่อยากให้เป็น
เริ่มหัวข้อโดย: zapdna ที่ 01 มกราคม 2013, 13:47:15
ลองใช้แบบนี้ดูครับ

อ้างถึง
body {
   margin-left: 0px;
   margin-top: 0px;
   margin-right: 0px;
   margin-bottom: 0px;
   background-color:#133a59;
}
#table {
      width:980px;padding-top:10px;margin-left:auto;margin-right:auto;background-color:#fff;}
  #table p {
      width:92%;background-color:#FFF;margin-left:10px;margin-right:auto;padding: 10px 10px;}
  #table span {
      width:92%;}
  #table span.colp {
      width:60px;float:left;
  }
    #table span.colt {
      width:151px;height:65px;letter-spacing:0.5px;
  }
#table hd {color:#343434;margin-top:0%;margin-bottom:0%;font-size:60px;font-family:Fontcraft;}
#table sd {color:#666;margin-top:0%;margin-bottom:0%;font-size:30px;font-family:Fontcraft;}

ส่วนไฟล์หน้าหลักเพิ่มบรรทัด <br /> หลัง <body> ก่อน <div id="table"> จะทำให้เห็นอยู่ในบล็อคครับ

### ข้างล่างนี้เป็นตัวที่ลองปรับแต่งตามแบบของผมนะครับ แก้ให้ใช้ H1 H2 แทนเพื่อผลในทาง SEO น่าจะดีกว่าใช้ตั้งเอง .. ####

อ้างถึง
*{padding:0; margin:0;}
body {   
   background-color:#133a59;   
}
h1 {padding-left:20px; color:#343434; font-size:40px; font-family:Fontcraft;}
h2 {padding-left:20px; color:#666; font-size:20px; font-family:Fontcraft;}
p {
      width:92%;background-color:#FFF;margin-left:auto;margin-right:auto;padding: 10px 10px; font-size:15px;}
#article {
      width:980px;padding-top:10px;margin-left:auto;margin-right:auto;background-color:#fff;}


ส่วนไฟล์แสดงผลปกติเวลาพิมพ์ข้อมูลใส่ฐานข้อมูลในแต่ละวรรคให้ใส่ <p>เนื้อหาแต่ละอัน</p> ลงไปแทนการใช้ <br />ส่วนรูปก็ใส่ title="$title" ต่อท้าย alt="$title" จะดีขึ้นนะครับ

อ้างถึง
<body>
&nbsp;
<div id="article">
  
    <H1>:<? print"$title"; ?></H1>
    <H2>โพสเมื่อ <? include("date.php");?> เปิดอ่าน <? print"$view"; ?> ครั้ง</H2>  
    <p><? print"$content"; ?></p>&nbsp;  
</div>
&nbsp;

หัวข้อ: Re: ดูโค้ดCSSให้ทีครับ มันแสดงผลไม่เหมือนที่อยากให้เป็น
เริ่มหัวข้อโดย: TonHaDy ที่ 01 มกราคม 2013, 14:12:58
ข้อความท่านไม่อยู่ใน <p> ครับ มันเลยไม่ขาวๆ

วิธีแก้โดยความคิดส่วนตัว
1. ท่านใช้ <!DOCTYPE HTML>  แต่ว่า code html อื่นๆท่านยังเปนแบบเดิมอยู่
2. ใช้ Tags ครอบ เนื้อข่าวทั้งหมดก่อน เช่น <div> <article> *อันหลังนี้เพราะเหนท่านใช้ HTML5
3. ไม่ต้องใช้ <br> ให้ใช้ <p>แทน แต่ละ วรรคของข้อความ จะได้ SEO ดีกว่า

ถ้าไม่เกิดประโยชน์ ขอให้ข้ามไป ไม่อยากกินมาม่ารับปีใหม่ ขอบคุงครับ

หัวข้อ: Re: ดูโค้ดCSSให้ทีครับ มันแสดงผลไม่เหมือนที่อยากให้เป็น
เริ่มหัวข้อโดย: aitim ที่ 01 มกราคม 2013, 20:55:06
ลองปรับตามคำแนะนำก็ยังไม่ได้ครับ ผมแก้ข้อมูลในฐานข้อมูลจาก<br>เป็น<p>แล้วนะครับ
มันแสดงออกมาเป็นกล่องขาวหลายๆกล่อง ลองเข้าไปดูครับ จนปัญญาจริงๆครับ งงกับCSSมาก
ขอคำแนะนำหน่อยครับ
โค้ดCSS
โค๊ด:
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
#table {
      width:980px;padding-top:10px;margin-left:auto;margin-right:auto;background-color:#133a59;}
  #table p {
      width:92%;background-color:#FFF;margin-left:auto;margin-right:auto;padding: 10px 10px;font-size:15px;}
#table hd {color:#343434;margin-top:0%;margin-bottom:0%;font-size:60px;font-family:Fontcraft;}
#table sd {color:#666;margin-top:0%;margin-bottom:0%;font-size:30px;font-family:Fontcraft;}
#table H1 {color:#343434;margin-top:0%;margin-bottom:0%;font-size:40px;font-family:Fontcraft;}
#table H2 {color:#666;margin-top:0%;margin-bottom:0%;font-size:20px;font-family:Fontcraft;}
#article {
      width:980px;padding-top:10px;margin-left:auto;margin-right:auto;background-color:#fff;}

โค้ดแสดงผล
โค๊ด:
<? include('config.inc.php');
$sql = "select * from gossip where id_gossip ='$id_gossip'"; 
$dbquery = mysql_db_query($dbname, $sql);
$result = mysql_fetch_array($dbquery);
$sql2 = "UPDATE gossip SET view = view+1 WHERE id_gossip ='$id_gossip'";
include('bbcode.php'); ?><!DOCTYPE HTML>
<html>
<title><? print"$title"; ?>- ดารา นักแสดง นักร้อง เบื้องหลังกองถ่าย สัมภาษณ์ คลิปหลุด ดาราฮอลีวูด</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="readtable.css" />
<head>
<meta charset="utf-8" />
</head>
<body><div id="table">
  <p>
  <hd>:<? print"$title"; ?></hd><br>
  <sd>โพสเมื่อ <? include("date.php");?> เปิดอ่าน <? print"$view"; ?></sd>
    <? print"$content"; ?>
  </p>
</div>
</body>
</html>

หัวข้อ: Re: ดูโค้ดCSSให้ทีครับ มันแสดงผลไม่เหมือนที่อยากให้เป็น
เริ่มหัวข้อโดย: TonHaDy ที่ 01 มกราคม 2013, 22:33:16
ท่านสร้าง div มาอีกอัน ไว้นอก id="table"
แล้วตัวใหม่ที่สร้าง background-color: #133A59
แล้ว  id="table" ใส่สีขาวแทนครับ

หัวข้อ: Re: ดูโค้ดCSSให้ทีครับ มันแสดงผลไม่เหมือนที่อยากให้เป็น
เริ่มหัวข้อโดย: amjoey ที่ 02 มกราคม 2013, 13:32:40
อ่า มาดูเผื่อเอาไว้ใช้นะครับ :wanwan016:

หัวข้อ: Re: ดูโค้ดCSSให้ทีครับ มันแสดงผลไม่เหมือนที่อยากให้เป็น
เริ่มหัวข้อโดย: yuseki ที่ 02 มกราคม 2013, 13:52:45
ตอนนี้คือได้แล้วใช่มั้ยคะ  :wanwan021:

หัวข้อ: Re: ดูโค้ดCSSให้ทีครับ มันแสดงผลไม่เหมือนที่อยากให้เป็น
เริ่มหัวข้อโดย: aitim ที่ 02 มกราคม 2013, 19:30:38
ได้แล้วครับ Thanks ท่าน TonHaDy และ ท่าน zapdna คนละหนึ่งฉึก!
 :wanwan013:


SMF 1.1.21 | Simple Machines | ThaiSEOBoard.com