ThaiSEOBoard.com

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

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

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

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

แต่ผลคือสีน้ำเงินมันครอบคลุมแค่ข้อความเท่านั้น
(http://upic.me/i/i9/7capture.png)

ผมอยากให้พื้นหลังสีน้ำเงินมันยาวไปสุดขอบเลยอะครับ
แบบนี้
(http://upic.me/i/66/12782_828906590535857_4856984972928300280_n.jpg)

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

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

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

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

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

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

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

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

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

ไม่อยากยุ่งยากก็แยก 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 อาจจะไม่ถูกต้องทั้งหมดนะฮะ ยังไงก็ขออภัยด้วย  :wanwan012:

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

<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 อะครับ

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

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

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

<h1>line1</h1>

<h1>line2</h1>   :wanwan004:

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

CSS


BODY


(http://upic.me/i/4n/7test.png)


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

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

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

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

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

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

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

ลองกำหนด height ดูครับ คิดว่า h1 คงไม่น่าจะเกิน 2 บรรทัดใช่ไหมครับ  :wanwan016:

css ก็ ธรรมดาเลย

h1 {
   background: blue;
   height: 43px; //กำหนดพื้นที่ bg
   margin: 0;
   padding: 0;
   margin-bottom: 37px; //ดัน paragraph ไม่ให้ขึ้นมาทับบรรทัดที่ 2
}
h1::first-line{
   color: red;
}

(http://image.ohozaa.com/i/da9/T4mxQ9.png)

มันมี div อื่นกระทำหรือเปล่าครับ

ทำไมแก๊ปใส่แค่นี้ได้เลย

http://codepen.io/gapgag55/pen/GgLwyQ

จขกท เขาอยากยัดไว้ใน H1 แค่ตัวเดียวครับ แต่แยกเป็น 2 line
ถ้าแบบนี้ <h1><span class="line1">LINE1</span><span class="line2">LINE2</span></h1> ผิดกฎ W3 เพราะห้ามมี TAG ใดๆใน Heading (แต่ผมว่าถ้ามันแสดงผล OK ก็ช่างกฎเถอะ ถ้ามันไม่มีผลเสีอยต่อ SEO)
แต่ถ้าแบบนี้ <h1>LINE1</h1><h1>LINE2</h1> ผิดกฎ Search Engine เพราะมี H1 มากกว่า 1 ตัว (อันนี้ไม่แนะนำ)

สรุปแล้วแยกเป็น H1 กับ H2 จะดูดีมีสไตล์ที่สุดครับ  :wanwan021: