When i have a div with position: absolute, and in it is another div with position: absolute the inner div will position in the frame given through the outer (wrapper) div.
Now i want to create a class (css) called error_message that positions itself exactly in the center middle of the site, indifferent from where the it is called, so i need it to break out of every div wrapped around the error_message div.. how do i do this?
views:
44answers:
2
A:
I'm not sure why would you want that div to break out of parent div. Maybe try working on a fresh html structure for those?
http://haslayout.net/css-tuts/Horizontal-Centering and http://haslayout.net/css-tuts/Vertical-Centering
These should help you out!
Tom
2010-09-11 12:42:46
well, the class should align it's div, but in advance it is unknown where the error class will be called ergo it could be called out of a small container aligned bottom right, so if i would simply center the error div it would appear centered - in the small bottom right container but i want it to be centered respectively to the whole webpage - independent where i call it thus independent from any possible wrappers/containers
Samuel
2010-09-11 13:06:48
Huh... Is there any place where we could see your code? It's kind a hard, at least for me, to image the situation over there and think of a better solution.
Tom
2010-09-11 13:15:44
i have about 20 files, (html/php, no javascript) and they are all designed individually and there is a stylesheet with general classes. If in some part there is an error while getting content from the database i want to launch an error message just by displaying <div class="error_message"> $error; </div> at the place where the error occurs, and i want that div to display above all other content. i wouldn't know what code to show here
Samuel
2010-09-11 13:28:10
A:
I think the only way to have a div break out of all parent divs is to have an absolute positioning on all of them, which will obviously create its own set of problems.
Why not simply have a pre-defined, hidden div as a direct child of the body, instead of wrapping it in the markup. You can then easily position it as you want, and insert the error messages in it with the help of jQuery. An obvious advantage to this method is that you would only have to write this div once, and dynamically insert the error message into it. I would even suggest having a look at jQuery UI which allows you to easily create dialogs, both normal and modal, besides tons of other features.
UPDATE
Since JS is not allowed, an easy way to do this would indeed be displaying the div only if there was an error. So the PHP code would be ...
if (isset($error)) {
echo '<div class="show_error">' . $error . '</div>';
}
... and the CSS class for it would be ...
.show_error {
width: 400px; // error element's width
height: 200px; // error element's height
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px; // minus half the height
margin-left: -200px; // minus half the width
}
Of course, you can further style the error div as you wish, but these are needed to position it dead-center.
Hope this helps !
FreekOne
2010-09-11 13:52:14
no javascript allowed :p, but i will create the container at the end, displaying $error, and i'll start off with $error = "" and if there's an error i'll just fill in $error
Samuel
2010-09-11 14:11:31
well this is about what i had, but it doesnt 'dead-center' it just centers relative to the wrapping absolute positioned div around it :/ thx for your effort though, appreciate that!
Samuel
2010-09-17 23:56:46
It is most important that the error div is a direct child of the `<body>`, as I mentioned in my updated answer. Basically, something like `<body><div class="show error"></div><!-- the_rest_of_your_page --></body>`. That way it wouldn't be confined to any wrappers and it would be dead-centered.
FreekOne
2010-09-18 00:11:02