Fix overlay of HTML elements?

Asked

Viewed 244 times

0

I would like to add content to a platform block (how it shows red text capture).

When adding an element by default it is at the end of the block ( below the image visa).

I’d like my div to stay between the price 34,78$TTC -5% .. and the quantité.

I did it this way :

<div style="color: red; border: 1px solid #DFDFDF; position: relative; bottom: 405px; padding: 5px; word-break: break-word; margin : 3px 0 3px 0;" class="col-md-12" >
    Aqui esta o meu texto vermelho. Aqui esta o meu texto vermelho. Aqui esta o meu texto vermelho.
</div>

Consequences :

  • on the position of Ivds.

How do I avoid this by simply editing my div without touching the platform block code?

inserir a descrição da imagem aqui

  • You can place the html and css of the other elements ?

  • .col-md-12 should stay inside <div class="row"></div>, use the way you use it will break even.

  • 1

    @Guilhermenascimento my question has nothing to do with this so-called duplicate !

  • 1

    So please give details, because there in the answer that Linkei explains about the <div class="row"></div> and your code doesn’t show the use of <div class="row"></div>.

  • @Guilhermenascimento even using "Row" does not change anything!! In the beginning the text was below the image "visa"! You have an idea of how to put my div between 34.78$TTC -5%.. and the quantité. ?

  • It’s not just going there and playing Row randomly, there must be some problem in CSS or something else, there’s no way to point where it is. The answer I pointed out to explain how to use GRID that’s the basics, but that doesn’t mean you don’t have other parts of HTML or CSS with problems.

  • @Guilhermenascimento I published my CSS and HTML!

  • That’s just an excerpt, that’s nothing there, there’s a lot more CSS on your page and a lot more HTML, could be any part that triggers the problem.

  • @Guilhermebirth here is the code link : https://jsfiddle.net/p6x5q04w/. Actually I just want to add element to this block !

  • André, the code is all "compressed", gave up pain in the eyes, you want to make me suffer? :(

  • @Guilhermenascimento extracts directly from the site ... https://www.alibabike.com/lunettes/21632-verres-de-lunettes-tifosi-veloce-readers-clear-reader-lens-20.html. As you can see, this is the right-hand block ! Like to add an element between price and quantity.

  • Got it, you got a code ready, look right at the beginning (no body) has a col without Row <body id="product" class="product product-21632 product-verres-de-lunettes-tifosi-veloce-readers-clear-reader-lens-20 category-8151 category-lunettes hide-left-column hide-right-column lang_fr">&#xA; <div class="box-info-product col-md-3">, this is one that should be fixed. There must be a lot of problems, even more not being your HTML, maybe you do not understand what was done :/

  • @Did you see the block I’m talking about ? how would you for example to add a diva there ( without modifying the code of the block )? (as shown in the image in the post)

  • The HTML is all compressed and does not have this HTML of your question inside, and as I said must have more problems, even more that you are taking a code of yours and that you do not understand well. :/

  • @I believe I’m not making my point...!

  • But your code is all compressed I can’t analyze it.

  • @Guillhermenascimento actually has no code to be analyzed, and I’m not even asking for it!! See the image I posted in the publication ? Imagine you have two Ivs, and inside that div you have three Ivs placed vertically. As you would for example to change the positions of Divs using only CSS or JS if possible (without changing the HTML structure ) and without subreposing the Divs ?

  • The overlap is due to the lack of Row, if even with Row gave problem is because another part of that HTML that you sent me is causing a cascading problem and only analyzing it as I said. And the way you sent the HTML all compressed I have no way to analyze.

Show 13 more comments
No answers

Browser other questions tagged

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