ต่อไป »

[azprince]

อยากเขียน css ให้ ข้อความมีพื้นหลังสีน้ำเงิน เขียนยังไงหลอครับ

โค๊ด html ที่ผมกำหนดคือ

โค๊ด:

<h1>line1<br>line2</h1>

แล้วให้บรรทัดแรกมีข้อความเป็นสีแดงก็เขียนเป็น

โค๊ด:

h1::first-line{
   color: red;
}

แล้วที่บรรทัดแรกผมอยากให้มีพื้นหลังเป็นสีน้ำเงินด้วย ก็ลองใส่เป็น

โค๊ด:

h1::first-line{
   color: red;
   background:blue;
}

แต่ผลคือสีน้ำเงินมันครอบคลุมแค่ข้อความเท่านั้น


ผมอยากให้พื้นหลังสีน้ำเงินมันยาวไปสุดขอบเลยอะครับ
แบบนี้


เขียนโค๊ดยังไงดีครับ ขอบคุณคร้าบบบ

[Zyrus]

ลองใส่ display:block เข้าไปครับ

[MD.18]

width:100%;text-align:center;  ได้ไหมลองดูครับ

[azprince]

ลองใส่ display:block เข้าไปครับ

ไม่ได้ครับ เหมือนเดิม

width:100%;text-align:center;  ได้ไหมลองดูครับ

ไม่ได้ครับ เหมือนเดิม

[Zyrus]

ลองเช็ค element ดูครับ
.element h1 {width:100%}
น่าจะใช้ได้

[azprince]

ลองเช็ค element ดูครับ
.element h1 {width:100%}
น่าจะใช้ได้

ไม่ได้อยู่ดีครับ เหมือนเดิม

[VadiForte]

ไม่น่าจะได้ครับ ต้องใส่ div ครอบเข้าไปครับ

ไม่ทราบว่า line 1 กับ line 2 นี่แยกกันได้หรือเปล่าครัล

[dekbannok14]

ไม่อยากยุ่งยากก็แยก class ครับ จัดการง่ายดี หรือไท่ก็ลองเพิ่ม span เข้าไปดูครับ

<h1 class="test"><span class="line1">line1</span><span class="line2">line2</span></h1>

test{
width:100%;
tex-align:center;
margin:0;//h1 จะ default magin-botton มาให้
font-size:24px;
line-height:24px;//กำหนดเองได้อยากให้ห่าวกันเท่าไหร่
}
test.line1{
width:100%;
display:block;
color: red;
background:blue;
}
test.line2{
width:100%;
display:block;
}

ลองดูฮะ code อาจจะไม่ถูกต้องทั้งหมดนะฮะ ยังไงก็ขออภัยด้วย 

[methapun]

นี่ครับ ได้แน่นอนครับ

<style>
.test{
width:100%;
tex-align:center;
}
.line1{
width:100%;
display:block;
color: red;
background:blue;
padding:10px 0;
text-align:center;
}
.line2{
width:100%;
display:block;
padding:10px 0;
text-align:center;
}
</style>

(html)

<h1 class="test"><span class="line1">line1</span><span class="line2">line2</span></h1>

[azprince]

นี่ครับ ได้แน่นอนครับ

<style>
.test{
width:100%;
tex-align:center;
}
.line1{
width:100%;
display:block;
color: red;
background:blue;
padding:10px 0;
text-align:center;
}
.line2{
width:100%;
display:block;
padding:10px 0;
text-align:center;
}
</style>

(html)

<h1 class="test"><span class="line1">line1</span><span class="line2">line2</span></h1>

ตอนนี้มันก็ใช้ประมาณนี้อยู่อะครับ แต่มันไม่ถูกหลักโครงสร้างของ w3 เหอๆ ผมเลยอยากปรับให้มันออกมาดีที่สุดประมาณว่า ไม่ให้มี tag อื่นๆอยู่ข้างใน h1 อะครับ

[azprince]

ไม่อยากยุ่งยากก็แยก class ครับ จัดการง่ายดี หรือไท่ก็ลองเพิ่ม span เข้าไปดูครับ

<h1 class="test"><span class="line1">line1</span><span class="line2">line2</span></h1>

test{
width:100%;
tex-align:center;
margin:0;//h1 จะ default magin-botton มาให้
font-size:24px;
line-height:24px;//กำหนดเองได้อยากให้ห่าวกันเท่าไหร่
}
test.line1{
width:100%;
display:block;
color: red;
background:blue;
}
test.line2{
width:100%;
display:block;
}

ลองดูฮะ code อาจจะไม่ถูกต้องทั้งหมดนะฮะ ยังไงก็ขออภัยด้วย 

