รบกวนเพิ่มแท็ก

Submitted by wd on 12 November, 2006 - 17:57. Etc.

รบกวน webmaster ด้วยครับ
คือ อยากให้เพิ่มแท็ก <pre> ใน Filterd HTML น่ะครับ
จะทำให้การแสดงผลได้ชัดเจนขึ้น

และถ้าได้โมดูล Book ก็จะยิ่งดีใหญ่ เวลาเขียนเรื่องเป็นตอน ๆ จะทำให้อ่านง่ายขึ้นน่ะครับ

ขอบคูณครับ

» login or register to post comments | 245 reads

จัดให้

Submitted by webmaster on 12 November, 2006 - 23:50.

เรียบ ร้อยแล้วครับ ทีแรกคิดว่าจะเขียน story สั้นๆ กัน แล้ว search ด้วย taxonomy แต่เห็นเรื่อง rsync ที่โพสต์แล้ว คงต้องใช้ book กันแล้วแหละ รวมเล่มซะเลย ^_^

อ้อ รวมทั้ง <pre> ด้วยครับ ผมโพสต์ไปก็รำคาญเหมือนกัน ที่ใช้ <pre> ไม่ได้ :P

» login or register to post comments

แก้ content หลุด

Submitted by wd on 13 November, 2006 - 02:40.

ตอนนี้ผมใช้ไฟร์ฟอกซ์ (บน Windows :P)
ผมเจอ content หลุดลงข้างล่างครับ (ไม่รู้ว่าท่านอื่นเป็นไหม)

ลองแกะดู ได้เรื่องดังนี้ครับ

ธีม newsportal เขาใช้เทคนิคในการทำธีม คือ
เอา #left-side เป็น float: left และ #right-side เป็น float: right
ตรงกลางคือ #content เขากำหนด margin ให้เว้นช่องให้มากกว่าความกว้างของ #left-side และ #right-side อยู่เล็กน้อย
เวลาเพจถูกแสดง #content จะไหลขึ้นไปตรงกลาง ได้เต็มช่องพอดี
ซึ่งวิธีนี้มีข้อเสียตรงที่ว่า ถ้าเจอสไตล์ที่เป็น clear: both
content ตรงกลางจะถูก #left-side และ #right-side ดักไว้
ไม่สามารถไหลขึ้นไปได้

วิธีแก้ คงต้องแฮ็กธีมครับ คือเราต้องสร้างแท็กมาครอบเนื้อหาใน #content
เพื่อป้องกันตัวเองจาก #left-side และ #right-side ดังนี้ครับ

ปรับ style.css เพิ่มไอดี #content_wrapper
$ vi themes/newsportal/styles.css

...
#content_wrapper {
  display: table;
}
...

ปรับ page.tpl.php แทรกไอดี #content_wrapper ภายใต้ #content
$ vi themes/newsportal/page.tpl.php

...
  <div id="content"><div id="content_wrapper">
    <div><?php print $header ?></div>
    <?php if ($mission) { ?><div class="featurebox_center"><?php print $mission
?></div><?php } ?>
    <?php print $breadcrumb ?>
    <h3><?php print $title ?></h3>
    <div class="tabs"><?php print $tabs ?></div>
    <?php print $help ?>
    <?php print $messages ?>
    <?php print $content; ?>
  </div></div>
...

ทดลองดูแล้ว ของผมได้ผลครับ

» login or register to post comments

แก้แล้วครับ

Submitted by webmaster on 13 November, 2006 - 11:28.

ผมเจอเหมือนกันครับเมื่อคืนนี้ แต่ดึกแล้ว กะว่าไว้ทำต่อ ก็พอดีเลย คุณ wd ช่วยวิเคราะห์ให้เรียบร้อย ขอบคุณมากครับ

ผมแก้อีกแบบ โดยตั้งให้ display: table ใน #content ซะเลย แล้วปรับ margin เอา ทำให้ถ้าปิด #right_side ทั้งหมดไป #content ก็จะยืดไปเต็มขอบขวาด้วย

แต่ hack แบบนี้ ไม่รู้ปลอดภัยหรือเปล่า รบกวนช่วยรายงานผลด้วยนะครับ (IE ด้วยก็ดี ถึงแม้เราจะไม่ค่อยแคร์ เอิ๊กๆ)

» login or register to post comments

ยังเป็นอยู่ครับ

Submitted by wd on 13 November, 2006 - 11:42.

