Div captures the size of another

Asked

Viewed 558 times

2

Good morning dear(as), I have an html and from time to time I need to insert an image that is a "}" to determine that in a song will repeat that excerpt.

As my text adapts to the size of the screen, when moving it changes in size and the image is fixed, what I need is that it adapts to the size of the text.

In the planning I had, I started with a very good idea, I left the div that has the praise without Height, this way it is automatic, staying in the exact height of the text. If I put the div where the key is always the same height (even when the other is resized).

Below is an image where I highlighted the two div’s to better understand:

inserir a descrição da imagem aqui

If I succeed in any way, I leave my answer, until then, I accept any help or idea.

CSS: 

#louvor{
        background-color: rgba(00,00,00,0.8);
        margin-left: 1%;
        width: 93%;
        position: relative;
        float: left;
        font-size: 3.5vw;
        text-align: left;
        color: white;
        text-transform: uppercase;
        text-shadow: 1px 1px black;
        font-family: "Futura XBlk BT", Times, serif;
}

HTML:

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

        <link href="../../css/style.css" rel="stylesheet" />
    </head>
    <body id="principal">
        <div id="estrutura">
            <div id="logo-louvor"></div>
            <div id="louvor">           
            <font color="yellow">CORO:</font><br>
            AS MINHAS MÃOS TRAZEM CHAGAS TÃO FUNDAS<br>
            QUE TANTA AMARGURA EU PUDE ABRIGAR<br>
            DE TODA DOR DE VERGONHA E PECADO<br>
            EU FUI COROADO PARA TE SALVAR<br>
            </div>
            <div id="inform">
                <img src="../../imagens/chaves.png">
            </div>
        </div>
    </body>
</html>
javascript css html5
  • 1

    If possible put what you have of HTML and CSS, you may not need JS to do this.

  • All right, but it’s much simpler than it looks. I’ll edit the post and insert.

  • Alexandre you can use the property min-height, height , min-width and width in percentage for your image, as well as use the css medias queries.

  • Rafael, I don’t know about "css medias queries", I’ll see about it, it can help me yes.

  • Another thing, I understand that you want to add a background to the praise text background. If that’s the case, you don’t need the image in div #inform, just use the background-image in div #praise. The HTML font tag is deprecated using the direct color property in your css to configure the color!

  • Hey Rafael, about the div <font> I even know that it is obsolete, but it’s that kind, are many songs even and will have a whole staff that will help me write each one. ".

  • About what I said about the background, I didn’t understand. The praise div I want it transparent to get the image of the body. That’s why I set background-color: rgba(00,00,00,0);

Show 2 more comments

2 answers

1

I managed to develop something that suits me, I will publish the answer so that if someone has future doubts and find my code viable, is available.

First, within my HTML I added an image normally:

<img class="chave-big" src="../../imagens/chaves.png">
            AS MINHAS MÃOS TRAZEM CHAGAS TÃO FUNDAS <br>
            QUE TANTA AMARGURA EU PUDE ABRIGAR<br>
            DE TODA DOR DE VERGONHA E PECADO<br>
            EU FUI COROADO PARA TE SALVAR<br>

Then very simply, I added a css to the image:

.chave-big{
    height: 19vw;
    float: right;
}

This way, I’m using a height size with a "vw" responsive value and I set that the image will have the value float to the right, this way it accompanies my text in size, because my text is also responsive based on "vw".

Thank you all.

  • Guys, I’m having a problem that I forgot... The size of these keys are relative to each song, how do I determine a size for each?

  • There are some ways to do this I asked in the comment, I think what I want most is the good practice of programming, I believe that, as I will have several items with different values one of the others the best way is to define the image configuration by inserting the css in the file. Topic can be closed.

0

I created some div with some text:

<div class="teste">
      Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e o
</div>

So I created the following css code, I took any image on google and I put it as if it were your key, I put it so that it doesn’t repeat itself and on the right side, so that the text doesn’t get on top of it, put a padding on the right and I put it so that it matches the height of the div.

.teste{
  background-color: #f00;
  width: 200px;
  background: url('https://teja8.kuikr.com/i6/20171219/After-1-year-of-use--it-is-still-going-well-VB201705171774173-ak_WBP1721615504-1513671149.jpeg') right;
  background-repeat: no-repeat;
  background-size: auto 100%;
  color: #fff;
  padding-right: 20px;
}

Upshot: https://jsfiddle.net/r1rdznc3/1/

If you are going to use this same css code in more than one part on page, does not use id, uses class.

  • 1

    Dude, your idea mass this.. Putting as background it will track the size. There is only one problem, the one I sent in the image is an example, not all is the total size of the text, some only ask for the last 3 lines. But still, I think your idea might work, after all if I put in the background the size I want it will always follow the modifications. I will try here, but from now on. Thank you very much.

Browser other questions tagged javascript css html5

You are not signed in. Login or sign up in order to post.