เขียนแบบใช้ tag ซ้อนกัน h1 มันเขียนง่ายก็จริงอ่าครับ แต่มันไม่ถูกหลักโครงสร้าง tag ที่ w3 เขาบอกไว้อ่าครับ

[Surakrai]

โค้ดสั้นสุดได้แค่นี้ http://jsfiddle.net/a7oyuqy9/  
ถูกหลักโครงสร้าง w3 หรือเปล่าไม่รู้ แต่เขาก็เขียนกันแบบนี้
เท่าที่เห็น ใน h1 ก็มี tag ข้างในอยู่เยอะ เช่น tag a

[dekbannok14]

ไม่อยากยุ่งยากก็แยก class ครับ จัดการง่ายดี หรือไท่ก็ลองเพิ่ม span เข้าไปดูครับ

<h1 class="test"><span class="line1">line1</span><span class="line2">line2</span></h1>

test{
width:100%;
tex-align:center;
margin:0;//h1 จะ default magin-botton มาให้
font-size:24px;
line-height:24px;//กำหนดเองได้อยากให้ห่าวกันเท่าไหร่
}
test.line1{
width:100%;
display:block;
color: red;
background:blue;
}
test.line2{
width:100%;
display:block;
}

ลองดูฮะ code อาจจะไม่ถูกต้องทั้งหมดนะฮะ ยังไงก็ขออภัยด้วย 

เขียนแบบใช้ tag ซ้อนกัน h1 มันเขียนง่ายก็จริงอ่าครับ แต่มันไม่ถูกหลักโครงสร้าง tag ที่ w3 เขาบอกไว้อ่าครับ

อ่อ คับ งั้นก็คงต้องเอาตามหลัก w3c อ่าคับ ก็คงต้องแยกออกเป็น h1

<h1>line1</h1>

<h1>line2</h1>   

[azprince]

ไม่อยากยุ่งยากก็แยก class ครับ จัดการง่ายดี หรือไท่ก็ลองเพิ่ม span เข้าไปดูครับ

<h1 class="test"><span class="line1">line1</span><span class="line2">line2</span></h1>

test{
width:100%;
tex-align:center;
margin:0;//h1 จะ default magin-botton มาให้
font-size:24px;
line-height:24px;//กำหนดเองได้อยากให้ห่าวกันเท่าไหร่
}
test.line1{
width:100%;
display:block;
color: red;
background:blue;
}
test.line2{
width:100%;
display:block;
}

ลองดูฮะ code อาจจะไม่ถูกต้องทั้งหมดนะฮะ ยังไงก็ขออภัยด้วย 

เขียนแบบใช้ tag ซ้อนกัน h1 มันเขียนง่ายก็จริงอ่าครับ แต่มันไม่ถูกหลักโครงสร้าง tag ที่ w3 เขาบอกไว้อ่าครับ

อ่อ คับ งั้นก็คงต้องเอาตามหลัก w3c อ่าคับ ก็คงต้องแยกออกเป็น h1

<h1>line1</h1>

<h1>line2</h1>   

คราวนี้ก็ผิดหลักทำอันดับบน google ละครับที่เขาว่ามี h1 ได้อันเดียว 5555

[parksong]

CSS

โค๊ด:

#area{
  font-weight: bold;
  padding: 14px 18px;
  font-size: 14.0520833333333px;
  color: rgb(255, 255, 255);
  white-space: nowrap;
  width: auto;
  height: auto;
  border-width: 0px;
  background: rgb(255, 145, 0);
  text-align:center;
}

BODY

โค๊ด:

<div id="area">
testtttttt
</div>

ประมาณนี้ได้ไหมครับ นอกนั้นตัวอักษรก็ปรับไซส์เ้อา  

[ieiq]

CSS

โค๊ด:

#area{
  font-weight: bold;
  padding: 14px 18px;
  font-size: 14.0520833333333px;
  color: rgb(255, 255, 255);
  white-space: nowrap;
  width: auto;
  height: auto;
  border-width: 0px;
  background: rgb(255, 145, 0);
  text-align:center;
}

BODY

โค๊ด:

<div id="area">
testtttttt
</div>

ประมาณนี้ได้ไหมครับ นอกนั้นตัวอักษรก็ปรับไซส์เ้อา 

ผมก็แน่ะนำแบบนี้ครับ

[BakKheab]

ผมว่าแยกกันเลยดีกว่าครับ ง่ายและชัวร์

<h1>line-1</h1>
<h2>line-2</h2>

[wasantec]

หลายๆท่านแนะนำก็ใช้ได้นะครับ แต่ผมว่าอยู่ที่เราเลือกใช้มากว่า 

[towerlove]

เข้ามาฟังด้วยครับ ขอบคุณครับ

[killer777]

ลองแบบนี้ครับ
<p style="background-color:#009">Text ..........</p>