Write once, use a lot of different content for the CSS dialog box

Question

I wrote a web application for my own resource for my employees, and part of the basic template is a simple dialog box - a hidden div , between the body and header with the absolute position that appears when the button is pressed (another div ), displays content based on the clicked button and disappears when X is clicked in the corner. You know the routine.

Therefore, I suspect that I do not need to do this, but I found that I could not yet describe the CSS of the dialog box in the basic CSS template so that I could guarantee that its position on the screen is always more or less the same. It seems, instead, since the contents of the dialog box are resized to a page, this requires redefining the margin-left and margin-right dialog boxes on any given page.

For example, my basic css for the dialog box is like this, and it is loaded every time with the basic html template:

 #dialogBox { position: absolute; border: 4px solid; border-radius: 15px; cursor: default; text-align:center; z-index:1000; /*always on top*/ padding: 10px 0 10px 0; font-size: 36px; } 

Pay attention to the absence of the field - I did not find one value of the field that performs the task without causing a vicious discrepancy in the size of the dialog box for the contents inside. For example, on a page where it is assumed that the content will be large enough, I set the value as such:

 #dialogBox { margin: 5% 10% 0 10%; } 

If it is expected that the content will be much lighter, it seems that the margin should be set again on the next page that I load in order to circumvent visual fraud:

 #dialogBox { margin: 5% 33% 0 33%; } 

This is not a big deal, but it is repeated. I'm sure there is a better way to do this, so the div just expands naturally and maintains equal margin-left and margin-right on any given page, while maintaining the “Goldilocks” size for its content - not too big, not too small is always in order.

I understand that in some jQuery libraries there is an existing infrastructure for “beautiful” dialog boxes - they even drag the screen and do tricks, but this is just for my own website, an application, so I'm just not interested in that. It's also good to know how to create things yourself, isn't it? I'm a little new to this to trick and just steal a bunch of CSS, so I try to be honest with it.

If I left any code that relates to this problem, I am more than happy to change my post.

EDIT. I have two excellent answers to the question of placing a dialogBox in the containing div - and the only reason I didn’t accept them is simply because it looks like I might need to redefine the dimension aspects on each page, despite some one-and-one code. This is probably my mistake, because the information on different pages is slightly different, and I would like my users not to scroll the page if necessary. Setting the width of the dialog box on one page allows me to do this; I dunno, if left before CSS, will allow me to do this.

FINAL EDITING. I believe that the accepted answer is the best solution for my project.

Answer 1

I'm not sure if you can solve this without adding another container. With a wrapper, you can do this position: absolute; , and then center inside it, without the need for negative fields, etc.

HTML

 <div class="container"> <div id="dialogBox">content of whatever size here</div> </div> 

CSS

 .container { height: 0; /* hide/ make unclickable if necessary */ left: 0; right: 0; /* full width */ text-align: center; /* center inline content */ position: absolute; } #dialogBox { /* make div stretch to its content and allow centering */ display: inline-block; /* reset the inherited text-align */ text-align: left; } 

This way you do not need to care about the width of the dialog box.

Demo at http://jsfiddle.net/9wcFb/

Alternatively, you can also use margin: auto; when the container is absolutely positioned. http://jsfiddle.net/9wcFb/1/

---

Sidenote: since this #dialogBox is most likely dependent on JavaScript, if you don't like the extra markup, you can completely add it with a script, although I would say that this would be an over-engineering case;)

Answer 2

Does the dialog box set the width?

If so, you can set the left property to 50%, and the margin-left property to (width / 2)

Look here:

http://jsfiddle.net/tY7ef/

 #dialogBox { position: absolute; border: 4px solid; border-radius: 15px; cursor: default; text-align:center; z-index:1000; /*always on top*/ padding: 10px 0 10px 0; font-size: 36px; left: 50%; margin-left: -200px; width: 400px; } 

You can also use percentages:

 width: 60%; margin-left: -30%; 

Auto fields usually do not work with absolute positioned elements: http://www.sitepoint.com/css-center-position-absolute-div/

Answer 3

You can try using automatic margin, so the div should automatically center

 #dialogBox { margin: 5% auto 0; } 

Answer 4

I can come up with two quick methods for this, depending on whether you know the width of the element

If you know the width

If you know the width of your div, set the distance from the left side of the screen and subtract half the width in the box.

Say your screen is so wide:

 /* Legend: Edge of screen: | Center of element: . Beginning of div: [ End of div: ] */ | . | | .{center} |{size:56 characters} 

And you have a div of this width:

 [---I am .a div---]{size:16 characters} 

To center it using this method, we set the distance from the left side to half the screen ( left: 50%; ):

 | .[---I am .a div---] | | . | 

And then subtract the extra distance in the box, 50% of the total size of the div or, in our case, 8 characters. ( margin-left:-8 characters; ):

 | [---I am .a div---] | | . | 

Now we have a centered div.

This will work with any type of width you use (px,%, em ...), as long as you move the div back left exactly half its width.

 #dialogBox{ width:70%; left:50%; margin-left:-35%; /*half of 70%*/ } #dialogBox{ width:100px; left:50%; margin-left:-50px; /*half of 100px*/ } #dialogBox{ width:202em; left:50%; margin-left:-101em; /*you get the picture*/ } 

Fiddle

---

If you do not know the width.

Create a new div that will act as a container for your dialog box. Set the left: value of this container div ( position:absolute; ) to 50% and subtract 50% from the left: value of your div dialog (now position:relative; ).

We have a div in a div:

 [[---I am .a div---]]{size:still 16 characters} /* It is important to note that the width of the outer div will always be equal to the width of the inner div unless defined otherwise. */ 

If we set our container div ( C ) to 50% to the left of the screen ( left: 50% ), we get:

  CD DC | .[[---I am .a div---]] | | . | 

Now we set the left our dialog box div ( D ) to -50% (subtract 50% of the width of the parent element, which in this case is exactly 50% of the width of the dialog box.)) And get:

  DCDC | [---I am .[a div---] ] | | . | 

This effectively centers the dialog box without knowing its width.

 #container{ position: absolute; left:50%; } #dialogBox{ position: relative; left:-50%; } 

Fiddle

^{I made the div container red in the example so you can see how it works.}