PDA

View Full Version : ขอถามเรื่อง CSS และการ พิมพ์



abang
03-10-2007, 04:17 PM
คือผมโหลด ไฟล์ CSS มาครับ แล้ว ก็ สร้างเวป จากนี้โดย อาศัย class มาจากไฟล์ แต่ว่ามีปัญหาตรงที่เวลา เรา สั่ง print เวปที่เราสร้าง
ทำไมมันไม่เหมือน กับในเวป ครับ ตาราง ที่มี สี ก็ ไม่มี แถม เป็น สีขาว เฉย เลย เมื่อเทียบกับในเวป ผมเขียน php ครับ ต้องแก้ ยังไง




CSS ไฟล์



.tdday { font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #00FFFF;
font-weight: normal;
font-size: 13px;
width: 28px;
line-height: 20px;
color: #000000;
vertical-align: middle;
text-align: center;
}

.start{ font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #00FF00;
font-weight: normal;
font-size: 11px;
width: ;
line-height: 15px;
color: #ffffff;
vertical-align: middle;
text-align: center;

}
.reserve{ font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #FF99CC;
font-weight: normal;
font-size: 11px;
width: ;
line-height: 15px;
color: #ffffff;
vertical-align: middle;
text-align: center;



}
.delay { font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #FFCC33;
font-weight: normal;
font-size: 11px;
width: ;
line-height: 15px;
color: #ffffff;
vertical-align: middle;
text-align: center;
}

.tdtoday { font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #E8FA9E;
font-weight: bold;
font-size: 15px;
line-height: 16px;
width: 26px;
color: #FF6600;
vertical-align: middle;
text-align: center;
}

.tdheading { font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #a0a0a0;
font-weight: bold;
font-size: 10px;
line-height: 20px;
color: #ffffff;
vertical-align: middle;
text-align: center;
}
.tddate { font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #00FFFF;
font-weight: normal;
font-size: 12px;
line-height: 16px;
width: 75px;
color: #000000;
vertical-align: middle;
text-align: center;
}
.tdtester { border: #a0a0a0;
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #FFFFCC;
font-weight: normal;
font-size: 15px;
line-height: 16px;
width: 75px;
color: #000000;
vertical-align: middle;
text-align: center;
}
.treven{
background-color: #EAFDFF;
}
.trodd{
background-color: #FFFFFF;
}

.botton{ border-bottom: 2px solid #6699CC;
font-size: 12px;

}
BODY {
FONT-SIZE: 12px; MARGIN: 0px; COLOR: #444444; FONT-FAMILY: tahoma
}
TD {
FONT-SIZE: 12px; MARGIN: 0px; COLOR: #444444; FONT-FAMILY: tahoma
}
TH {
FONT-SIZE: 12px; MARGIN: 0px; COLOR: #444444; FONT-FAMILY: tahoma
}
TD.minitext {
FONT-SIZE: 11px
}
TD.logo {
FONT-SIZE: 9px
}
IMG {
BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px
}
A {
COLOR: #5d5d5d; FONT-FAMILY: tahoma; TEXT-DECORATION: none
}
A:hover {
COLOR: #fb8639
}
.keyw {
FONT-SIZE: 1px; COLOR: white
}
TD.headmenu {
FONT-SIZE: 11px; VERTICAL-ALIGN: middle; HEIGHT: 25px
}
TD.leftmenu {
FONT-WEIGHT: bold; VERTICAL-ALIGN: middle; COLOR: #444444; HEIGHT: 25px
}
TD.leftmenu A {
COLOR: #444444; TEXT-DECORATION: none
}
TD.leftmenu A:hover {
COLOR: #ff9933; TEXT-DECORATION: none
}
TD.line_ {
BACKGROUND-IMAGE: url(img/dot_line.gif); HEIGHT: 1px
}
TD.linel {
BACKGROUND-IMAGE: url(img/dot_linel.gif); WIDTH: 1px
}
.btn {
BORDER-RIGHT: #e8e8e8 1px solid; PADDING-RIGHT: 1em; BORDER-TOP: #e8e8e8 1px solid; PADDING-LEFT: 1em; FONT-WEIGHT: bold; FONT-SIZE: 100%; BACKGROUND: url(img/btnbg.gif); PADDING-BOTTOM: 0px; VERTICAL-ALIGN: middle; OVERFLOW: visible; BORDER-LEFT: #e8e8e8 1px solid; COLOR: white; MARGIN-RIGHT: 0.2em; PADDING-TOP: 0px; BORDER-BOTTOM: #e8e8e8 1px solid; HEIGHT: 1.8em; TEXT-ALIGN: center; min-width: 7em
}
TD.barhead {
FONT-WEIGHT: bold; BACKGROUND-IMAGE: url(img/barbg.gif)
}
TD.footer {
FONT-SIZE: 9px; COLOR: #9a9a9a; TEXT-ALIGN: center
}
TD.hosting {
FONT-SIZE: 9px; COLOR: #9a9a9a; TEXT-ALIGN: center
}
TD.downloadhead {
FONT-WEIGHT: bold; FONT-SIZE: 1.6em; VERTICAL-ALIGN: middle; TEXT-ALIGN: left
}
TD.download2 {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 11px; PADDING-BOTTOM: 3px; VERTICAL-ALIGN: middle; PADDING-TOP: 3px; TEXT-ALIGN: left
}
TD.download2h {
FONT-WEIGHT: bold; FONT-SIZE: 11px; VERTICAL-ALIGN: middle; TEXT-ALIGN: left
}
#container {

}

TABLE TD {
VERTICAL-ALIGN: top
}
TABLE.flat {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 99%; PADDING-TOP: 0px; BORDER-COLLAPSE: collapse
}
TABLE.flat TD {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
TABLE.main {
PADDING-RIGHT: 4px; PADDING-LEFT: 4px; PADDING-BOTTOM: 4px; MARGIN: 0px; WIDTH: 99%; PADDING-TOP: 4px
}
TABLE.main TD {
PADDING-RIGHT: 4px; PADDING-LEFT: 4px; PADDING-BOTTOM: 4px; PADDING-TOP: 4px
}
TABLE.cells {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 99%; PADDING-TOP: 0px
}
TABLE.cells TD {
PADDING-RIGHT: 2px; PADDING-LEFT: 2px; PADDING-BOTTOM: 2px; MARGIN: 0px; PADDING-TOP: 2px; BACKGROUND-COLOR: #f7f7f7
}
TABLE.list {
PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; MARGIN: 0px; WIDTH: 99%; PADDING-TOP: 5px
}
TABLE.list TD {
PADDING-RIGHT: 12px; PADDING-LEFT: 12px; PADDING-BOTTOM: 12px; PADDING-TOP: 12px
}
.disp {
PADDING-RIGHT: 12px; PADDING-LEFT: 12px; PADDING-BOTTOM: 12px; MARGIN: 0px; PADDING-TOP: 12px
}

FORM {
MARGIN: 0px
}


H1 {
FONT-SIZE: 16px
}
H2 {
FONT-SIZE: 10px
}
H3 {
FONT-SIZE: 10px; MARGIN: 1em 1em 1em 0px
}
H4 {
FONT-WEIGHT: bold; FONT-SIZE: 13px; MARGIN: 1.5em 1em 1em 0px
}
H5 {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-WEIGHT: bold; FONT-SIZE: 11px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
H6 {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 10px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}[/b]

aumNaKab
04-10-2007, 08:31 AM
อาจเกิดจากที่ ตัว Browser เองนั้นแหละคับ เพราะว่า บางตัว (เกือบทุกตัว) จะทำการตัดสีพื้นหลังเองอัตโนมัต เพื่อที่ว่าเวลาพิมพ์จะได้ไม่เปลืองหมึกโดยใช้เหตุ อย่าง FF 2.0 ที่ผมใช้ก็จะตัดเองคับ เป็นเรื่องปกติ ไม่ใช่เขียนผิดหรอกคับ (จากเท่าที่ดูนะคับ)

วิธีแก้ ลองใช้การตั้ง CSS เพื่อ Print ดูนะคับ โดย ก็อป Script CSS ตัวเดิมลงไฟล์ (จะง่ายที่สุด) แล้วเปลี่ยนจากการใส่ Script เป็นการเรียกผ่านไฟล์ เช่นตอนนี้ผม Save ในชื่อ style.css ผมก็ลบ CSS บน เพจแล้วแทรก

<link rel="stylesheet" type="text/css" media="print" href="style.css" />

เท่านี้เวลาพิมพ์ก็จะคงสภาพตามที่เราตั้งค่าไว้แล้วคับ

abang
04-10-2007, 08:51 AM
ขอบคุณ คับ สำหรับคำแนะนำ แต่ผมก็ ทำโดยการ link ไฟล์ นั่นแหละ ครับ ถึง print ออกมา แล้ว มันไม่แสดง หรือว่าผมลองเอาไป แทรกใน flie เดียวกัน เลย จะลองดู นะ ครับ ลอง สับเปลี่ยนกัน เผื่อจะได้

aumNaKab
05-10-2007, 01:23 AM
อย่าลืมนะคับ ตอนแทรก link tag ค้องมี media = "print" เพิ่มเข้าไปสำหรับสไตล์ที่ต้องการจะให้พิมพ์นะคับ สมมุติอยากให้ทุกอันเป็นเหมือนกัน ก็เปลี่ยนจากprint เป็น all ก็ได้คับ เช่น

<link rel="stylesheet" type="text/css" media="all" href="style.css" />

คับ