Matt M Matt M - 5 months ago 20
HTML Question

DIV and CSS: Floating box inside semi transparent div

I am creating this in a visualforce page but due to stackexchange policy I need to post web development questions here.

I have the following code:



<div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.75; z-index: 1000; background-color: gray;">
&nbsp;
</div>
<div style="position: absolute; left: 0; top: 0; bottom: 0; right: 0; z-index: 1001; margin: 10% 25%; color:white; font-weight:bold; text-align: center;">
<h>Transferring Records...</h><br />
<img src="/img/loading32.gif"/><br />
<h>This may take a minute or two...</h><br />
</div >





Which generates a full screen gray overlay and then my text and image in the center.

What I am trying to do is create a smaller white box around my text as well so it is easier to read. Can anyone help me with that?

Here is a screenshot of current setup:
screenshot

Answer

Personally I would change your structure a slight bit and decouple your CSS - if only for your own sanity when reading the thing in between content (if you want to you can simple include it in a <style type="text/css"></style> tag and it would work as well.

Since you want your white box to be inside your container, why not structure it like that? By fixing the outer container (with class overlay, referenced as .overlay in CSS) you can now position the inner box correctly, by moving it 50% from the left and top and then transform the box itself using translate, moving it by minus half its width and height. Now your structure makes sense and you can do whatever you want with your inner box:

div.overlay {
  position: fixed;  
  top: 0; 
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000; 
  background-color: gray;
  background-color: rgba(150,150,150,.5);
}
div.overlay div {
  position: absolute; 
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  color: black; 
  font-weight: bold; 
  text-align: center;
  padding: 20px;
  background: rgba(255,255,255,.5)
}
<div class="overlay">
  <div>
    <h>Transferring Records...</h>
    <br /><img src="/img/loading32.gif"/>
    <br /><h>This may take a minute or two...</h>
  </div>
</div>

This structure also makes it easy to work with as everything is simply contained in one single element, and you control everything in it. Easier to debug, easier to reason about (the relationship of the elements is obvious) and your CSS can target specifically divs that are nested inside boxes with the class overlay.

Comments