ดูโค้ดCSSให้ทีครับ มันแสดงผลไม่เหมือนที่อยากให้เป็น

aitim · 01 มกราคม 2013, 10:42:58

http://pokpik.com/2013/test_gossip.php?id_gossip=2161

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

โค้ดหน้าแสดงผล

โค้ด เลือก

<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;}

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>

dekmv · 01 มกราคม 2013, 13:03:42

ขอความรู้ด้วยคนนะครับ ^^

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>
 
<div id="article">

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

TonHaDy · 01 มกราคม 2013, 14:12:58

ข้อความท่านไม่อยู่ใน <p> ครับ มันเลยไม่ขาวๆ

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

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

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>

TonHaDy · 01 มกราคม 2013, 22:33:16

ท่านสร้าง div มาอีกอัน ไว้นอก id="table"
แล้วตัวใหม่ที่สร้าง background-color: #133A59
แล้ว id="table" ใส่สีขาวแทนครับ

amjoey · 02 มกราคม 2013, 13:32:40

อ่า มาดูเผื่อเอาไว้ใช้นะครับ

yuseki · 02 มกราคม 2013, 13:52:45

ตอนนี้คือได้แล้วใช่มั้ยคะ

aitim · 02 มกราคม 2013, 19:30:38

ได้แล้วครับ Thanks ท่าน TonHaDy และ ท่าน zapdna คนละหนึ่งฉึก!