html : trying to place a quote picture aside a text in

Question

I have a quote that I would like to integrate into my website. I've tried to place the quote picture before, but as soon as I zoomed out, the quote picture didn't stay in the same place. I used the position : absolute.

This is my script :

div#quote-layer {
    background-color: rgba(255,255,255,0.25);
    margin-top: 0px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0px;
    padding : 25px;
    width: 450px;
}

div#open-quote {position: absolute;
    left: 666px;
    top: 600px;
}

div#quote-layer p {
    text-align: center;
}

    <div id="quote-layer">
        <div id="open-quote">
            <img src="img/quotes.svg" width="100" height="100">
        </div>
        <p>
            my extremely beautiful quote !
        </p>
    </div>

I would find a better way to do it ! Thanks !

I need a solution to avoid the problem I have when I zoom in or out, that moving my quote — , Nov 05 '19 at 18:03

ajobi · Accepted Answer · 2019-11-05T18:49:04.533

0

This is how we do such things in CSS:

div#quote-layer {
    position: relative; // this is important change here
}

div#open-quote {
    position: absolute;
    left: -30px;
    top: -30px;
}

You can safely tweak the pixels to fit your needs. You could also remove the <div> wrapping the <img> and give the #open-quote id directly to the <img> instead, because that div does nothing for you in this example. If you want to understand how these things work, I would recommend this article: https://internetingishard.com/html-and-css/advanced-positioning/

edited Nov 05 '19 at 18:49

answered Nov 05 '19 at 18:22

ajobi

2,996
3
13
28

Thanks you much ! – Nov 05 '19 at 18:46
Happy to help! I added a further reading to the answer itself just now if you are interesting in knowing more. – ajobi Nov 05 '19 at 18:49

score 0 · Answer 2 · answered Nov 05 '19 at 19:10

Also I would use ::before selector.

div#quote-layer {
    background-color: rgba(255,255,255,0.25);
    margin-top: 0px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0px;
    padding : 25px;
    width: 450px;
}

div#quote-layer p {
    text-align: center;
}

div#quote-layer p::before {
    background-image: url("https://cdn2.iconfinder.com/data/icons/web-kit-2/64/web_quote-512.png");
    background-repeat: no-repeat;
    background-size: 20px 20px;
    display: inline-block;
    width: 20px; 
    height: 20px;
    content:"";    
}

<div id="quote-layer">
  <p>
    my extremely beautiful quote !
  </p>
</div>

html : trying to place a quote picture aside a text in

2 Answers2