ลองจาก epiphany และ firefox-2.0 ยังเป็นอยู่ครับ

ถ้าเดาไม่ผิด น่าจะครอบอีกชั้นนึง
เพราะมันป้องกันเรื่อง clear: both ได้ครับ
(ของเราเป็นที่ตัวเบรค <br class="clear" />)

» login or register to post comments

แปลก

Submitted by webmaster on 13 November, 2006 - 11:50.

ที่ผมทดสอบ ก็ใช้ epiphany, firefox นะครับ มันก็เวิร์กนา..

» login or register to post comments

_/|\_

Submitted by wd on 13 November, 2006 - 11:56.

กราบขออภัยครับ
เป็นที่พร๊อกซี่ผมเองง่ะ
เวิร์กแล้วครับ :P

» login or register to post comments

^_^

Submitted by webmaster on 13 November, 2006 - 12:05.

โล่งอก..

» login or register to post comments

รายงาน Konqueror

Submitted by wd on 6 December, 2006 - 21:41.

รายงาน Konqueror เพิ่มเติมครับ
ทีแรกลองทดสอบแบบผ่าน ๆ ก็ใช้แสดงผลได้ดีครับ แต่พอลองทดสอบจริงจัง ปรากฎว่า ใน Konqueror เวลาเราขยับเมาส์ไปมา #content จะหลุบหายเข้าไปใต้ #left_side

ผมลองแก้โดย เอา display: table ออก แล้วตั้ง margin-left กับ margin-right เป็น 180px ก็สามารถแก้ได้ครับ

» login or register to post comments

รายงาน IE

Submitted by wd on 13 November, 2006 - 15:58.

รายงานผลว่า IE แสดง content หลุดลงล่างและแสดงผลเต็มพื้นที่ครับ
ผมลองแฮกดูแก้ครั้งล่าสุดดังนี้ครับ

$ vi themes/newsportal/styles.css

...
#content_wrapper {
  float: left;
}
...
.featurebox_center {
  background-color: #fffff6;
/*
  margin:0px;
*/
  margin: 0 30px 0 0;
  padding:10px;
  border: 1px solid #DFE8F7;
  font-family: verdana, arial, sans-serif;
  font-size: 11px;
  line-height: 18px;
  color: #333333;
}
...

อันแรกเหมือนเดิม
อันหลังแก้เรื่อง Mission Text แสดงผลเพี้ยนใน IE ครับ

$ vi themes/newsportal/page.tpl.php

...
  <div id="content"><div id="content_wrapper">
    <div><?php print $header ?></div>
    <?php if ($mission) { ?><div class="featurebox_center"><?php print $mission
?></div><?php } ?>
    <?php print $breadcrumb ?>
    <h3><?php print $title ?></h3>
    <div class="tabs"><?php print $tabs ?></div>
    <?php print $help ?>
    <?php print $messages ?>
    <?php print $content; ?>
  </div></div>
...

อันนี้เหมือนเดิม

ลองแล้วผ่านหมดครับ epiphany, firefox, IE, Opera-9, konqueror
(แต่ว่าทดสอบน้อยมากนะครับ)

สำหรับ IE หากต้องการทดสอบ ผมแนะนำ IEs 4 Linux ครับ ใช้งานสะดวกดี

» login or register to post comments

customize stylesheet

Submitted by wd on 13 November, 2006 - 09:49.

ขออนุญาตบันทึกไว้ที่นี่ด้วยนะครับ เป็นสไตล์ชีตที่ผมใช้เอง

บันทึกสไตล์ชีตที่เปลี่ยนแปลง

...
pre {
  background-color: #eee;
  padding: .5em 1.5em 1.5em .5em;
  border: 1px solid #ddd;
  width: 95%;
  overflow: auto;
}
code {
  color: #016;
}
dt {
  font-weight: bold;
  margin-top: .5em;
}
...

อธิบาย

แท็ก pre: background และ border ทำสีต่างจากเนื้อหา ทำให้ดูง่าย
padding-bottom: 1.5em และ width: 95% ทำเพื่อดัก IE
overflow: auto ทำให้จำกัดการแสดงผลไม่ให้ล้น
แท็ก code: ทำสีให้ดูต่างจากเนื้อหาเล็กน้อย เพราะบางท่านตั้งค่าฟอนต์ของ fixed width font ในบราวเซอร์เป็นตระกูล variable width font
แท็ก dt: ทำให้ดูหัวข้อง่ายหน่อย

» login or register to post comments