สอบถามเพิ่มรูปภาพข้างหัวข้อให้อยู่บนเส้น

HTML Basic
สำหรับนักพัฒนาเว็บไซต์มือใหม่ HTML , CSS และการใช้ Tools ต่างๆ ในการพัฒนาเว็บไซต์

Moderator: mindphp

ภาพประจำตัวสมาชิก
Thanapoom1514
PHP VIP Members
PHP VIP Members
โพสต์: 4329
ลงทะเบียนเมื่อ: 04/07/2022 9:46 am

สอบถามเพิ่มรูปภาพข้างหัวข้อให้อยู่บนเส้น

โพสต์ที่ยังไม่ได้อ่าน โดย Thanapoom1514 »

ผมใช้วิธี after แล้วใส่รูปภาพแต่รูปภาพมันไม่ตรงระหว่างเส้นขีด ต้องปรับยังไงให้รูปภาพบนเส้นขีด
HTML CSS-1.png
HTML CSS-1.png (25.5 KiB) Viewed 1407 times

โค้ด: เลือกทั้งหมด

.moduletable_recommended_products > .bestseller_products,
.moduletable_recommended_products > .bestseller_products,
.moduletable_recommended_products > .bestseller_products {
    position: relative;
}

.moduletable_recommended_products > h1::after,
.moduletable_recommended_products > h2::after,
.moduletable_recommended_products > h3::after {
    content: "";
    background-image: url(/images/menu/wtctool-blue.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 7px;
    right: 15px;
    width: 4em;
    height: 5em;
}

.moduletable_brand > custom ,
.moduletable_brand > custom ,
.moduletable_brand > custom  {
    position: relative;
}

.moduletable_brand > h1::after,
.moduletable_brand > h2::after,
.moduletable_brand > h3::after {
    content: "";
    background-image: url(images/menu/wtctool-red.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 28.2em;
    right: 1.5rem;
    width: 4em;
    height: 5em;
}

:gfb:
ภาพประจำตัวสมาชิก
tsukasaz
PHP VIP Members
PHP VIP Members
โพสต์: 21911
ลงทะเบียนเมื่อ: 18/04/2012 9:39 am

Re: สอบถามเพิ่มรูปภาพข้างหัวข้อให้อยู่บนเส้น

โพสต์ที่ยังไม่ได้อ่าน โดย tsukasaz »

รูปภาพที่กำหนดเป็น absolute ต้องอยู่ภายใน element ที่เป็น relative มันถึงจะจัดง่ายครับ

ลองแนวทางจาก https://www.w3schools.com/css/tryit.asp ... ttom_right
The last bug isn't fixed until the last user is dead. (Sidney Markowitz, 1995)
ภาพประจำตัวสมาชิก
Thanapoom1514
PHP VIP Members
PHP VIP Members
โพสต์: 4329
ลงทะเบียนเมื่อ: 04/07/2022 9:46 am

Re: สอบถามเพิ่มรูปภาพข้างหัวข้อให้อยู่บนเส้น

โพสต์ที่ยังไม่ได้อ่าน โดย Thanapoom1514 »

ได้แล้วครับ :icon_plusone:
HTML CSS-1.png
HTML CSS-1.png (41.3 KiB) Viewed 1340 times
โค้ด html

โค้ด: เลือกทั้งหมด

<div class="product-topic">
    <img class="bottomRightImg" src="/images/menu/blue.png" alt=">
    <h3 class="sp-module-title">สินค้าแนะนำ</h3>
</div>
โค้ด css

โค้ด: เลือกทั้งหมด

.product-topic {
        position: relative;
        
}
.bottomRightImg {
        position: absolute;
        bottom: 0;
        right: 0;  
        height: 50px;
}
.moduletable_recommended_products > .product-topic {
        border-bottom: 5px solid #073c79;

}
 
.moduletable_recommended_products > .product-topic > h3 {
        background-color: #073c79;
        color: white;
        padding: 12px;
        border-radius: 10px 10px 0px 0px;
        font-weight: 500;
        height: 50px;
        width: 15em;
        margin-bottom: unset;
        text-align: center;
}
:gfb:
ตอบกลับโพส

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 42