CODEWITHSUNDEEP
htmlcss
Nicolas Roy
Nicolas Roy

Reputation: 3803

How to have an image incorporate in my text ? HTML CSS

I'm working on my website and I would like to have a nice quotation. To do that, I'd like to have two big quotation marks images at the beginning and the end of my text, like incorporated in the text, that would move with the text when I resize the window.

I've tried to use a span with a display: block and the image as background but it acts like a div.

If I use a div and margins to place it right, it stays at the same place when I resize the window and is no more align with my text.

What would you advise ?

EDIT

Here is what I would like :

quotation

Upvotes: 1

Views: 582

Answers (3)

Roi
Roi

Reputation: 565

You can try this raw css, you can customized it as you want.

html {
    background: gray;
}
blockquote {
    background: white;
    display: inline-block;
    position: relative;
    padding: 30px 30px
}
blockquote:before {
    content: '"';
    position: absolute;
    font-size: 48px;
    top: 10px;
    left: 10px;

}
blockquote:after {
    content: '"';
    position: absolute;    
    font-size: 48px;
    bottom: -10px;
    right: 10px;
    
}
<blockquote>
This is a sample of a blockquote.
</blockquote>

EDIT: The above code works with a fixed quotations on the blockquote itself, the ending quotation doesn't move on the end of the paragraph.

This one should do it.

html {
    background: gray;
}
blockquote {
    background: white;
    display: inline-block;
    position: relative;
    padding: 30px 30px
}
.ql,.qr {
    position: relative;
}
.ql:before,.qr:after {
    content: '"';
    position: absolute;
    font-size: 48px;
}
.ql:before {
    top: -15px;
}
<blockquote>
    <span class="ql"></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; I am a sample of blockquote with a big quotation marks.<span class="qr"></span>
</blockquote>

<blockquote>
    <span class="ql"></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; I am a sample of blockquote with a big quotation marks. You see it moves according to the length of what I'm saying.<span class="qr"></span>
</blockquote>

Upvotes: 3

Rob
Rob

Reputation: 15150

Using a span was the correct choice but you should set it to inline or inline-block (or leave it alone altogether). As you found out, setting it to block made it occupy the entire width.

If you can use something other than an image, you can put a span around the quote character itself and use any unicode or other font family for quotation marks. Then you can put a span just around that and set it however you wish while maintaining an inline textual quote.

Upvotes: 1

Suman KC
Suman KC

Reputation: 3528

How about this..

<p class="your-quote-wrapper">
   <span><img src="/quote-icon-left.png"></span>Blabla blabla text<span><img src="/quote-icon-right.png"></span>
</p>

And your span being inline-block

p.your-quote-wrapper{
    display:inline-block;
}

Upvotes: 1

Related Questions